Skip to main content

Customizing Your Chat Widget

Make your chat widget match your brand so it feels like a natural part of your website.

What you can customize​

Agent icon​

The image that appears on the chat bubble and in the chat header.

Options:

  • Your company logo
  • A friendly avatar or illustration
  • A photo

Tips:

  • Use a square image
  • Keep it simple - it appears small
  • Make sure it's recognizable at tiny sizes
  • File types: JPG, PNG, or GIF

Colors​

Match your brand palette. You can customize each color individually:

  • Header background - The color behind your agent's name at the top
  • Header text color - The text color in the header
  • Agent message background - Background color for the agent's chat bubbles
  • User message background - Background color for the customer's chat bubbles
  • User text color - Text color in customer messages
  • Chat box text color - Text color in the agent's messages
  • Input field background - Background of the text input where customers type
  • General text color - Default text color

Tips:

  • Use your main brand color for the header
  • Ensure text is readable against backgrounds
  • Keep contrast high for accessibility

Greeting message​

The greeting message is a preview bubble that appears near the chat icon before customers open the chat. It invites them to click and start a conversation.

Options:

  • Enable or disable the greeting entirely
  • Time-based - Greeting appears automatically after a delay
  • Custom message - Write your own greeting text

Good examples:

  • "Have a question? Chat with us!"
  • "Need help? We're here for you."
Greeting vs. Welcome message

The greeting appears outside the chat to encourage clicks. The welcome message appears inside the chat window after a customer opens it. They serve different purposes - use both for the best experience.

Welcome message​

The first message customers see inside the chat window when they open it.

Good examples:

  • "Hi! How can I help you today?"
  • "Welcome to [Company]. Ask me anything!"
  • "Hello! I'm here to answer your questions."

Tips:

  • Keep it short and friendly
  • Tell customers what you can help with
  • Match your brand's tone

Input placeholder​

The placeholder text that appears in the text input field before customers start typing.

Default: "Type a message..."

You can customize this to something more specific like "Ask me about our products..." or "Type your question here..."

Widget position​

Where the chat bubble appears on your website.

Options:

  • Bottom-right (most common)
  • Bottom-left

Tips:

  • Bottom-right is standard - users expect it there
  • Choose bottom-left if it conflicts with other elements
  • Make sure it doesn't cover important content

Watermark​

The "Powered by The Agent Builder" text at the bottom of the chat widget.

The watermark is shown by default on every plan. Removing it requires the Watermark Removal add-on, which:

  • needs a paid plan (Lite, Starter, or Growth) — it isn't available on Free
  • costs extra on top of your subscription, currently $15/month or $144/year (shown in your workspace currency)
  • can be cancelled at any time

To remove the watermark, go to Settings > Billing, subscribe to Remove Watermark, and confirm the prorated amount. See Billing and subscription for the full details.

Stores billed through Shopify

If your subscription is billed through Shopify, watermark removal is tied to your Shopify-billed plan rather than a separate add-on.

How to customize​

  1. Go to Agents and select your agent
  2. Click Channels
  3. Click Chat Widget
  4. Adjust settings in the customization panel
  5. Preview your changes
  6. Save when you're happy

Changes apply immediately after saving. You may need to refresh your website to see them.

Design best practices​

Match your brand​

The widget should feel like part of your website, not an add-on.

  • Use your brand colors
  • Match the tone of your site
  • Use consistent imagery style

Keep it simple​

Don't over-design. A clean, simple widget works best.

  • One or two colors
  • Clear, readable text
  • Simple icon

Consider mobile​

Many visitors use phones. Make sure:

  • Colors are visible on small screens
  • Text is readable
  • The bubble doesn't block content
  • The chat window works well on mobile

Test across browsers​

Check your widget looks right in:

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Mobile browsers

Preview your changes​

Most customization screens show a preview. Use it to:

  • See color combinations
  • Check how text looks
  • Verify the icon displays correctly

Always test on your actual website too - the preview is helpful but the real thing is what matters.

Resetting to defaults​

Made a mess? You can usually:

  • Undo recent changes before saving
  • Reset to default settings
  • Start fresh with new colors

Check the customization screen for reset options.

Common questions​

Can I add my own CSS? Not currently. Use the built-in customization options.

Can I change the chat bubble shape? The shape is fixed, but you can customize colors and the icon.

Can I hide the widget on certain pages? Not through TAB directly. You'd need to conditionally load the embed code on your website.

Can I change the font? The font is standardized for readability across devices.

Next steps​