Enabling the Alan AI Chat¶

With Alan AI, you can choose to display a chat for your AI agent in the app. The Alan AI Chat allows users to interact with the AI agent through the chat UI using the following interaction channels:

Text
Text and voice

Note

At present, the Alan AI Chat is supported on the Web platform.

To enable the Alan AI Chat:

At the top of the code editor, click Integrations.
In the Integrations view, to the right of the Visual styles field, click Configure.
Click the Text Chat tab and turn on the Enable text chat option.
To customize the chat behavior and look and feel, use general and UI settings for the chat.

General chat settings¶

To customize the Alan AI Chat behavior, use the following settings:

By default, the Alan AI Chat is displayed when the user clicks the chat button in the app. To open the chat window immediately when the AI agent button is initialized in the app, enable the Open text chat by default option.
To allow interactions through both text and voice, turn on the Enable voice input in text chat option.
To allow users to turn on and off audio output, turn on the Show audio output mode icon option. The Alan AI Chat will display the speaker icon in the top right corner of the chat window, and users will be able to turn audio output off and on by clicking this icon.
To enable audio output by default, turn on the Enable audio output option.
To allow users to open the text chat in the full screen mode, turn on the Enable full screen mode option.

Chat UI settings¶

Alan AI provides advanced settings that allow you to personalize every aspect of the Alan AI Chat UI.

Chat window settings¶

To customize the chat window, use the following settings:

Gradient type: choose the gradient type for the chat window: Linear or Radial.
**Background gradient color (top, bottom, center, sides) **: choose colors of the gradient background.
With border and Border color: enable this option, select the border color and transparency level to display the border for the chat window.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the chat window.
Top left border radius, Top right border radius, Bottom right border radius, Bottom left border radius: specify the border radius for the corners of the chat window.
Text chat min. height: specify the minimum height in pixels for the chat window. If the chat content is less than the minimum height, the minimum height will be applied. The value must be between 160px and 1000px.
Text chat height: specify the height in pixels for the chat window. The value must be between 400px and 1200px.
Text chat max. height: specify the maximum height in pixels for the chat. This property prevents the chat height from becoming larger than the specified height. The value must be between 600px and 5000px.
Text chat min. width: specify the minimum width in pixels for the chat window. The value must be between 250px and 1000px.
Text chat width: specify the width in pixels for the chat window. The value must be between 250px and 4000px.
Text chat max. width: specify the maximum width in pixels for the chat window. This property prevents the chat width from exceeding the specified width. The value must be between 250px and 4000px.

Font: in the field, start typing the font name and select the necessary font from the list:

If you select a Google font, you need to add it to your website:
1. In the message below the font field, click the Copy icon to copy the font tag.
2. Add the copied tag to the <head> section of the webpage: <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">.

If you select a custom font:

In the Font field, specify the font family and a fallback font, for example, Clarity City, sans-serif.
Download the font and make it available on your website. A common practice is to create a fonts folder.

Add the font to the head section of the webpage using the @font-face rule in the CSS:

Website¶

<style>
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/CustomFont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/CustomFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/CustomFont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/CustomFont.woff') format('woff'), /* Modern Browsers */
         url('../fonts/CustomFont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/CustomFont.svg#CustomFont') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
</style>

Note

By default, the Alan AI Chat uses the Poppins Google font. To display the chat layout correctly, make sure you copy the font tag below and add to the head section of your website.

Website¶

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Chat header settings¶

To customize the chat header, use the following settings:

Chat name: specify the name to be displayed at the top of the chat.
Layout: choose the position of the agent title in the header: Title in the center or Title in the left.
Height: specify the header height. The value must be between 30px and 80px.
With gradient on bottom border: disable this option to remove gradient from the bottom of the header.
Font size: specify the font size for the chat header. The value must be between 10px and 26px.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the chat header.
Font color: choose the font color for the chat header.
Background color: choose the background color for the chat header.
Close icon, Audio output icon, Audio output enabled icon, Audio output disabled icon, Full screen mode icon, Enter full screen mode icon: choose a custom icon, select the icon color and transparency level for the chat header. The icon image must be in the SVG format and must fit within a rectangle of 20px by 20px or less.

Request bubble settings¶

To customize the request bubble, use the following settings:

Font size: specify the font size for the request bubble. The value must be between 10px and 26px.
Font color: choose the font color for the request bubble.
Background color: choose the background color and transparency level for the request bubble.
Border color: choose the border color and transparency level for the request bubble.
With shadow: disable this option not to display shadow for the request bubble.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the request bubble.
Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: specify the border radius for the corners of the request bubble.

Request bubble label settings¶

With label: enable this option to display the label over the request bubble.
Label: specify the text of the request bubble label.
Font size: specify the font size for the request bubble label. The value must be between 10px and 22px.
Font color: choose the font color and transparency level for the request bubble label.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the request bubble label.

Response bubble settings¶

To customize the response bubble, use the following settings:

Font size: specify the font size for the response bubble. The value must be between 10px and 26px.
Font color: choose the font color for the response bubble.
Background color: choose the background color and transparency level for the response bubble.
Border color: choose the border color and transparency level for the response bubble.
Code background color: choose the background color for code snippets displayed in the chat.
With shadow: disable this option not to display shadow for the response bubble.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the response bubble.
Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: specify the border radius for the corners of the response bubble.
Add copy button for response bubbles: enable this option to display the copy button in response bubbles and allow the user to copy AI agent responses.
Add like button for response bubbles: enable this option to display the like button in response bubbles and allow the user to express their approval of AI agent responses.
Link color: choose the color of links to additional resources displayed in AI agent responses.

Response bubble label settings¶

With label: enable this option to display the label over the response bubble.
Label: specify the text of the response bubble label.
Font size: specify the font size for the response bubble label. The value must be between 10px and 22px.
Font color: choose the font color and transparency level for the response bubble label.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the response bubble label.

Footer¶

Layout: choose the position of the Send button in the footer: Default (in the input field) or Send button outside.
Background color: choose the background color and transparency level for the footer.
Height: specify the footer height. The value must be between 60px and 100px.
With gradient on top border: enable this option to display gradient at the top of the footer.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the footer.
Send icon: choose a custom icon for the Send button. The icon image must be in the SVG format and must fit within a rectangle of 20px by 20px or less.
Allow users to clear messages in the chat: disable this option to hide the Clear dialog button to the left of the input field.
Clear icon color: select the icon color and transparency level for the Clear dialog* icon.

Chat input settings¶

To customize the chat input box, use the following settings:

Placeholder: specify the placeholder text to be displayed in the chat input box.
Font size: specify the font size for the chat input box. The value must be between 10px and 26px.
Font color: choose the font color and transparency level for the chat input box.
Placeholder font color: choose the font color and transparency level for the placeholder text. These settings are also applied to the Send button in the inactive state.
Background color: choose the background color for the chat input box.
Border color: choose the border color for the chat input box.
With shadow: disable this option not to display shadow for the chat input box.
Send and mic. icons color: choose the icon color for the chat input box.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for the chat input field.
Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: specify the border radius for the corners of the chat input box.

Buttons¶

To customize buttons displayed in the chat, use the following settings:

Font size: specify the font size for chat buttons. The value must be between 10px and 22px.
Top padding, Right padding, Bottom padding, Left padding: specify the padding value for chat buttons.
Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: specify the border radius for the corners of chat buttons.
Font color: choose the font color for chat buttons.
Background color: choose the background color for chat buttons.
Border color: choose the border color for chat buttons.
With shadow: disable this option not to show shadow for chat buttons.
Text alignment: choose how the button label should be aligned: Center, Left or Right.
Buttons alignment and Button alignment in full screen mode: choose how chat buttons must be aligned in the compact and full screen modes: Center, Left or Right.
Gap*: specify the gap between the buttons in the group.

Notification bubble settings¶

To customize bubble displayed on top of the chat button, use the following settings:

Font color: specify the font size for the notification bubble. The value must be between 10px and 26px.
Background color: choose the background color for the notification bubble.

Chat button settings¶

By default, the AI agent button is blue. You can customize colors and logo for the Alan AI Chat button.

At the top of the code editor, click Integrations.
In the Integrations view, to the right of the Visual styles field, click Configure.
On the Alan Button tab, choose the necessary colors for chat button states:
- Text Chat State: the icon for the text chat button
- Text Chat Avatar State: the icon for the AI agent in the full screen mode of the Alan AI Chat
In the Logos settings section, click Add custom logos and select one or more image files.
Use the right and left controls below each button state to assign the image to this state.
In the Button Size section, drag the slider right or left to make the button larger or smaller.
To save the configured color scheme, in the Integrations view, to the right of the Button Code field, click Save and define the scheme name. You can switch between the default color scheme and saved color schemes at any time.

Settings export and import¶

You can easily transfer the AI agent settings between projects on your Alan AI Studio account.

To export the AI agent settings:

At the top of the code editor, click Integrations.
In the Integrations view, to the right of the Visual styles field, click Configure.
At the top of the Visual styles view, click Export.

Alan AI will save the AI agent settings as a JSON file in the default downloads folder on your computer.

To import the AI agent settings:

At the top of the code editor, click Integrations.
In the Integrations view, to the right of the Visual styles field, click Configure.
At the top of the Visual styles view, click Import and choose a previously saved JSON file with chat settings.
To the right of Button style names, click Save to save the imported settings.