Customize the Chatbot Interface

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

You can configure the interface of your chatbot via the following URL: https://www.chat-data.com/chatbot/{chatbotId}/settings/chat-interface. The Chat Interface settings page provides comprehensive customization options organized into several sections:

Avatar and Name

Display Name: The name of the chatbot as it appears to users in the chat interface.
Show Name in Bubble Preview: Display the chatbot name in the chat bubble preview message before users open the widget.
Profile Picture: Upload your brand image to represent the chatbot (supports JPG, PNG, GIF, ICO, and SVG files up to 1MB).
Chat Icon: Upload a custom icon for the chatbot widget bubble when embedded on your website (supports JPG, PNG, GIF, ICO, and SVG files up to 1MB).

Initial Messages

Initial Messages: A sequence of up to 10 welcome messages displayed when a new conversation begins. These messages can be personalized using variables like {{name|DEFAULT_NAME}}, {{email|DEFAULT_EMAIL}}, and {{phone|DEFAULT_PHONE}}. The default value serves as a fallback when user information is unavailable. Each message is limited to 1000 characters.

Suggestion Messages

Suggestion Messages Style: Choose between Inline (vertical stacking) or Carousel (horizontal scroll) display for suggested messages.
Visible Suggestions When Widget is Closed: Control how many suggestion messages appear when the chatbot widget loads in its closed state for desktop and mobile separately. Enter -1 to show all, 0 to hide all, or a positive number for a specific count.
Conversation Starters: Enter suggested response messages that inform users about the types of questions they can ask.
Enable Dynamic Suggested Messages: When enabled, the chatbot generates dynamic suggestions based on user queries, overriding static messages after the first user query.

Interface Labels

Home Label: Customize the label for the home button that appears in the chat interface.
Message Input Placeholder: The placeholder text displayed in the chatbot's message input field.
Footer: Add a rich text disclaimer or additional information at the bottom of the chat widget.
Timestamp Format: Choose between relative (e.g., "5 minutes ago"), absolute (e.g., "3:45 PM"), or hidden timestamps, with support for multiple language locales.

Chatbot Styles

Display Style: Choose between Chat Bubble (corner launcher) or Search Bar (bottom search bar) presentation.
Default Theme: Set the chatbot to light or dark theme by default.
Align Chat Bubble Button: Position the chatbot bubble on either the right or left corner of your website.
User Message Color: Customize the color of user messages in the conversation, with an option to sync with the chatbot header color.
Action Buttons Color: Set the color for action buttons throughout the interface.
Chat Bubble Button Color: Customize the background color of the chatbot widget bubble.
Widget Width/Height: Define custom dimensions for the chat widget in pixels.
Chat Bubble Size: Adjust the size of the chat bubble launcher in pixels.
Horizontal/Vertical Padding: Set custom spacing around the chat widget in pixels.
Custom CSS: Apply advanced custom styling using CSS to further personalize the chatbot appearance and behavior.

Message Threads Behavior

Persistent Conversation: Enable conversation persistence across browser sessions using localStorage. When disabled, uses sessionStorage, which clears data when the session ends.
Enable Multi-Thread: Allow users to create and manage multiple conversation threads with the website chatbot integration.

Audio Input/Output

Voice Input Languages: Select up to 4 languages for voice recognition support (e.g., en-US, zh-CN, es-ES).
Use Customize Voice: Enable the customized voice you've configured for text-to-speech responses.
Text to Voice Language: Choose from a wide range of language locales for text-to-speech output.
Play/Stop Audio Labels: Customize the labels for audio playback controls.

Files Upload

File Size Limit: Set the maximum file size users can upload, ranging from 1 to 50 MB.
Image Description Prompt: Customize the prompt used to generate image descriptions for retrieval from your knowledge base, optimized for your specific use case.

Collect User Feedback

Upvote/Downvote Text: Customize the tooltip text that appears for user feedback buttons in AI responses.

Other Configurations

Enable Internationalization (i18n): Automatically localize your customized messages based on the user's browser default language. Translation takes up to 10 minutes to take effect.
Sources in AI Response: Configure how source references are displayed in AI responses (website sources only).
Download Conversation Options: Choose how users can access their conversation history (select one, both, or none of the available options).
Light/Dark Mode Options: Choose between Fixed Mode (uses default theme), System Default, or Selectable Mode (allows users to choose).
Enable Page Context: Automatically capture page context with website embedding for more contextual responses.
Enable Bubble Sound: Add sound effects when the chatbot bubble appears or is interacted with.
Bubble Bouncing Animation: Enable a bouncing animation at session start to attract user attention.
Auto Show Initial Messages Pop-ups After: Set the delay in seconds before initial messages automatically appear (use negative value to disable).

Here is the video to show the overall process

Chatbot Widget Interface Setting