Every option you can pass to the AI Chat Widget — token, branding, identity, chat behavior, context, AI action request data, and custom mode components.
Use this file to discover all available pages before exploring further.
This page lists every option you can pass to the widget. For how to combine these options into a brand, launch flow, or visitor experience, start with Configuration.
Want to try options live and copy a working snippet? Open the Playground.
Defaults shown as undefined mean the option has no default — the related feature stays off until you set the option. Defaults shown as language-specific (e.g. for textContent) come from the active language translation, not a single hard-coded string.
Custom stylesheet that targets widget parts via data-component selectors. Use when the theme options are not enough.Inspect the DOM to find selectors like data-component="chat/input_box/root". If a part you need to style does not yet have a selector, contact us and we will add one.
Embed the widget inside its parent element instead of floating over the page.When true, the widget content fills its parent container, the widget stays open, and the launcher button is hidden. Useful when you want a chat panel built into a page section.
Show a built-in form on the welcome screen that asks for the visitor’s name and email. The submitted values create a non-verified .Use prefillUserData and extraDataCollectionFields to tailor the form. For verified identity, see Authentication.
Verified or non-verified contact data passed from your app. If omitted, an anonymous contact is used.See Authentication for the full setup, including how to mint a verified token from your backend.
Same idea as initialMessages with per-message persistence control. When set, this overrides initialMessages.When persistent is true, the message stays pinned at the top of the chat; otherwise it disappears after the first reply.
Show example
{ advancedInitialMessages: [ { message: 'Hello, how can I help you?', persistent: true }, { message: 'Please select an option from the list below:', persistent: false }, ],}
Show only the welcome and chat screens. The most recent open session is selected; if none exists, an empty conversation is opened and a session is created when the visitor sends a message. The “back to sessions” button is hidden.
By default the send button is disabled while the AI is generating a reply. Set to false to let the visitor send another message before the AI finishes — the typing indicator stays visible; only the send button’s disabled state is dropped.
These options attach data to every HTTP request the widget makes when the AI calls one of your APIs. For secure credentials, configure them in General settings instead.
Whether sendMessage is currently processing. Use to disable the submit button or show a loading indicator after submission.
Show example
function Onboarding(props: ModeComponentProps) { const [monthlyVolume, setMonthlyVolume] = props.react.useState(0); const [targetMarket, setTargetMarket] = props.react.useState(''); const handleSubmit = async () => { // Submit to your system here, then end the mode with a summary // message and an exit prompt for the AI. props.sendMessage({ content: `My expected volume is ${monthlyVolume} per month.\nMy target market is ${targetMarket}`, exitModePrompt: ` Tell the user something like this: "Great! I've now submitted your request. We are already checking whether you are eligible to join our service. We will notify you as soon as we review your request. You can always check the progress by looking at the notifications on the top right of your dashboard." `, }); }; return props.react.createElement( 'div', null, props.react.createElement('input', { value: monthlyVolume, onChange: (e) => setMonthlyVolume(Number(e.target.value)), }), props.react.createElement('input', { value: targetMarket, onChange: (e) => setTargetMarket(e.target.value), }), props.react.createElement( 'button', { onClick: handleSubmit, disabled: !monthlyVolume || !targetMarket || props.isSendingMessage, }, 'Submit', ), );}const options = { token: '<WIDGET_TOKEN>', modesComponents: [ { key: 'onboarding', component: Onboarding, }, ],};
Accessible name for the launcher button. Applied as both aria-label (for assistive technology) and title (native hover tooltip).Required because the trigger is icon-only — satisfies WCAG 2.4.4 (Link Purpose) and 4.1.2 (Name, Role, Value).
