JS-виджет “Заявка + микроквиз”

Добрый день.
Спасибо за детальное техническое задание — оно полностью понятно. Готов реализовать легкий клиентский виджет-опрос с контактной формой и интеграциями в соответствии с описанными требованиями.
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).
Файлы локализаций на украинском, русском и английском.
Если формат и подход вам подходят — могу подготовить базовую структуру проекта и пример рабочего виджета.

Показать оригинал

Перевести