JS widget "Application + microquiz"

Good day.
Thank you for the detailed technical assignment — it is completely clear. I am ready to implement a lightweight client widget quiz with a contact form and integrations according to the described requirements.
1. Functionality
A floating button in the bottom right corner, which opens a responsive panel (width 360–420 px) on click.
A mini-quiz in three steps:
Selection of category, budget, or deadline.
Additional options (if needed).
Contact form: name, phone or email, consent checkbox.
After submission — a thank you message with the option to go to WhatsApp/Telegram or return to the website.
… Progress bar, real-time field validation, anti-spam (honeypot + timings, optionally reCAPTCHA v3).
Support for light and dark themes, color customization via CSS variables.
Localization in Ukrainian, Russian, and English (texts from JSON).
2. Technical Implementation
Clean Vanilla JS without third-party libraries.
Styles isolated through Shadow DOM or with prefixes.
Asynchronous loading, bundle size up to 40 kB gzip.
Support for the last two versions of Chrome, Edge, Firefox, and Safari 15+, as well as mobile browsers iOS/Android.
Configuration through the object 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. Integrations
Sending data to REST webhook (JSON).
Ability to duplicate data to Email (via SMTP-relay) or Google Sheets (via webhook).
Analytics: events widget_open, quiz_step, submit_success, submit_error via dataLayer.push for GA4 or GTM.
4. Security and Privacy
Use of TLS requests, CORS restrictions by domain, rate-limit on the backend.
Personal data is not stored or logged.
Consent checkbox with privacy policy, minimal set of form fields.
5. Result for the client
A standalone JS script, ready to be connected to any website.
Documentation with an example of the window.WidgetConfig configuration.
Example server webhook handler for receiving data (Node.js or Python).
Localization files in Ukrainian, Russian, and English.
If the format and approach suit you — I can prepare a basic project structure and an example of a working widget.

Show original

Translate