Placements
A placement tells the assistant where to render. You define one or more placements in the dashboard; each is a CSS selector into your existing markup plus a few options. The first placement whose selector matches the page wins; if none match, nothing renders (safe by default).
Placement options
Section titled “Placement options”| Option | Values | Description |
|---|---|---|
selector | any CSS selector | Required. Where to mount, e.g. .product-info, .home .hero, #booking-summary. |
position | before, after, inside, replace | How to place relative to the matched element. Default after. |
label | free text | A name for the placement — also sent to the assistant, so it can behave differently per placement. |
padding | CSS length | Inner padding of the widget. |
outerPadding | CSS length | Padding around the widget. |
margin | CSS length | Outer margin. |
maxWidth | CSS length | Maximum width of the widget. |
Position
Section titled “Position”after(default) — inserts the assistant right after the matched element.before— right before it.inside— as a child of the matched element.replace— swaps the matched element out for the assistant.
The label does double duty
Section titled “The label does double duty”Besides identifying the placement in the dashboard, the label is passed to the
assistant as context. That means you can give a placement a meaningful name — e.g.
home-hero or product-detail — and your prompt configuration can tailor the
greeting, starter questions, and behavior for that spot. A homepage-hero placement
can open differently from a product-page placement.
Sizing
Section titled “Sizing”The sizing options (padding, outerPadding, margin, maxWidth) are applied as
CSS variables on the widget’s shadow host, so they adjust the widget without any
risk of affecting your page’s styles. Use maxWidth to keep the assistant tidy
inside a narrow column, for example.
- Start with a stable selector that exists on the pages you care about. Prefer a class you control over a deeply nested structural selector.
- Because the widget retries for ~10 s after load (via a
MutationObserver), placements work even when the target element is injected late. - Preview a placement with
?bs=1before going live — see Test vs. Live.