The Widget Customization page allows you to personalize your chat widget’s appearance, messages, and behavior to match your brand.

​
What You Can Customize

  • Branding (colors, logo, avatar)
  • Text content (welcome message, placeholders)
  • Size and position
  • Welcome screen
  • Lead collection forms
  • Advanced features

​
Prerequisites

  • An active agent
  • Widget channel enabled

​
Customization Sections

Branding

Colors, logo, and visual identity

Text Content

Messages, placeholders, and labels

Size & Position

Widget dimensions and placement

Welcome Screen

Pre-chat greeting and options

Lead Collection

Forms to collect user information

Advanced Features

Voice, suggested questions, and more

​
Step-by-Step: Customize Your Widget

1

Navigate to Widget Customization

Go to your agent’s Widget Customization tab.
2

Expand a Section

Click on a section (e.g., Branding) to expand it.
3

Make Changes

Adjust settings using the form controls.
4

Preview

See changes in real-time in the preview panel.
5

Save

Click Save to apply your changes.
screenshot: widget customization page

​
Branding Section

Customize your widget’s visual identity:
SettingDescriptionExample
Primary ColorMain accent color#6366f1
Background ColorWidget background#ffffff
Text ColorMessage text color#1f2937
Agent AvatarImage shown for agentCompany logo
Widget IconLauncher button iconChat bubble

​
Color Picker

Use the color picker or enter hex codes directly: 
Primary: #6366f1 (Indigo)
Background: #ffffff (White)
Text: #1f2937 (Dark gray)
screenshot: branding color picker

​
Text Content Section

Customize all text displayed in the widget:
SettingDescriptionDefault
Widget TitleHeader text”Chat with us”
Welcome MessageInitial greeting”Hi! How can I help?”
Input PlaceholderChat input hint”Type a message…”
Send Button TextSend button label”Send”

​
Example Welcome Message

Hi there! 👋

I'm your AI assistant. I can help you with:
• Product questions
• Order status
• Returns and refunds

How can I help you today?

​
Size & Position Section

Control widget dimensions and placement:
SettingOptions
PositionBottom-right, Bottom-left
Width350px - 450px
Height500px - 700px
MarginDistance from screen edge

​
Welcome Screen Section

Configure the pre-chat experience:
SettingDescription
Enable Welcome ScreenShow screen before chat
TitleWelcome screen heading
SubtitleSupporting text
Start Button TextButton to begin chat
Suggested QuestionsQuick-start prompts

​
Suggested Questions

Add up to 4 suggested questions: 
1. "What are your business hours?"
2. "How do I track my order?"
3. "What's your return policy?"
4. "I need help with my account"
screenshot: welcome screen preview

​
Lead Collection Section

Collect user information before or during chat:
SettingDescription
Enable Lead CollectionTurn on/off
Collection TimingBefore chat or during
Required FieldsName, Email, Phone, Company
Custom FieldsAdd your own fields

​
Field Configuration

For each field:
  • Label: Display name
  • Required: Mandatory or optional
  • Placeholder: Input hint text
screenshot: lead collection form

​
Advanced Features Section

Enable additional capabilities:
FeatureDescription
Voice ChatEnable voice conversations
File UploadsAllow users to send files
Typing IndicatorShow when agent is typing
Sound NotificationsPlay sound for new messages
Persistent ChatRemember conversation history

​
Settings Section

Additional widget settings:
SettingDescription
Auto-openOpen widget automatically
Auto-open DelaySeconds before auto-open
Show BrandingDisplay “Powered by Boty”
LanguageWidget interface language

​
Live Preview

The preview panel shows your changes in real-time:
  • Desktop and mobile views
  • Interactive preview
  • Test conversations
screenshot: live preview panel

​
Best Practices

Use your brand’s primary color for consistency across your website.
Short, friendly greetings work better than long paragraphs.
Help users get started with common questions.
Only require essential information to reduce friction.
Ensure your widget looks good on mobile devices.

​
Troubleshooting

  • Click Save after making changes
  • Clear your browser cache
  • Hard refresh the page (Ctrl+Shift+R)
  • Verify the embed code is correct
  • Check for JavaScript errors in console
  • Ensure the agent is published
  • Check for CSS conflicts
  • Verify hex codes are correct
  • Test in an incognito window