Enabling the Alan AI Chat¶
With Alan AI, you can choose to display a chat for your AI assistant in the app. The Alan AI Chat allows users to interact with the AI assistant 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 assistant 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 the AI assistant to play audio responses, turn on the Enable audio output option. Users will be able to turn audio output off and on by clicking the speaker icon in the top right corner of the chat window.
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:
Background gradient color (top): choose the top color of the chat gradient background.
Background gradient color (bottom): choose the bottom color of the chat gradient background.
With border and Border color: enable this option and select the border color to display the border for the chat window.
Top left border radius, Top right border radius, Bottom right border radius, Bottom left border radius: set 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. To do this:
In the message below the font field, click the Copy icon to copy the font tag.
Add the copied tag to the
<head>section of your website:<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">.
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.
<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.
Font size: specify the font size for the chat header. The value must be between 10px and 26px.
Font color: choose the font color for the chat header.
Background color: choose the background color for the chat header.
Close icon color, Clear icon color, Mute icon color, Full screen icon color: choose the icon color for the chat header.
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 for the request bubble.
Border color: choose the border color for the request bubble.
With shadow: disable this option not to display shadow for the request bubble.
Top left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: set the border radius for the corners of the request bubble.
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 for the response bubble.
Border color: choose the border color 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 left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: set 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 assistant 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 assistant responses.
Link color: choose the color of links to additional resources displayed in AI assistant responses.
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 for the chat input box.
Placeholder font color: choose the font color for the placeholder text.
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 left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: set 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 left order radius, Top right border radius, Bottom right border radius, Bottom left border radius: set 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.
Buttons alignment and Button alignment in full screen mode: choose how chat buttons must be aligned in the compact and full screen modes: on the left, in the center or on the right.
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 assistant 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 assistant 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.
