Skip to main content

Customizing Your Chatbot

Make the chatbot match your brand and website design. Here's how to customize its appearance and behavior.

Accessing Customization Options​

  1. Go to Agents in your dashboard
  2. Click on your agent
  3. Find Web Deployments
  4. Click on your deployment
  5. Edit the settings

Appearance Settings​

Primary Color​

The main color used for the chat bubble and headers.

How to choose:

  • Use your brand's primary color
  • Make sure it's visible against your website background
  • Test that text is readable

Example: If your brand color is blue (#0066CC), set that as your primary color.

Header Color​

The color of the chat window header (may differ from primary).

Tip: Often the same as primary, but can be darker or complementary.

Welcome Message​

The first message visitors see when opening the chat.

Good Welcome Messages​

Friendly and inviting:

"Hi there! 👋 How can I help you today?"

Service-focused:

"Welcome! I can help you with appointments, pricing, or any questions about our services."

Action-oriented:

"Looking to book an appointment or have a question? I'm here to help!"

Simple:

"Hello! How can I assist you?"

Tips for Welcome Messages​

  • Keep it short (1-2 sentences)
  • Be friendly and approachable
  • Hint at what you can help with
  • End with an invitation to chat

Agent Avatar​

The picture shown in the chat representing your assistant.

Options​

  • Default: Use a generic avatar
  • Custom: Upload your own image

Good Avatar Choices​

  • Your logo
  • A friendly illustration
  • A team photo
  • A relevant icon

Avatar Tips​

  • Use a square image (it may be cropped to a circle)
  • Choose something friendly and professional
  • Make sure it's recognizable at small sizes
  • Avoid cluttered or busy images

Chat Bubble Position​

Where the chat button appears on your website.

Default: Bottom-right corner

This is the most common position and what users expect. Only change it if it conflicts with other elements on your site.

Deployment Name​

An internal label for your reference (visitors don't see this).

Examples:

  • "Main Website"
  • "Product Pages"
  • "Support Chat"

Useful if you have multiple websites or chatbot deployments.

Preview Your Changes​

Most customization screens show a preview:

  1. Make your changes
  2. Look at the preview panel
  3. Adjust until it looks right
  4. Save

Brand Consistency Tips​

Match Your Website​

  • Use the same colors
  • Match the overall tone
  • Keep fonts consistent (if customizable)

Professional Appearance​

  • Choose appropriate colors (not too bright or clashing)
  • Use a clean, professional avatar
  • Write clear, helpful welcome messages

User Experience​

  • Make sure the chat bubble is visible but not intrusive
  • Ensure text is readable against your color choices
  • Test on both light and dark sections of your site

Multiple Deployments​

If you have different website sections or multiple sites, you can create different deployments:

Why Use Multiple Deployments?​

Different branding:

  • Main site: Corporate colors
  • Blog: Casual tone
  • Support: Focused on help

Different purposes:

  • Sales page: Lead capture focus
  • FAQ page: Information focus
  • Contact page: Appointment focus

Creating Multiple Deployments​

  1. Go to your agent's Web Deployments
  2. Click Add Deployment
  3. Configure each one differently
  4. Use the appropriate code on each part of your site

What You Can't Customize​

Some elements are standardized for consistency:

  • Chat window dimensions
  • Font family (in most cases)
  • Animation effects
  • Core chat functionality

Testing Your Customizations​

After making changes:

  1. Clear your browser cache (important!)
  2. Visit your website
  3. Check the chat bubble — right color and position?
  4. Open the chat — header looks good?
  5. See the welcome message — reads well?
  6. Try on mobile — works on phones?

Common Questions​

Why don't my color changes show up?​

Your browser may be caching the old version. Try:

  • Hard refresh (Ctrl+F5 or Cmd+Shift+R)
  • Clear browser cache
  • Use an incognito window

Can I customize the chatbot for different pages?​

Yes! Create multiple deployments with different settings and add the appropriate code to each page section.

Can I hide the chatbot on certain pages?​

Only add the embed code to pages where you want the chatbot. Alternatively, some advanced users can conditionally load it using JavaScript.

Can I change the chat bubble icon?​

The default bubble style is standardized, but your avatar appears in the chat window.

Can I add my own CSS styling?​

Advanced CSS customization isn't directly supported, but the standard options should cover most needs.

Examples​

Professional Services (Law Firm)​

  • Primary color: Navy blue
  • Avatar: Firm logo
  • Welcome message: "Welcome to Smith & Associates. How may we assist you with your legal needs?"

Casual Retail (Clothing Store)​

  • Primary color: Bright pink
  • Avatar: Shopping bag icon
  • Welcome message: "Hey! 👗 Looking for something specific? I can help!"

Home Services (HVAC)​

  • Primary color: Red
  • Avatar: Flame/AC icon
  • Welcome message: "Hi! Need heating or cooling help? I can schedule a technician or answer questions."

Restaurant​

  • Primary color: Warm orange
  • Avatar: Restaurant logo
  • Welcome message: "Welcome to Tony's! Want to make a reservation or see today's specials?"

Need Help?​