JS-віджет “Заявка + мікроквіз”
6000 UAH1) Сценарій користувача
Клік по плаваючій кнопці → відкривається панель.
Крок 1–2: мікроквіз (вибір категорії/бюджету/терміну).
Крок 3: контактна форма (ім’я, телефон/емейл, чекбокс згоди).
Після відправки: подяка + CTA (відкрити WhatsApp/Telegram або повернутися на сайт).
2) UI/UX
Плаваюча кнопка (правий нижній кут), адаптивна панель 360–420 px.
Прогрес-бар кроків, валідація полів у реальному часі.
Тема: світла/темна, кастомізація кольорів через CSS-vars.
Локалізація: ua/ru/en (тексти — з JSON).
3) Технічні вимоги
Вантажиться асинхронно; розмір бандла ≤ 40 кб gzip.
Без сторонніх залежностей (Vanilla JS); стилі ізольовані (shadow DOM або префікси).
Підтримка: останні 2 версії Chrome/Edge/Firefox, Safari 15+; мобайл iOS/Android.
4) Налаштування (конфіг)
Параметри в
window.WidgetConfig: мова, кольори, поля форми, кроки квіза, webhook URL, включення месенджерів.Можливість показу за умовою: час на сторінці, вихідний намір, UTM-мітки, сторінки/шаблони.
5) Інтеграції
Відправка даних на: REST webhook (JSON), Email (SMTP-relay), Google Sheets (через webhook).
Події аналітики:
widget_open,quiz_step,submit_success,submit_errorв GA4/GTM (dataLayer push).Антиспам: honeypot + таймінги + опціонально reCAPTCHA v3.
6) Безпека та приватність
Політика згоди (checkbox), мінімум персональних даних.
TLS-запити, обмеження CORS по домену, rate-limit на бекенді.
Не логувати PII в консолі/аналітиці.
Відгук замовника про співпрацю з Андрієм Коломійчуком
JS-віджет “Заявка + мікроквіз”Все зроблено так, як домовлялися!
Відгук фрилансера про співпрацю з Morti A
JS-віджет “Заявка + мікроквіз”Співпраця пройшла на одному диханні: мінімум правок, максимум адекватності. 10/10, рекомендую!
-
368 1 0 оброго дня.
Дякую за детальне технічне завдання — воно повністю зрозуміле. Готовий реалізувати легкий клієнтський віджет-квіз із контактною формою та інтеграціями відповідно до описаних вимог.
1. Функціонал
Плаваюча кнопка у правому нижньому куті, по кліку відкривається адаптивна панель (ширина 360–420 px).
Мініквіз у три кроки:
Вибір категорії, бюджету або терміну.
Додаткові опції (за потреби).
Контактна форма: ім’я, телефон або email, чекбокс згоди.
Після відправлення — повідомлення подяки з можливістю перейти у WhatsApp/Telegram або повернутись на сайт.
… Прогрес-бар, валідація полів у реальному часі, антиспам (honeypot + таймінги, опційно reCAPTCHA v3).
Підтримка світлої та темної теми, кастомізація кольорів через CSS-змінні.
Локалізація українською, російською та англійською (тексти з JSON).
2. Технічна реалізація
Чистий Vanilla JS без сторонніх бібліотек.
Стилі ізольовані через Shadow DOM або з префіксами.
Асинхронне завантаження, розмір бандла до 40 кб gzip.
Підтримка останніх двох версій Chrome, Edge, Firefox та Safari 15+, а також мобільних браузерів iOS/Android.
Конфігурація через об’єкт window.WidgetConfig:
window.WidgetConfig = {
lang: 'ua',
colors: { '--accent': '#00AEEF', '--bg': '#ffffff' },
fields: ['name', 'phone', 'email'],
steps: [...],
webhookUrl: 'https://example.com/webhook',
enableMessengers: { whatsapp: true, telegram: true },
showCondition: { minTimeOnPage: 10, exitIntent: true, utm: ['utm_source'] },
allowedOrigins: ['https://your-site.com']
}
3. Інтеграції
Відправлення даних на REST webhook (JSON).
Можливість дублювати дані на Email (через SMTP-relay) або Google Sheets (через webhook).
Аналітика: події widget_open, quiz_step, submit_success, submit_error через dataLayer.push для GA4 або GTM.
4. Безпека та приватність
Використання TLS-запитів, обмеження CORS по домену, rate-limit на бекенді.
Не зберігаються і не логуються персональні дані.
Чекбокс згоди з політикою конфіденційності, мінімальний набір полів форми.
5. Результат для замовника
Самостійний JS-скрипт, готовий до підключення на будь-який сайт.
Документація з прикладом конфігурації window.WidgetConfig.
Приклад серверного webhook-обробника для прийому даних (Node.js або Python).
Файли локалізацій українською, російською та англійською.
Якщо формат і підхід вам підходить — можу підготувати базову структуру проєкту та приклад робочого віджета.
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Оптимізація Core Web Vitals (OpenCart) під Google PageSpeed — Мобільна та ПК версіїОпис замовлення: Шукаємо досвідченого frontend-розробника/фахівця з OpenCart для оптимізації швидкості завантаження сайту (категорії та картки товарів) під вимоги Google Core Web Vitals. Про проект: * CMS: OpenCart. * Специфіка: Сайт працює в режимі каталогу (кошика та… CMS, Javascript та Typescript ∙ 2 дні 13 годин тому ∙ 18 ставок |
Оптимізація швидкості сайту WordPress
5092 UAH
повні деталі надішлемо в особисті повідомлення Мета Максимально прискорити завантаження сайту, особливо на мобільних пристроях. KPI (обов'язково) Після завершення робіт необхідно досягти наступних показників. Mobile Performance 90+ LCP менше 2.2 сек INP менше 200 мс CLS менше… HTML та CSS верстання, Javascript та Typescript ∙ 3 дні 9 годин тому ∙ 66 ставок |
Шукаємо Odoo Developer — соло-розробника з досвідом розробки на Odoo 19 Community EditionЄ робочий, чисто спроектований проєкт на Odoo 19 Community — CRM для українського готелю, уже в production-grade інфраструктурі. Переписувати з нуля не плануємо. Шукаємо одну людину, яка підхопить проєкт, збереже працююче і поведе його далі: спершу CRM → потім HMS → бухгалтерія.… Javascript та Typescript, Веб-програмування ∙ 5 днів 10 годин тому ∙ 3 ставки |
Шукаю досвідченого Full Stack розробника для створення SaaS-сервісу для інтернет-магазинів.Ідея сервісу: Клієнт завантажує посилання на свій товарний фід (XML або CSV). Сервіс автоматично отримує товари, бере їхні фотографії та створює нові рекламні зображення за готовими шаблонами: ціна, знижка, логотип, акційні плашки тощо. Також у сервісі має бути простий редактор… Javascript та Typescript, Веб-програмування ∙ 6 днів 16 годин тому ∙ 87 ставок |
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 7 днів 13 годин тому ∙ 30 ставок |