A custom vanilla stylesheet to override the default styles.You will need to use the selectors to target the elements you want to override. Inspect the DOM and look for things that look like data-component="chat/input_box/root".If you want to customize a component and it doesn’t have a selector, let us know and we’ll add it.
Custom header buttons to expand-shrink the size of the widget, close the widget, resolve the session, etc.
Using this option will remove the default close-widget button on small screens.
Show HeaderButtonU
Copy
type IconNameU = | 'Maximize' | 'Maximize2' | 'Minimize' | 'Minimize2' | 'Expand' | 'Shrink' | 'X' | 'SquareX' | 'CircleX' | 'Check' | 'CheckCheck' | 'CircleCheck' | 'CircleCheckBig' | 'SquareCheck' | 'SquareCheckBig';type HeaderButtonBase = { icon?: IconNameU; hideOnSmallScreen?: boolean; hideOnLargeScreen?: boolean;};type HeaderButtonU = | (HeaderButtonBase & { functionality: 'expand-shrink'; /** if `HeaderButtonBase.icon` is passed, it will override this option */ expandIcon?: IconNameU; /** if `HeaderButtonBase.icon` is passed, it will override this option */ shrinkIcon?: IconNameU; }) | (HeaderButtonBase & { functionality: 'close-widget'; /** * A side effect to be executed when the button is clicked. * This will override the default behavior of closing the widget. * This is useful If opening and closing the widget is externally controlled. */ handleClick?: () => void; }) | (HeaderButtonBase & { functionality: 'resolve-session'; /** * The side effect after the session is resolved. * @default 'stay-in-chat' */ onResolved?: | 'stay-in-chat' | 'reset-chat' | 'close-widget' | 'reset-chat-and-close-widget'; /** * Optional confirmation dialog before the session is resolved. */ confirmation?: { type: 'modal'; title?: string; description?: string; confirmButtonText?: string; cancelButtonText?: string; }; /** * The button's behavior before the session is created (before the user sends their first message). * @default 'disabled' */ behaviorBeforeSessionCreation?: 'disabled' | 'close-widget'; /** * The button's behavior after the session is resolved and the user is still in the same chat session. * @default 'disabled' */ behaviorIfSessionIsResolved?: | 'disabled' | 'reset-chat' | 'close-widget' | 'reset-chat-and-close-widget'; });
If turned on, the widget will have a login-like screen to collect user’s name and email. A
non-verified contact will be created based on the provided information.
Verified or non-verified contact data. If no data is provided, an anonymous contact will be created.For more details and recipes, check the Authentication page.
An optional ID to scope the sessions of a single user based on workspace. For example, if a user uses one email for multiple accounts (organizations) in your application.
The name of the user. Will be marked as non_verified_name so that it can be used with caution. If there is a verified user with the same email, the non_verified_name will not override the verified user’s name.
An optional ID to scope the sessions of a single user based on workspace. For example, if a user uses one email for multiple accounts (organizations) in your application.
Initial messages that the contact sees in a new chat session. Similar to the initialMessages option, but with more control over the messages.If persistent is true, the message will be saved in the chat session and will stay at the top of the chat session.Using this option will override the initialMessages option.
Show example
Copy
{ advancedInitialMessages: [ { message: 'Hello, how can I help you?', persistent: true, }, { message: 'Please select an option from the list below:', persistent: false, }, ]}
Suggested initial questions that the contact sees in a new chat session.
If a user clicks on one of the suggested questions, the widget will send it as the user’s first message.
Whether the widget is open or not.Can be used to have the widget open by default (useful when embedded in a webview for a mobile app). Also useful to open and close the widget programmatically.
If true, only the welcome and chat screens will be visible. The most recent open session will be selected. If none found, a new empty conversation will be opened, and a session will be created if the user sends a message. The back to sessions screen button in the header will be hidden.
Dynamic custom data to be sent with each contact message. This custom data is intended for human use only; the AI will not see it and it will not affect the AI’s response.
Custom data to be added to the session upon creation. This custom data is intended for human use only; the AI will not see it and it will not affect the AI’s response.
Whether the sendMessage function is currently processing. Useful for disabling the submit button once it is submitted, or to show a loading indicator.
Show example
Copy
function Onboarding(props: ModeComponentProps) { const [monthlyVolume, setMonthlyVolume] = props.react.useState(0); const [targetMarket, setTargetMarket] = props.react.useState(''); const handleSubmit = async () => { // Here you can make a request to your system and do anything with the data collected inside the mode's component. // End the mode by sending a summary message and an exit mode prompt. 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: '<TOKEN>', modesComponents: [ { key: 'onboarding', component: Onboarding, }, ],}
