Skip to main content

​
Add the embed code

1

Get the App ID

Open the agent and go to the Install tab. Create the widget App ID if there isn’t one. Regenerating it revokes the old ID, so any page still using the old ID stops loading the widget.
2

Paste the snippet

Copy the HTML Embed snippet from the Install tab and paste it before the closing </body> tag on every page where the widget should appear.
The script loads in the background and doesn’t block your page. Use the non-async variant on the Install tab only if your setup needs the widget initialized before the page finishes loading.
3

Limit where it loads

In Widget > Data & Compliance > Page Rules, add your domains under Allowed Origins (for example *.example.com or https://www.example.com). With no origins listed, any site can load the widget. You can also limit an origin to certain pages, as an exact path (/help) or a section (/help/*).
To try the widget on a live page before installing it, copy the console script from the Install tab and paste it into your browser’s developer console. It’s for testing only.

​
Floating or inline

By default the widget is a floating launcher in a corner of the page. To place the chat inside your page instead, turn on Inline Embed in Widget > Appearance & Layout > Layout & Position and put the <voice-widget-11x> element where the panel should sit. An inline panel starts open; set Inline Width and Inline Height as CSS values such as 100%, 500px or 60vh. You can make one page inline and keep the rest floating with a page rule.

​
Pass details your site already knows

Attributes on the widget element reach the agent.
Reference a variable in the agent’s instructions as {{plan_tier}}, and add it to the agent’s input variables so it’s saved with each session. See Personalization for other places a variable can come from.

​
Send widget events to your analytics

The widget records events such as chat_widget_opened, chat_session_started, chat_message_sent, chat_nudge_shown, chat_nudge_clicked, chat_form_submitted, chat_calendar_booked and chat_link_clicked. If your site uses Tealium, add enable-tealium="true" to the widget element. Each event is then also sent to utag.link, with the event name in tealium_event.