JS-widget "Zgłoszenie + mikrokwiat"

Dzień dobry.
Dziękuję za szczegółowe zadanie techniczne — jest całkowicie zrozumiałe. Jestem gotów zrealizować lekki klientowski widget-quiz z formularzem kontaktowym i integracjami zgodnie z opisanymi wymaganiami.
1. Funkcjonalność
Pływający przycisk w prawym dolnym rogu, po kliknięciu otwiera responsywny panel (szerokość 360–420 px).
Mini-quiz w trzech krokach:
Wybór kategorii, budżetu lub terminu.
Dodatkowe opcje (w razie potrzeby).
Formularz kontaktowy: imię, telefon lub email, checkbox zgody.
Po wysłaniu — wiadomość z podziękowaniem z możliwością przejścia do WhatsApp/Telegram lub powrotu na stronę.
… Pasek postępu, walidacja pól w czasie rzeczywistym, antyspam (honeypot + timingi, opcjonalnie reCAPTCHA v3).
Wsparcie jasnego i ciemnego motywu, personalizacja kolorów przez zmienne CSS.
Lokalizacja w języku ukraińskim, rosyjskim i angielskim (teksty z JSON).
2. Realizacja techniczna
Czysty Vanilla JS bez zewnętrznych bibliotek.
Style izolowane przez Shadow DOM lub z prefiksami.
Asynchroniczne ładowanie, rozmiar bundla do 40 kB gzip.
Wsparcie dla dwóch ostatnich wersji Chrome, Edge, Firefox oraz Safari 15+, a także mobilnych przeglądarek iOS/Android.
Konfiguracja przez obiekt 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. Integracje
Wysyłanie danych na REST webhook (JSON).
Możliwość duplikowania danych na Email (przez SMTP-relay) lub Google Sheets (przez webhook).
Analityka: zdarzenia widget_open, quiz_step, submit_success, submit_error przez dataLayer.push dla GA4 lub GTM.
4. Bezpieczeństwo i prywatność
Użycie zapytań TLS, ograniczenia CORS według domeny, rate-limit na backendzie.
Nie są przechowywane ani logowane dane osobowe.
Checkbox zgody z polityką prywatności, minimalny zestaw pól formularza.
5. Wynik dla klienta
Samodzielny skrypt JS, gotowy do podłączenia na dowolnej stronie.
Dokumentacja z przykładem konfiguracji window.WidgetConfig.
Przykład serwerowego webhook-handlera do odbioru danych (Node.js lub Python).
Pliki lokalizacji w języku ukraińskim, rosyjskim i angielskim.
Jeśli format i podejście Ci odpowiada, mogę przygotować podstawową strukturę projektu oraz przykład działającego widgetu.

Pokaż oryginał

Przetłumacz