Trigger button
Any element carrying data-just-ai-agent-trigger opens the widget on click, with no script to write.
The widget opens on click on any element carrying data-just-ai-agent-trigger.
The listener ships inside the widget, so there is no <script> to write. An optional
data-first-message attribute shows a welcome bubble from the agent when it opens.
Under the hood, the attribute dispatches a just:ai-agent:open CustomEvent on
window. The native attribute does it for you; you can also dispatch it yourself
(see the event payload).
The simplest way: the native attribute
<button type="button" data-just-ai-agent-trigger>Chat with our expert</button>
<!-- + a welcome bubble from the agent -->
<button
type="button"
data-just-ai-agent-trigger
data-first-message="Hi! What are you looking for today?"
>
Chat with our expert
</button>data-first-message: an assistant bubble shown on open (typewriter effect), only if the chat is empty. Display-only: it is never sent to the backend.data-workflow: launches the shop's live Expert Mode guided flow instead of a free conversation. The shopper's launch bubble shows the button's visible text, overridable withdata-workflow-first-message. See Expert Mode.- Works on
<button>and<a href>: the widget callspreventDefault(), so no stray navigation, and a link even doubles as a no-JS fallback (it only navigates when the widget bundle is not loaded, or while the widget has nothing to open on the page). - The listener is delegated and runs in the capture phase: it works on elements
added to the page dynamically, and survives a theme handler calling
stopPropagation(). - Analytics source:
trigger_block.
The widget bundle must be loaded on the page
Without it, the click does nothing, silently and with no error. Quick console
test: window.dispatchEvent(new CustomEvent('just:ai-agent:open')).
Dispatch the event yourself
<button
type="button"
onclick="window.dispatchEvent(new CustomEvent('just:ai-agent:open'))"
>
Open
</button>On an <a href> used as a trigger with a manual dispatch, call
event.preventDefault() yourself. The native attribute already does it for you.
The event payload
For a programmatic trigger (a redirected search, a banner, anything that is not a plain click):
window.dispatchEvent(
new CustomEvent('just:ai-agent:open', {
detail: { message: 'I am looking for a gift', source: 'header_search' },
}),
);message is sent as the shopper's first message as soon as the session is ready.
An event dispatched before the widget has loaded is buffered and replayed once it
is ready: one slot, the most recent early event wins.
The full detail contract, covering recognized source values, shortcut,
firstAssistantMessage, workflow and the ordering rules, lives in the
events reference.