# Configuration

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:

<table><thead><tr><th width="156">Key</th><th width="211">Type</th><th>Description</th></tr></thead><tbody><tr><td>apiKey</td><td><code>string</code></td><td>The API key of your project can be found in your <mark style="color:purple;">project/implementation</mark> page. </td></tr><tr><td>language</td><td><a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 language code</a></td><td>The current language of your website visitor. Must be <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1</a>.</td></tr><tr><td>colorScheme</td><td><code>auto</code> | <code>light</code> | <code>dark</code></td><td>Shows the color theme choices. <code>auto</code> will use your OS color scheme.</td></tr><tr><td>context</td><td><code>record&#x3C;string, Boolean|number |string|undefined></code></td><td>Extra context that can be used to pre-fill the form with data from your customer.</td></tr><tr><td>customerData</td><td><a href="/pages/mWLnkjQXMREDYDh6K2jy#customer-data">customer data</a></td><td>Data to identify the current customer.</td></tr><tr><td>theme</td><td><code>Partial&#x3C;Theme></code></td><td>Customise the theme of your form.</td></tr><tr><td>text</td><td><code>Partial&#x3C;Text></code></td><td>Customise the text you see in the form.</td></tr></tbody></table>

## Theme customization <a href="#css-customization" id="css-customization"></a>

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.

<pre class="language-typescript"><code class="lang-typescript">aiForm.setTheme({
    light: {
        background: "#DCDCDC",
    }
    dark: {
      <a data-footnote-ref href="#user-content-fn-1">  background: "#1F1F1F",</a>
    },
});
</code></pre>

<figure><img src="/files/6xlui492vlWJ3I6XbL8J" alt=""><figcaption></figcaption></figure>

### Theme object

<table><thead><tr><th width="172">Key</th><th width="128">Default light</th><th width="130">Default dark</th><th>Description</th></tr></thead><tbody><tr><td>accentColor</td><td>#002140</td><td>#215E8A</td><td>Background color for the button and user message bubbel (overrides color configured in dashboard).</td></tr><tr><td>accentFontColor</td><td>#ffffff</td><td>#ffffff</td><td>Text color when background has accent color (overrides color configured in dashboard).</td></tr><tr><td>background</td><td>#ffffff</td><td>#1F1F1F</td><td>Background color</td></tr><tr><td>cardBackground</td><td>#ffffff</td><td>#181818</td><td>Background message bubble assistant and input field.</td></tr><tr><td>borderColor</td><td>#e5e7eb</td><td>#424242</td><td>Border color used in header and around message bubble assistant.</td></tr><tr><td>errorColor</td><td>#e03131</td><td>#fa5252</td><td>Color used for error related components.</td></tr><tr><td>fontColor</td><td>#000000</td><td>#ffffff</td><td>Text color</td></tr><tr><td>warningColor</td><td>#ffa500</td><td>#fab005</td><td>Color used for warning related components.</td></tr><tr><td>excelIconColor</td><td>#40c057</td><td>#40c057</td><td>Color used in the Excel file icon</td></tr><tr><td>pdfIconColor</td><td>#e03131</td><td>#e03131</td><td>Color used in the PDF file icon</td></tr><tr><td>presentationIconColor</td><td>#ffa500</td><td>#ffa500</td><td>Color used in the Presentation file icon</td></tr><tr><td>wordIconColor</td><td>#228BE6</td><td>#228BE6</td><td>Color used in the Word file icon</td></tr><tr><td>textIconColor</td><td>#002140</td><td>#002140</td><td>Color used in the Text file icon</td></tr></tbody></table>

### Theme priority

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

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

<table><thead><tr><th width="256.7442626953125">Key</th><th width="250">Default</th><th>Description</th></tr></thead><tbody><tr><td>errorNotResponding</td><td>{name} is currently experiencing some technical difficulties and can't provide an answer at the moment. Please try again in a few minutes.</td><td>The message displayed when  no response can be generated or connection is lost. ({name} will be replaced with the name of your AI assistant)</td></tr><tr><td>errorMessageLimitExceeded</td><td>{name} is currently not available at the moment. Please try again in a few minutes.</td><td>Error message displayed when no response can be generated because you have exceeded your message limit</td></tr><tr><td>errorMaxResponseCredits</td><td>{name} currently stopt responding, please try again.</td><td>Error message displayed when the agent stopt responing because it hit your credit limit</td></tr><tr><td>errorProfanity</td><td>Your request couldn't be processed due to our content guidelines. Please try a different prompt.</td><td>Error message displayed when the AI models detects the user requested harmful or illegal content or other malicious message.</td></tr><tr><td>fallbackTitle</td><td>Currently Unavailable</td><td>The title of the fallback page when AI form cannot be loaded</td></tr><tr><td>fallbackDescription</td><td>The AI form isn't available at this time</td><td>The message displayed on fallback page </td></tr><tr><td>replyFieldTip</td><td>TIP: Press enter to send</td><td>Tip displayed under reply field</td></tr><tr><td>sendButtonAriaLabel</td><td>Send reply</td><td>The ARIA label of the send button</td></tr><tr><td>sourcesShowMoreButtonAriaLabel</td><td>Show all sources</td><td>The aria label of the show more source button. Once clicked will show all hidden sources</td></tr><tr><td>sourcesLabel</td><td>Sources</td><td>Title above the sources</td></tr><tr><td>warningInputToLong</td><td>Your input is a bit too long. Please shorten it and try again.</td><td>The message displayed when user input is to long</td></tr><tr><td>continueButtonLabel</td><td>Continue</td><td>Button shown when the assistant's last message is not fully typed. By error or by threshold timeout.</td></tr><tr><td>dropzoneTitle</td><td>Add files</td><td>Title in dropzone area when user uploads a file</td></tr><tr><td>dropzoneDescription</td><td>Drop any file here to add it to the conversation</td><td>Description in dropzone area when user uploads a file</td></tr><tr><td>fileErrorLimitReached</td><td>Only {limit} files can be uploaded</td><td>Error message when user tries to upload more then 5 files per message.</td></tr><tr><td>fileErrorSizeLimit</td><td>You've reached the {sizeLimit} upload limit for this message.</td><td>Error message when user tries to upload a file that is bigger then 25MB or the sum of all uploaded files sizes in the message is bigger then 25MB</td></tr><tr><td>fileErrorUnsupportedType</td><td>File type is not supported.</td><td>Error message file is uploaded with unsupported file type</td></tr><tr><td>fileErrorOrganizationLimitReached</td><td>We're unable to accept file uploads at the moment. Please check back soon.</td><td>Error message when user cannot upload any files because organisation has reached it's storage limit</td></tr><tr><td>fileErrorCloseButtonAriaLabel</td><td>Hide error</td><td>File error banner close button ARIA label.</td></tr><tr><td>fileFailedAriaLabel</td><td>Failed to upload file</td><td>File failed to upload icon ARIA label.</td></tr><tr><td>fileIsUploadingAriaLabel</td><td>Uploading file</td><td>File is uploading icon ARIA label.</td></tr><tr><td>fileDeleteAriaLabel</td><td>Delete file</td><td>File delete button ARIA label.</td></tr><tr><td>uploadAttachmentButtonAriaLabel</td><td>Upload attachment</td><td>Upload button ARIA label.</td></tr><tr><td>carouselPreviousControlAriaLabel</td><td>View previous file</td><td>ARIA label carousel back button</td></tr><tr><td>carouselNextControlAriaLabel</td><td>View next file</td><td>ARIA label carousel next button</td></tr><tr><td>messageToolCallFailedTooltip</td><td>Failed</td><td>Tooltip message when tool call has failed</td></tr><tr><td>messageToolCallFailedScreenReader</td><td>Failed</td><td>Screen reader message when tool call has failed</td></tr><tr><td>messageToolCallSucceededTooltip</td><td>Succeeded</td><td>Tooltip message when tool call has succeeded</td></tr><tr><td>messageToolCallSucceededScreenReader</td><td>Succeeded</td><td>Screen reader message when tool call has succeeded</td></tr></tbody></table>

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.chathive.app/sdk/ai-form/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.