Install the widget
The embed snippet, the two shapes it comes in, and what each attribute does.
Your widget is one line of HTML. You get it from Settings, in the Widget room, under Embed snippet. The Settings landing page shows it too.
There are two shapes, and both can be live on the same site at once. The picker in the dashboard only chooses which one you are copying.
The floating orb
A launcher orb in the corner of the page that opens the chat when a visitor clicks it. This is the usual choice.
<script
src="https://usesondo.com/w/v1/loader.js"
data-sensor-key="wgt_pk_your_key"
data-theme="auto"
async
></script>Paste it just before the closing </body> tag on any page you want the chat on. Saved changes to
your assistant apply within a minute, and you never have to re-embed to pick them up.
The attributes
| Attribute | What it does |
|---|---|
data-sensor-key | Your widget's public key, which always starts with wgt_pk_. Required. It is not a secret: it ships in the HTML of every page you put it on. |
data-theme | auto, light or dark. auto follows the visitor's own system setting. Leave it out and the widget is light. |
data-sensor-section | Optional, and it goes on your own elements rather than the script tag. See below. |
The attribute names start with sensor because that was the product's name when the embed contract
was written. They are frozen: renaming them would break every site that has already pasted the tag.
Telling the assistant what the visitor is reading
Put data-sensor-section="Pricing" on a section of your page, and when a visitor opens the chat
while that section is on screen, the assistant is told which part of the page they are looking at.
Pages with no annotated sections simply send nothing. Around two thousand characters of the
section's text are forwarded.
The docked panel
A panel that fills a container you place on the page, rather than floating over it. Useful for a support page or a help center, where the chat is the content rather than an offer.
<iframe
src="https://usesondo.com/w/v1/frame?key=wgt_pk_your_key&docked=1&theme=light"
style="width:100%;height:100%;border:0"
title="Chat assistant"
></iframe>The frame fills its container, so give the parent an explicit height, for example 600px, or it
collapses to nothing. Add theme=dark to the URL for the dark palette.
If your page has its own light and dark toggle, you can tell the frame about it at any time by posting a message to it:
frame.contentWindow.postMessage({ type: "sensor:theme", theme: "dark" }, "https://usesondo.com");Things worth knowing
- One script per page. A second copy of the loader on the same page does nothing. If a page has more than one tag, the first one wins.
- A tag with no key does nothing at all. The loader looks for a script carrying
data-sensor-key, and if there is not one, or the key is empty, it stops silently rather than injecting anything. - The launcher does not appear until your workspace can answer. A workspace with no model key configured serves no widget, which is why the Getting started checklist puts that step first.
- Your site decides who may embed it. Sondo seeds the allowed sites from the website address you gave when you created the workspace. If your widget does not load on a new domain, that list in Settings is the first thing to check.