Website widget · vanilla JS · leads
Quiz lead form
A “Leave your phone number” form collects few leads, and for those that do arrive, the manager questions the customer all over again. The quiz asks a few simple questions, shows the person an estimate right away and only then asks for contacts. The manager gets a ready card: what’s needed, for how much, how urgent and which ad the customer came from.
Scenario: Zerno roastery — fictional — selects coffee and equipment for new and existing coffee shops and for offices.
Open the demo
The quiz sits on a mock-up of the Zerno website — as a block on the page or as a window opened by a button. On a phone the window opens full screen.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Take the quiz
Choose “Opening a coffee shop”, the number of cups and the taste — each step has its own options.
Leave and come back
Reload the page in the middle of the quiz — it offers to continue from the same place.
Leave your contacts
On the right, a Telegram message to the manager appears with the lead score, and next to it the JSON for the CRM.
Look at the funnel
The “Analytics” tab: a month of synthetic visits, your own runs and the step after which people leave most often.
No paid neural networks
The quiz works without a server and without a neural network: the estimate uses Zerno’s price list, and lead scoring uses rules, as in the lead qualification demo bot. The lead, draft and visits are stored in your browser. In a production project the lead goes to a server and from there to amoCRM or Bitrix24 and as a message to the manager, while the quiz steps become analytics goals.
The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.
What a production project adds
- The lead goes to amoCRM or Bitrix24 as a deal with the source, estimate and score
- A message to the manager in Telegram or Max with “Take it” and “Call back later” buttons
- Analytics goals for every step and A/B tests of questions
- A language model parses the customer’s free-form comment and adds what matters to the manager to the card
Stack
- All demos by stack:
- Vanilla JS
- JavaScript without frameworks
- Web Components
- Shadow DOM
- <dialog>
- localStorage
- JSDoc
- Vite
Based on
Books and university courses whose ideas are at work in this demo.
Book · Alexey Vasiliev
JavaScript Programming in Examples and Exercises
A quiz without frameworks: branching questions, autosave to localStorage, embedded as one file.
Book · Bruce Lee
Bruce Lee: Artist of Life
The quiz is one 12 KB file with no dependencies instead of a heavy form builder.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- People see the estimate first and only then leave their contacts — they do it more willingly than in a “leave your phone” form.
- The manager gets a ready card: what’s needed, for how much, how urgently and from which ad.
- The step-by-step funnel shows at which question people leave — that question can be rewritten.
For developers
- Plain JS: Custom Elements, Shadow DOM and <dialog>, no dependencies. The quiz.js file is about 12 KB gzipped.
- Questions and branching are data, not code. The draft and first-visit UTM are stored in localStorage.
- Lead scoring uses the same rules as the lead qualification bot.
Tips
Tip 01
Save the first-visit UTM, not the last one — otherwise direct visits will take all the credit.
Tip 02
Draft autosave costs next to nothing and brings back people who got distracted.
Want the same for your business?
Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.
Other demos in this section
All demos- live
Web app · speech recognition · neural network in the browser
Voice request
A customer dictates a request by voice, and the manager gets a ready card: name, company, phone, budget, timeline, task and a score — hot lead or not. Speech is recognized by Whisper right in the browser.
- React
- TypeScript
- In-browser neural network
- live
Web app · call in the browser · speech recognition and synthesis
Voice delivery operator
A robot takes phone orders instead of the host: it listens, asks again, checks the address against delivery zones, totals the order and reads it back before confirming. The call runs right in the browser — a “Call” button, no phone number.
- React
- TypeScript
- In-browser neural network
- live
Web app · speech recognition · sales team quality control
Call speech analytics
A sales call becomes a transcript by role, a score against the script and a completed deal card: customer, contacts, interest, the quoted price, the next step and a task for the manager. Speech is recognized by Whisper right in the browser.
- React
- TypeScript
- In-browser neural network
- live
Web app · documents · DOCX and PDF
Proposal and contract generator
A manager fills in a deal form — buyer, products, discount, VAT — and the commercial proposal, supply contract and invoice are assembled on an A4 page before their eyes. The output is Word, PDF or JSON.
- React
- TypeScript
- live
Web app · B2B · proposal in PDF
Price configurator
A manager builds an order for all the windows in an apartment: type, size, sashes on a diagram, profile, glazing unit and color. Production rules are checked instantly, discounts and installments are calculated automatically, and a numbered proposal goes out as a PDF.
- React
- TypeScript
- live
Web app · finance · comparison
Mortgage calculator
Five bank programs on one screen: which suit the client and why the others don’t. A developer-subsidized rate, differentiated payments, early repayment, debt-to-income ratio and the tax deduction.
- React
- TypeScript
- live
Web app · estimate · PDF
Renovation estimate calculator
Room dimensions turn into floor, wall and ceiling areas, and those into work by stage. Labor and materials separately, the timeline based on crew output, a payment schedule and estimate versions for negotiating with the client.
- React
- TypeScript
- live
Web app · storefront · checkout · orders
React SPA catalog
A whole store in the browser: search with suggestions and keyboard layout correction, facets with live counters, links to any filter, favorites, a cart with a promo code and checkout with a delivery slot. Orders are visible in “My orders” with statuses and can be repeated or cancelled.
- React
- TypeScript
- live
Machine learning in Python · runs in the browser
Marketplace review analytics
Reviews from Wildberries, Ozon and Yandex Market via the seller API: scikit-learn models determine sentiment and what buyers write about, an alert fires in the first week of a complaint spike, new topics are discovered automatically, and replies go back through the marketplace API. The models train right in the browser.
- Python
- React
- TypeScript
- live
Website widget · vanilla JS · one line
AI consultant widget
A consultant for any website, installed with a single line: it answers from a knowledge base with a link to the source, collects requests and calls an operator. Written in plain JavaScript without frameworks — the whole widget is 21 KB gzipped.
- Vanilla JS
- live
Python backend · webhooks → amoCRM and Bitrix24
Lead integration hub
Leads from the website, ads, calls, email and bots arrive at webhooks, are normalized, checked for duplicates, routed to managers and delivered to amoCRM and Bitrix24 — with retries when the CRM is unavailable.
- Python
- React
- TypeScript