Configuration

Learn about general AI form configuration fields.

Embedded AI form

The embedded AI form offers plenty of customization options to help it blend seamlessly into your application.

The following options can be configured in the constructor:

Key	Type	Description
apiKey	string	The API key of your project can be found in your project/implementation page.
language	ISO 639-1 language code	The current language of your website visitor. Must be ISO 639-1.
colorScheme	auto | light | dark	Shows the color theme choices. auto will use your OS color scheme.
context	record<string, Boolean|number |string|undefined>	Extra context that can be used to pre-fill the form with data from your customer.
customerData	customer data	Data to identify the current customer.
theme	Partial<Theme>	Customise the theme of your form.
text	Partial<Text>	Customise the text you see in the form.

Theme customization

You can customize the theme of your AI form either during initialization or at any time throughout its lifecycle. The example below demonstrates how to override the default background colors for both light and dark themes.

aiForm.setTheme({
    light: {
        background: "#DCDCDC",
    }
    dark: {
      
    },
});

Theme object

Key	Default light	Default dark	Description
accentColor	#002140	#215E8A	Background color for the button and user message bubbel (overrides color configured in dashboard).
accentFontColor	#ffffff	#ffffff	Text color when background has accent color (overrides color configured in dashboard).
background	#ffffff	#1F1F1F	Background color
cardBackground	#ffffff	#181818	Background message bubble assistant and input field.
borderColor	#e5e7eb	#424242	Border color used in header and around message bubble assistant.
errorColor	#e03131	#fa5252	Color used for error related components.
fontColor	#000000	#ffffff	Text color
warningColor	#ffa500	#fab005	Color used for warning related components.

Theme priority

Theme settings applied during initialisation or by setTheme() will override the theme configured in your project's dashboard.

However, if you have custom CSS configured in your dashboard, it will always take precedence over any theme settings applied through the SDK or dashboard.

The priority order is as follows:

1. Custom CSS

2. setTheme()

3. Project theme

Text customization

Most of the static text displayed in the form can be customized. However, text that is set in the form configuration or generated by your assistant cannot be altered.

The following text options can be customized during initialization or using setText():

Text object

Key	Default	Description
errorNotResponding	{name} is currently experiencing some technical difficulties and can't provide an answer at the moment. Please try again in a few minutes.	The message displayed when no response can be generated or connection is lost. ({name} will be replaced with the name of your AI assistant)
ErrorMessageLimitExceeded	{name} is currently not available at the moment. Please try again in a few minutes.	The message displayed when no response can be generated because you have exceeded your message limit
errorProfanity	Your request couldn't be processed due to our content guidelines. Please try a different prompt.	Error message displayed when the AI models detects the user requested harmful or illegal content or other malicious message.
fallbackTitle	Currently Unavailable	The title of the fallback page when AI form cannot be loaded
fallbackDescription	The AI form isn't available at this time	The message displayed on fallback page
replyFieldTip	TIP: Press enter to send	Tip displayed under reply field
sendButtonAriaLabel	Send reply	The aria label of the send button
sourcesShowMoreButtonAriaLabel	Show all sources	The aria label of the show more source button. Once clicked will show all hidden sources
sourcesLabel	Sources	Title above the sources
warningInputToLong	Your input is a bit too long. Please shorten it and try again.	The message displayed when user input is to long
continueButtonLabel	Continue	Button shown when the assistant's last message is not fully typed. By error or by threshold timeout.