https://app.supportfast.ai/interface/
The Interface page allows you to customize the visual appearance of your chatbot by applying your brand’s colors and logo, before publishing it on your website via iframe or chat bubble, or sharing it via direct link.
The page is divided into two main sections:
Below is an overview of the available interface configuration options.
Enter the visible name of your chatbot. This will be used as the title in the chat window header and as a label above the messages sent by the chatbot itself.
Set the welcome messages that automatically appear in the conversation before the user starts interacting. You can add different messages for each of the languages enabled on your chatbot.
It is possible to use emojis to make the messages more engaging.
To add multiple messages, insert a line break between them.
Note: this is the link to copy emojis
Set predefined questions that will appear above the input area, allowing users to click on them to send the corresponding message. As with other elements, you can customize the questions for each enabled language, and enhance them with emojis if desired. To add multiple questions, insert a line break between each one.
You can also shorten the visible content of a question by inserting a label in square brackets immediately after the full question.
Example: What services do you offer? [services]
The user will see the word “services” as a clickable button. Once clicked, the full message “What services do you offer?” will be sent in the chat.
This option is only available for the chat bubble.
It allows you to display overlay messages above the chat button when the user visits your site but has not yet opened the chatbot. This is useful for grabbing the user’s attention and encouraging interaction with the chatbot.
The messages displayed in the tooltip are the same as those configured in the Initial Messages section.
You can choose whether to enable this option, and set a delay timer (in seconds) after which your chatbot will display these tooltip messages.
You can select either the Light or Dark theme for your chatbot.
The chosen theme affects the overall appearance of the interface, particularly the background and text colors:
Customize the colors used in the conversation, both for user messages and chatbot messages. You can configure the following elements:
All settings are managed via an integrated color picker, which allows you to freely choose a color using hex codes, RGB values, or manual selection.
This setting is only applicable for the Chat Bubble.
It allows you to choose whether to place the chat open button at the bottom-right or bottom-left of your website. Choosing the position is useful for ensuring compatibility with other elements or widgets on the site, avoiding potential overlaps.
Upload the file to be used as your chatbot’s icon. You can use your brand’s logo or a generic image that represents chat or the concept of a virtual assistant.
The uploaded icon will be used in the following areas:
The icon is optional and can be left empty or removed at any time. If no icon is set, it will not appear in the header or as a visual marker, while the chat bubble button will display a default icon.
Supported formats: PNG, JPG and SVG
Recommended format: square image, for example 512 x 512 pixels, for optimal rendering.
Select the main color that will define the appearance of your chatbot.
This color will be applied to various interface elements, including:
The primary color is chosen using a color picker, which allows you to freely set your desired color using hex codes, RGB values, or manual selection.
Select the secondary color, which is used in contrast with the primary color. It ensures good text readability within the chat, especially when text appears on colored backgrounds.
The secondary color is automatically applied to the chatbot’s text and other elements where a high level of contrast is needed. You can choose between two options::
The choice depends on the selected primary color, to always ensure the right visual balance between text and background colors.
In this section, you can customize the footer of your chatbot, which is the fixed area at the bottom of the chat window. The footer can include a custom text and a “Powered by” reference to Supportfast or to your own Whitelabel brand.
Powered By
Users with a Whitelabel plan have the option to replace the “Powered by Supportfast.ai” reference with their own custom text.
To do this, you must first configure the Powered By settings in the Whitelabel section of the platform. Once set up, you can choose for each chatbot whether or not to display your custom reference in the footer.
Footer Text
You can enter additional text to display in the footer, useful for:
The field supports HTML formatting, including links, bold, and italics, via a dedicated text editor.
Once configured, the footer will remain visible at the bottom of the chatbot window throughout the entire conversation.
