window.A2V2Widget API. For the
copy-paste install most sites need, see Embed & Install.
The loader script
Add the loader to your page. It detects its own host, loads the widget bundle, and auto-initializes when a config object is present.embed.js runs, it:
- Guards against loading twice on the same page.
- Loads the widget bundle (
a2v2-widget.js) from the same host. - Once the bundle is ready, calls
A2V2Widget.init(window.A2V2WidgetConfig)if a config object has been set.
Configure the widget
Setwindow.A2V2WidgetConfig before (or alongside) the loader. With this in place,
the widget auto-initializes — you don’t have to call init() yourself.
A2V2WidgetConfig fields
| Field | Type | Required | Description |
|---|---|---|---|
chatbotId | string | Yes | The ID of the agent to load. Find it on the agent’s Embed/Install screen. |
chatbotId is the only configuration field the widget reads today. The widget’s
appearance, welcome message, and visibility are controlled from the dashboard
(see Appearance and Visibility), not
from this config object. Additional config fields are not currently supported —
if you need to pass more options at embed time, confirm availability with
support.The window.A2V2Widget API
Once a2v2-widget.js has loaded, it exposes a global A2V2Widget object.
A2V2Widget.init(config)
Mounts the widget. Pass an object with at least chatbotId.
- Calling
init()again while the widget is already mounted is ignored (it guards against double-initialization). - The widget renders into a fixed, full-viewport container layered above your page, with pointer events limited to the bubble and chat panel.
A2V2Widget.destroy()
Unmounts the widget and removes the elements it added to the page.
destroy() when you need to remove the widget dynamically — for example, on a
route change in a single-page app, or when a visitor opts out.
Use cases
- Static / auto-init
- Single-page app
- Multiple agents
The simplest setup. Set the config, drop in the loader, done.
Style isolation
The widget renders inside a Shadow DOM and injects its own styles there, so your site’s CSS can’t reach the widget and the widget’s CSS won’t leak onto your site. It also loads its own web font. A couple of things to know:- The widget adds its font’s stylesheet to the page
<head>. If your site enforces a strict Content-Security-Policy, allow the widget’s font and script sources or the widget may fail to load or style correctly. - Some overlay elements (dropdowns, dialogs) render at the top of the page and are layered above other content using a very high stacking order.
Troubleshooting
The bubble never appears
The bubble never appears
Confirm
window.A2V2WidgetConfig (or your init() call) includes a valid
chatbotId, that the loader script isn’t blocked, and check the browser console
for an A2V2 Widget error.'chatbotId is required' in the console
'chatbotId is required' in the console
The config was set without a
chatbotId, or init() was called with an empty
value. Provide the agent’s ID.init() does nothing
init() does nothing
The widget bundle may not have loaded yet, or the widget is already mounted.
Ensure
embed.js has run and window.A2V2Widget exists before calling init(),
and call destroy() before re-initializing.Fonts or styles look wrong under a strict CSP
Fonts or styles look wrong under a strict CSP
Allow the widget’s font and script sources in your Content-Security-Policy.
A new version isn't showing up
A new version isn't showing up
Your site or CDN may be caching the page. Hard-refresh and clear any site/CDN
cache after embedding.
Related
Embed & Install
The no-code snippets for link, iframe, and chat bubble.
Install on platforms
Add the widget to WordPress, Webflow, Shopify, and more.
Appearance
Control how the widget looks and greets visitors.
API Overview
The Open API for server-to-server integration.