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 modes:

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 make sure the Enable text chat option is turned on.
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 left 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.
To enable users to download a transcript of the chat conversation, turn on the Enable saving the text chat history. The Alan AI Chat will display the download icon in the top right corner of the chat window.

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 style for the chat window: Linear, Radial or Custom. If you choose the Custom option, in the field below, define a CSS rule for the gradient, for example: linear-gradient(135deg, rgba(128, 0, 128, 0.9) 20%, rgba(0, 0, 255, 0.8) 80%);.
Background gradient color (top, bottom, center, sides): choose colors of the gradient background.
With border and Border color: to display the border for the chat window, enable this option, choose the border color and transparency level.
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 choose the necessary font from the list:

If you choose a Google font, you must 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 choose 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.
Header icon: add a custom icon to the chat header. The icon image must be in the SVG format and must fit within a rectangle of 24px by 24px or less.
Gap: set the space between the icon and text in the chat header.
Vertical alignment: adjust the vertical alignment of the icon and text in the chat header.
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 a gradient effect to messages that extend beyond the scrolling area.
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, Exit full screen mode icon, Save chat history icon color: choose a custom icon, choose 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¶

To customize labels displayed above request bubbles, use the following 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.
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. For details, see Likes and dislikes feedback setup.
Copy, Like, Dislike buttons color: choose the color and transparency level for like and dislike buttons.

Links in text¶

To customize links displayed in the text of AI agent responses, use the following settings:

Link color: choose the color and transparency level for links.

Learn more links¶

To customize links displayed below AI agent responses, use the following settings:

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 links box.
Border color: choose the border color and transparency level for the link box.
Text part background color: choose the background color for the text area in link boxes.
Number part background color: choose the background color for the number area in link boxes.

Code¶

To customize code snippets displayed in AI agent responses, use the following settings:

Background color: choose the background color and transparency level for code snippets.
Border color: choose the border color and transparency level for code snippets.
Theme: choose the theme for code snippets in response bubbles: Light or Dark.

Table¶

To customize tables displayed in AI agent responses, use the following settings:

Border color: choose the border color and transparency level for tables.

Response bubble label settings¶

To customize labels displayed above response bubbles, use the following settings:

With label: enable this option to display the label over the response bubble.
Label: specify the text of the response bubble label.
Icon: add a custom icon to the label. The icon image must be in the SVG format and must fit within a rectangle of 24px by 24px or less.
Gap: set the space between the icon and text in the label.
Vertical alignment: adjust the vertical alignment of the icon and text in the 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.

Response waiting bubble¶

To customize the response waiting bubble displayed while an AI agent response is being generated, use the following settings:

Layout: choose the layout style for the response waiting bubble: Default, Loader+label, Loader+label without bubble.
Label: specify the text for the response waiting bubble.
Loader icon: choose a custom icon for the response waiting bubble.
Gap: set the space between the icon and text in the response waiting bubble.
Vertical alignment: adjust the vertical alignment of the icon and text in the response waiting bubble.

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: set the space between buttons in the chat window.

Footer¶

To customize the chat footer, use the following settings:

Layout: choose the position of the Send button in the footer: Default (in the input box) 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: disable this option to remove a gradient effect to messages that extend beyond the scrolling area.
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 44px by 40px 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 box.
Clear icon color: choose 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.
Type: enable this option to allow users to enter multiple lines of text in the chat input field.
Max. lines count: specify the maximum number of lines in the chat input field before a scrollbar appears.
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.
Microphone icon: choose a custom icon for the Microphone button. The icon image must be in the SVG format and must fit within a rectangle of 46px by 46px or less.
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 box.
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.

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 choose 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.