Guide FloatChat

Floatchat- User Guid

Website Theming


1. Introduction #

Customizing the look and feel of your chatbot on the website is crucial for branding and enhancing the user experience. Floatchat provides a wide range of configuration options to personalize the website widget for your chatbot. These options include placement, header colors, text style, and more, allowing you to achieve the desired look and feel.

2. Availability #

This functionality is available to all users, except for certain options that are exclusively available from the Professional Plan onwards. To access these settings, follow these steps:

  1. Click on “Configure”.
  2. Select “Deployment”.
  3. Click on “Edit Settings” for the Website Chatbot and then click on “Display Settings” in the bottom right corner.

Style your chat window by selecting from the following options:

  1. Style

a. Theme: #

Choose a background theme from a selection of pre-defined themes for your chatbot on the website.


b. Chat Header: #

   – Font: Select the font style for the chat widget from a range of 15 options.

   – Font Color: Choose the color of the text displayed in the header.

   – Alignment: Align the header text to the left or center.

   – Background Color: Set the background color for the header.

   – Header Text: Add a description or tagline for the bot, displayed on top of the widget.

   – Header Icon: Configure the icon displayed beside the header text.

c. Chat Background: #

   – Background Type: Select the background type as none, image, gradient, or video.

   – Customize the chat background by uploading images, setting color gradients, or using videos.

d. Response Messages: #

   – Avatar: Upload an image to be used as the avatar when the bot sends a message.

   – Text Bubble Color: Choose the color of the bubble in which the bot’s messages are displayed.

   – Text Color: Select the color of the text in the bot’s messages.

   – Buttons Color: Set the color of the buttons sent by the bot.

e. User Messages: #

   – Text Bubble Color: Select the color of the bubble in which the user’s messages are displayed.

   – Text Color: Choose the color of the text in the user’s messages.

   – Reply Area Suggestion Text: Enter text that will be displayed to the user in the reply area.

   – Reply Area Background Color: Set the background color for the reply area.

2. Layout #

– Launch Icon: Upload an image to be used as the chatbot launch icon.

– Chat Close Button: Choose the position of the chat close button (top or bottom).

– Chat Menu: Add a chat menu that will be displayed at the left end of the reply area. Customize the menu by adding multiple buttons with specific actions (triggering a path or URL).

3. Launch Screen #

– Show Launch Screen before the Conversation: Check this box to display a launch screen before the user sends a message to the bot.

– Configure parameters such as showing agent profile and availability, agent responsiveness text, query card title, and query placeholder.

– Add new cards with custom parameters like card text, card action title, card action type (trigger path, open URL, or trigger FAQ), and associated paths or URLs.

4. Settings #

– Chat Auto Pop-up: Enable a pop-up message to greet website users. Configure the trigger (immediate or delayed) and type (closed call out, minimized, or normal).

– Notify Users via Sound on New Messages from Agent: When in live chat, users will hear a beep sound on the first unread message from an agent.

– Enable Fading-in of New Messages: Enable this option to display messages and options in the chat bubble one by one, fading in separately.

– Edit Previous User Message: Allow bot users to modify their previous responses. Configure the default response that will be displayed when users click on the change response.

– Enable Voice Input: Allow users to interact with the bot using voice inputs (supported on Chrome browsers).

– Enable Voice Conversations with Bot: Enable voice conversations with the bot, configure voice response gender, and add custom phrase hints for voice recognition.

These settings provide flexibility in customizing the appearance and behavior of your chatbot on the website.

References: #

For more information and detailed instructions, please refer to the official documentation.


What are your feelings
Scroll to Top