Embedded Chat

Whether to show the chat.

Whether to autofocus the chat input on load.

Configuration for the base settings.

Configuration for the chat.

The display name of your organization that will be shown in various UI elements. For example, this may appear in chat messages or headers.

The primary brand color used throughout the widget UI. This color will be used to generate a cohesive color scheme. Should be provided as a valid CSS color value (hex, rgb, etc).

Settings to control the color mode (light/dark) behavior. Can be used to sync with your application's theme or set a forced color mode.

Theme customization settings for the widget. Allows customizing colors, typography, component styles, and more.

Custom icon overrides for the default icon set. Allows replacing any of the built-in icons with your own components.

Properties to identify and provide context about the current user. Used for personalization and analytics tracking.

Authentication token for the current user. Used for authenticated API requests if required.

Additional properties to be sent with analytics events. These properties will be merged with the event properties.

Handler for analytics events from the widget.

Handler for feedback events from the widget.

Whether to bypass the captcha challenge. Only enable this flag if using a server side API type api key, otherwise the api requests will fail without the challenge solution.

Function to transform source data before display.

Reference to the shadow DOM host element if using custom Shadow DOM. Required when embedding the widget within a Shadow DOM.

Reference to the root element where the widget is mounted. Used for positioning and event handling.

Custom tags for widget identification. Used in analytics to segment and filter widget instances. Array of string identifiers.

Instance of the Prism syntax highlighting library. Required for code block syntax highlighting functionality.

Query parameters to automatically append to URLs in the widget. Useful for tracking or maintaining context in navigation. Object mapping parameter names to values.

Base-level filters to apply to all search and chat operations. These are typically organization or user-level filters.

Configuration for syncing the widget's color mode with an external element.

This allows the widget to automatically match its color mode (light/dark) with your application's theme. The widget will observe changes to specified attributes on a target element and update its appearance accordingly.

List of all available colorMode names

Forced colorMode name for the current page

Whether to switch between dark and light colorModes based on prefers-color-scheme

Disable all CSS transitions when switching colorModes

Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons

Key used to store colorMode setting in localStorage

Default colorMode name (for v0.0.12 and lower the default was light). If enableSystem is false, the default colorMode is light

HTML attribute modified based on the active colorMode. Accepts class and data-* (meaning any data attribute, data-mode, data-color, etc.)

Mapping of colorMode name to HTML attribute value. Object where key is the colorMode name and value is the attribute value

Nonce string to pass to the inline script for CSP headers

The user ID.

The user email.

The user name.

The user cohorts.

Headers for requests

API key for requests

Agent URL for chatstream API.

Context to be passed to the chatstream API.

The placeholder text to display in the chat input field when empty. Use this to provide guidance on what kind of questions users can ask.

A welcome message shown at the start of a new chat session. Supports markdown formatting for rich text styling. Use this to introduce the AI assistant's capabilities and set expectations.

The name of the product/service/topic that the chat assistant specializes in. This helps contextualize the chat experience for users. If not provided, defaults to the organization name from base settings.

The display name for the AI assistant in the chat interface. Choose a name that reflects the assistant's role and your brand.

URL to the AI assistant's avatar image. Should be a square image, recommended size 40x40px. Supports common image formats (PNG, JPG, SVG).

You can pass a string or an object to configure for different color modes.

URL to the user's avatar image in the chat interface. Should be a square image, recommended size 40x40px. Falls back to a default user icon if not provided.

Controls whether links in chat messages open in new browser tabs. Enable this to help users maintain their chat context when following links.

Custom heading text for the example questions section. Use this to better describe your suggested queries.

A list of pre-written questions users can click to quickly start a conversation. These should reflect common use cases and help users understand the AI assistant's capabilities.

Whether to visually emphasize the first example question. Use this to draw attention to the most important or common query.

Enables the ability to share chat conversations via URL. Useful for allowing users to share helpful conversations with teammates.

The base URL path used when generating shareable chat links. Should match your application's routing structure.

Controls the visibility of the copy chat button. Allows users to copy the entire chat transcript to their clipboard.

Unique identifier for loading a specific conversation. Use this to restore a previous conversation state.

When enabled, prevents users from sending new messages. Useful for displaying archived or shared chat sessions.

Whether to make conversations public by default.

Configuration for the chat's disclaimer message. Use this to display important notices about AI limitations or data usage.

Callback function triggered whenever the user modifies their input message.

React ref for accessing the chat component's methods. Enables programmatic control of chat functions from parent components.

Array of actions available in the "Get Help" menu. Use this to provide alternative support options like contact forms or documentation links.

Array of actions available rendered after each message.

Custom heading text for the workflows section. Use this to describe available automated processes or guided flows.

Custom labels for the chat interface's action buttons. Use this for internationalization or to better match your application's terminology.

Filters to apply to the chat results.

Components to be rendered in the chat interface.

Programmatically sends a message in the chat.

Programmatically updates the text in the chat input field.

Resets the chat to its initial state. Removes all messages and resets any active workflows.

Displays a form overlay in the chat interface.

Programmatically sets focus to the chat input field. Useful after programmatic updates or when showing the chat interface.

Controls whether the disclaimer message is shown. Enable this when you need to display important notices or legal disclaimers.

The main text content of the disclaimer message. Should clearly communicate important information about AI usage or limitations.

Additional information shown when hovering over the disclaimer. Use this to provide more detailed explanations or context.

Text shown on the button that clears the chat history.

Text shown on the button that generates a shareable chat link.

Text shown on the button that opens the help options menu.

Text shown on the button that stops the AI from generating a response.

Text shown on the button that copies the chat transcript.