Customizing Your Chat Widget
Your Live Chat widget should feel like a natural part of your website. Customize the colors, branding, welcome messages, and availability settings to create a seamless experience that matches your brand identity.
Step 1: Open Widget Settings
In your Live Chat dashboard, navigate to Settings > Widget. A live preview of your widget is shown on the right side of the screen — it updates in real time as you make changes.
- All customization settings are saved automatically as you adjust them
- Changes take effect on your live website within a few seconds
- Use the device preview toggle to see how the widget looks on mobile vs. desktop
Step 2: Set Widget Color and Position
Choose a primary color that matches your brand and select where the widget bubble appears on your website.
- Color: Pick from the color picker or enter a hex code directly
- Position: Bottom-right (default), bottom-left, or custom position
- Bottom offset: Adjust vertical spacing to avoid overlap with cookie banners or other elements
- Widget size: Choose standard or compact for sites with limited screen real estate
Step 3: Add Business Name and Avatar
Personalize the chat header to establish trust with visitors. Under Branding, add your company name and upload an avatar or logo.
- Display Name: Shown in the chat header (e.g., "Acme Support" or your company name)
- Avatar: Upload a logo or team photo (recommended: square image, 100x100px minimum)
- Team preview: Optionally show avatars of multiple team members to indicate that real humans are available
Step 4: Configure the Welcome Message
The welcome message is the first thing visitors see when they click the chat widget. Write a friendly, engaging message that encourages them to start a conversation.
- Keep it short and inviting — 1-2 sentences works best
- Use
{{visitor_name}}to personalize if you collect names upfront - Configure a pre-chat form to collect the visitor's name and email before the conversation starts
- Add a greeting message delay (e.g., show after 30 seconds on page) to prompt engagement proactively
Step 5: Set Operating Hours and Offline Message
Configure your business hours so visitors know when live agents are available. Go to Settings > Operating Hours to set your schedule.
- Set different hours for each day of the week, or apply one schedule to all weekdays
- Configure a timezone — the system uses this to determine when to show "online" vs. "offline"
- Write an offline message that appears when no agents are available (e.g., "We're offline right now — leave us a message and we'll reply within 1 business day")
- Enable email capture in offline mode so visitors can still reach you
💡 Tip: Test your widget customizations by visiting your live website in an incognito browser window — this lets you see exactly what new visitors experience without any logged-in agent state affecting the view.