JS-виджет “Заявка + микроквиз”
1) Сценарий пользователя
Клик по плавающей кнопке → открывается панель.
Шаг 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, рекомендую!
-
416 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
Ищу опытного Full Stack разработчика для создания SaaS-сервиса для интернет-магазинов.Идея сервиса: Клиент загружает ссылку на свой товарный фид (XML или CSV). Сервис автоматически получает товары, берет их фотографии и создает новые рекламные изображения по готовым шаблонам: цена, скидка, логотип, акционные плашки и т.д. Также в сервисе должен быть простой… Javascript и Typescript, Веб-программирование ∙ 2 часа 3 минуты назад ∙ 39 ставок |
Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдераОписание объекта:Проект представляет собой дизайнерский стол, выполненный в форме реалистичного, глубокого водоворота (центральная воронка, которая плавно переходит из широкой горизонтальной столешницы в тонкую изящную ножку). Суть задачи:Требуется WebGL / Creative Coding… Javascript и Typescript, Веб-программирование ∙ 22 часа 37 минут назад ∙ 25 ставок |
Поддержка и развитие сайта клининговой компании
906 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 3 дня назад ∙ 60 ставок |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 4 дня 1 час назад ∙ 27 ставок |
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 5 дней 16 часов назад ∙ 35 ставок |