Placements
Een placement vertelt de assistent waar hij moet renderen. Je definieert een of meer placements in het dashboard; elk is een CSS-selector in je bestaande markup plus een paar opties. De eerste placement waarvan de selector op de pagina matcht, wint; als geen enkele matcht, wordt er niets gerenderd (standaard veilig).
Placement-opties
Section titled “Placement-opties”| Optie | Waarden | Beschrijving |
|---|---|---|
selector | elke CSS-selector | Verplicht. Waar te mounten, bijv. .product-info, .home .hero, #booking-summary. |
position | before, after, inside, replace | Hoe te plaatsen ten opzichte van het gematchte element. Standaard after. |
label | vrije tekst | Een naam voor de placement — wordt ook naar de assistent gestuurd, zodat deze zich per placement anders kan gedragen. |
padding | CSS-lengte | Binnen-padding van de widget. |
outerPadding | CSS-lengte | Padding rondom de widget. |
margin | CSS-lengte | Buitenmarge. |
maxWidth | CSS-lengte | Maximale breedte van de widget. |
Position
Section titled “Position”after(standaard) — voegt de assistent direct na het gematchte element in.before— er direct voor.inside— als kind van het gematchte element.replace— vervangt het gematchte element door de assistent.
Het label heeft een dubbele functie
Section titled “Het label heeft een dubbele functie”Behalve dat het de placement in het dashboard identificeert, wordt het label als
context aan de assistent doorgegeven. Dat betekent dat je een placement een
betekenisvolle naam kunt geven — bijv. home-hero of product-detail — en je
promptconfiguratie de begroeting, startvragen en het gedrag voor die plek kan
afstemmen. Een homepage-hero-placement kan anders openen dan een productpagina-placement.
Formaat
Section titled “Formaat”De formaatopties (padding, outerPadding, margin, maxWidth) worden toegepast als
CSS-variabelen op de shadow-host van de widget, zodat ze de widget aanpassen zonder
enig risico dat ze de stijlen van je pagina beïnvloeden. Gebruik maxWidth om de
assistent bijvoorbeeld netjes binnen een smalle kolom te houden.
- Begin met een stabiele selector die bestaat op de pagina’s die je belangrijk vindt. Verkies een class die je zelf beheert boven een diep geneste structurele selector.
- Omdat de widget na het laden ~10 s blijft proberen (via een
MutationObserver), werken placements ook wanneer het doelelement laat wordt geïnjecteerd. - Bekijk een placement vooraf met
?bs=1voordat je live gaat — zie Test vs. Live.