Customize the Chatbot Interface

Learn how to customize the chatbot interface to relfect the brand of your own company.

Chatbot Widget Interface Setting

You can configure the interface of your chatbot via the following URL: https://www.chat-data.com/chatbot/{chatbotId}/settings/chat-interface. Here, you can modify various parameters of your chatbot widget:

• Initial Messages: A sequence of welcome messages displayed when a new conversation begins. These messages can be personalized using variables like {{name|DEFAULT}}, {{email|DEFAULT}}, and {{phone|DEFAULT}}. The DEFAULT value serves as a fallback when user information is unavailable - it can be left empty or contain a default value. When a user provides their contact details through the lead capture form, their actual name, email, or phone number will replace these variables, creating a tailored conversational experience.
• Suggested Messages: Suggested response chips that inform users about the types of questions they can ask.

  • Inline suggested messages at conversation start: Show suggested messages directly in the chatbot panel, making high-priority messages visible.

  • Visible suggested messages: Number of suggested messages displayed directly in the chatbot panel.

    • -1: Display all messages.
    • 0: Display no messages.
    • positive number: Display a specified number of messages.

    The inline suggested messages are applicable only at the conversation start, and the suggested chips will fall back to the carousel style afterward.

• Timestamp Format: Format of the displayed time or hide the timestamp along with the message.
• Enable upvote in AI response: Enable/disable the upvote button or customize the button tooltip text.
• Theme: Set the chatbot to either a dark or light theme.
• Profile Picture: The profile image that represents your brand.
• Display Name: The name of the chatbot as it appears to users.
• User Message Color: The color used for user messages within the conversation.
• Chat Icon: The icon of the chatbot widget bubble when integrated into your website.
• Bubble Button Color: The background color of the chatbot widget bubble.
• Align Chat Bubble Button: The position of the chatbot bubble, either on the left or the right corner of your website.
• Activate Chatbot Bubble Bouncing Animation: Enable a bouncing animation for the chatbot bubble to catch the user's attention upon their first visit.
• Auto Show Initial Messages Pop-Ups After: The delay (in seconds) before the chatbot bubble shows the initial messages automatically to engage users.
• Message Input Placeholder: The placeholder text in the chatbot’s message input field.
• Footer: The rich text disclaimer that you can put in the bottom of the chat widget.

Here is the video to show the overall process