Install a widget
Create a publishable key, paste the loader script, and set the attributes it accepts.
A widget needs a publishable key that identifies the agent and a script tag on your page. Both come from the agent's Widget section. For what the widgets do once installed, see Website widgets.
Create a publishable key
In the agent's Widget section, under Publishable keys, choose Create key.
- Name the key so you can recognise it later (default:
Website widget). - Pick the environment: Live mints a
pk_live_key, Test mints apk_test_key. Both authorise the same agent. - List the allowed sites, one origin per line (e.g.
https://www.example.comandhttp://localhost:3000). Each entry is reduced to its scheme and host: paths and query strings are ignored, and each subdomain is a separate entry. - Create key, then copy it from the confirmation. It is shown once.
Allowed sites cannot be edited after creation. To change the list, revoke the key and create a new one, then update the script tag on your site. Revoking takes effect immediately, and any widget still using that key stops working.
A key with no allowed sites cannot connect from anywhere.
Install the chat widget
Paste this before the closing </body> tag of every page you want the bubble
on, with your own key in data-key:
<script src="https://app.meddle.sh/embed/widget.js" data-key="pk_live_…" async></script>The loader adds a round launcher button in the bottom right corner. Clicking it opens the chat panel in an iframe. Closing the panel hides it but keeps the conversation, so reopening resumes where the visitor left off.
Install the voice widget
The voice widget uses the same script with data-widget="voice":
<script src="https://app.meddle.sh/embed/widget.js" data-key="pk_live_…" data-widget="voice" async></script>It mounts the call pill in the bottom right corner on a transparent overlay. The iframe requests microphone access, so the browser prompts the visitor on their first call. If the agent's voice surface is off, or the key is not allowed on that site, the overlay renders nothing.
Install both widgets
To run both, add both script tags. They can share the same key.
<script src="https://app.meddle.sh/embed/widget.js" data-key="pk_live_…" async></script>
<script src="https://app.meddle.sh/embed/widget.js" data-key="pk_live_…" data-widget="voice" async></script>Script attributes
| Attribute | Required | Default | Purpose |
|---|---|---|---|
data-key | Yes | none | The agent's publishable key. Without it the loader does nothing. |
data-widget | No | chat | chat for the launcher bubble and panel, voice for the call pill. Any other value is treated as chat. |
data-base | No | the origin the script was loaded from | Overrides the API origin the widget talks to. |
data-accent | No | #171717 | Hex colour of the chat launcher bubble. It does not affect the voice pill. |
Use a plain hex value: modern colour syntax is dropped by older browsers, which would leave the launcher invisible.