Example pages are complete web pages that show the webchat in use. Each card below is one page. Choose View and copy to read and copy its code, or Download to save the file. Then put it on a test page of your website.
-
01-minimal.html
The dashboard's paste-in snippet on its own.
-
02-programmatic.html
init() with the main options, waiting for cookie consent, and the JavaScript API on buttons.
-
03-branding.html
The theme object, dark mode, fonts, your own wording, the corner and a launcher animation, switched live.
-
04-context-and-provenance.html
Partner details for the agent, setContext() from your own form, and campaign tracking.
-
05-embedded-and-events.html
The chat inside your own page layout, your own microphone and question buttons, and every event.
-
06-handoff.html
Carrying the chat on by text, WhatsApp, email or a phone call, from your own form and from the built-in Switch channel button.
To see the chat alongside a quote form, sharing one application, see the quote form's example 07.
Trying the example pages#
- Copy the page you want.
- Replace the placeholders.
YOUR_AGENT_IDis your agent's id. In the dashboard, go to Agents and open the agent. The id is in the address bar, and in the snippet under Channels, Web, Configure. A comment above each placeholder says where to find it. - Switch the Web channel on (same page, Enable). The example pages count as a website outside Subcontext, so without this the chat stays hidden.
- Put it on a test page of your website. The webchat has no allowed-websites list, so any address works. Opening the file from your computer won't work.
Tips:
- Pages on the same website address share the saved conversation. Example 04 starts a new one each time.
Elsewhere, type
/newin the chat to start over. - Talking in the browser needs a microphone. It works on
localhostwithouthttps://. - Example 06 sends real texts and emails. Use your own number and address. The text and WhatsApp choices need an SMS or WhatsApp channel with a number on the agent.