JUST Docs
WidgetEntry points

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 with data-workflow-first-message. See Expert Mode.
  • Works on <button> and <a href>: the widget calls preventDefault(), 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.

On this page