Website widget
Variants and appearance
The three widget presentations, and which one suits your site.
The widget ships in three variants, set with data-relay-variant.
| Variant | Presentation | Suits |
|---|---|---|
docked | A bubble pinned to a corner, expanding into a panel | Most sites. The default. |
editorial | Sits inline in the page flow | Content-led sites where a floating bubble competes with the reading |
operator | Denser, support-desk styling | High-volume support, where the conversation is the page |
<script
src="https://your-relay-host/embed.js"
data-relay
data-relay-variant="editorial"
async
></script>Choosing
docked is right unless you have a reason. editorial is for pages where a
corner bubble reads as an interruption: documentation, long-form marketing.
operator is for a dedicated support page rather than a site-wide install.
Styling
The widget renders inside a Shadow DOM, so your stylesheet cannot restyle it and its styles cannot leak into your page. That isolation is the point: it also means you cannot override its appearance with CSS from outside. Configure it through the variant and the bot's appearance settings instead.