Skip to main content
Use the Appearance settings to customize how your chatbot looks and behaves on your website. Control colors, icons, positioning, and auto-open behavior to create a seamless brand experience.

​
Accessing appearance settings

Navigate to your chatbot dashboard and select Appearance from the sidebar to access all customization options.

​
Content settings

Set the display name for your chatbot that appears in the chat interface header.Example: “Support Assistant” or “Sales Bot”
Configure the message that appears when users hover over the chat icon. If left empty, the welcome message will be used as the tooltip.Example: “Need help? Chat with us!”
The first message users see when they open the chatbot. Make it friendly and informative to encourage engagement.Example: “Hello! How can I assist you today?”
Keep welcome messages concise (1-2 sentences) for better engagement.
The placeholder text shown in the message input field before users type their question.Example: “Ask me anything…” or “Type your question here…”

​
Chat interface

  • Colors
  • Font & Layout
  • Watermark
  • Display Options
Primary color
The main brand color used for the chat header, buttons, and user messages.Text color
The color of text displayed on primary color backgrounds (typically white or black for contrast).
Ensure sufficient contrast between primary and text colors for accessibility. Use tools like WebAIM’s contrast checker.

​
Auto open chat window

Configure when and how the chat window automatically opens for visitors.
  • Desktop
  • Mobile
Open chat window
Choose whether to automatically open the chat window on desktop devices.
  • Don’t open automatically
  • Always open automatically (after delay)
Delay
Set the number of seconds to wait before auto-opening the chat window (only applies when auto-open is enabled).
Recommended delay: 3-5 seconds to avoid disrupting the user experience.

​
Chat icon

  • Positioning
  • Size
  • Custom Icons
Distance from bottom
Set the vertical distance from the bottom of the screen in pixels (desktop).Distance from bottom on mobile
Override the desktop value for mobile devices (optional).Horizontal distance
Set the horizontal distance from the left or right edge in pixels (desktop).Horizontal distance on mobile
Override the desktop value for mobile devices (optional).Position
Choose whether the chat icon appears in the bottom-right or bottom-left corner.
Default positioning: 20px from bottom and 20px from right edge.

​
Live preview

The appearance page includes a live preview panel that updates in real-time as you make changes. Use this to see exactly how your chatbot will look before saving.

​
Best practices

Ensure sufficient contrast between your primary color and text color for readability. Use tools like WebAIM’s contrast checker to verify accessibility.Minimum contrast ratios:
  • Normal text: 4.5:1
  • Large text: 3:1
Preview your chatbot on both desktop and mobile devices to ensure positioning and sizing work well across screen sizes.Test checklist:
  • Desktop browsers (Chrome, Firefox, Safari, Edge)
  • Mobile devices (iOS, Android)
  • Different screen sizes (phone, tablet, desktop)
  • Both portrait and landscape orientations
Short, friendly welcome messages (1-2 sentences) perform better than lengthy introductions.Good examples:
  • “Hi! How can I help you today?”
  • “Welcome! Ask me anything about our products.”
Avoid:
  • Long paragraphs explaining everything the bot can do
  • Multiple questions in the welcome message
Auto-opening the chat can increase engagement, but use appropriate delays (3-5 seconds) to avoid disrupting the user experience.Best practices:
  • Use longer delays on mobile (5-7 seconds)
  • Consider disabling auto-open on mobile entirely
  • Test with real users to find optimal timing
  • Monitor bounce rates after enabling auto-open

​
Next steps

Customizing your chatbot

Overview of all customization options

Creating a new chatbot

Initial appearance setup during chatbot creation

Settings

Configure chatbot behavior and features

JavaScript SDK

Advanced customization with CSS and SDK methods
⌘I