Overview
The Widget Configuration settings control what your chat widget displays and how it behaves when visitors interact with it. This includes the welcome message, header title, suggested questions, and the chat bubble’s position and icon.Accessing Widget Settings
- Navigate to your agent in the dashboard
- Click on Deploy in the sidebar
- Select Chat Widget to access the configuration options
- Styling tab - Visual appearance (covered in Styling documentation)
- Content tab - Messages, prompts, and text content (covered here)
Chat Bubble Position
The chat bubble is the floating button visitors click to open your chat widget. You can position it on either side of the screen.Position Options
| Position | Description |
|---|---|
| Right | Bubble appears in the bottom-right corner (default) |
| Left | Bubble appears in the bottom-left corner |
Choosing a Position
Consider these factors when selecting bubble position:Website layout
Website layout
If your website has important content or navigation on one side, place the bubble on the opposite side to avoid obstruction.
Existing chat tools
Existing chat tools
If you have other chat tools or support widgets, position your bubble away from them to avoid confusion.
Call-to-action buttons
Call-to-action buttons
Mobile considerations
Mobile considerations
Test both positions on mobile devices. The bottom-right is conventional, but left positioning may work better for some mobile layouts.
- Navigate to the Styling tab in Chat Widget settings
- Scroll to the Chat Bubble section
- Select either Left or Right position
- Preview the change in the live preview panel
- Click Save Changes
Custom Chat Icon
Replace the default chat bubble icon with your own custom image to match your brand.Enabling Custom Icon
- Navigate to the Styling tab
- Find the Chat Bubble section
- Toggle Chat Icon to enable custom icon upload
- Click Upload to select an image from your device
Icon Requirements
| Requirement | Specification |
|---|---|
| Formats | PNG, JPG, SVG |
| Recommended size | 48x48 pixels or larger |
| Aspect ratio | Square (1:1) recommended |
| File size | Keep under 100KB for fast loading |
Icon Best Practices
- Use a simple, recognizable icon that works at small sizes
- Ensure the icon has good contrast against the bubble background color
- Test your icon on both light and dark website backgrounds
- Consider using your logo or a custom chat-related icon
Header Title
The header title appears at the top of the chat widget when it’s open. It helps visitors understand who or what they’re chatting with.Setting the Header Title
- Navigate to the Content tab in Chat Widget settings
- Find the Header Title field
- Enter your desired title (e.g., “Chat with Support”, “Ask Our Assistant”)
- Save your changes
Header Title Examples
| Use Case | Example Title |
|---|---|
| Customer support | ”Support Chat” |
| Sales assistant | ”Talk to Sales” |
| General help | ”How can we help?” |
| Brand-focused | ”Chat with [Brand Name]“ |
| Product-specific | ”[Product] Assistant” |
If no header title is set, the widget will display a default title. Setting a custom title creates a more personalized experience for visitors.
Welcome Message
The welcome message is the first thing visitors see when they open the chat widget. It sets the tone for the conversation and helps visitors understand how to get started.Configuring the Welcome Message
- Navigate to the Content tab
- Find the Welcome Message field
- Enter your message in the text area
- Preview how it appears in the live preview
- Save your changes
Writing Effective Welcome Messages
Be friendly
Use a warm, approachable tone that makes visitors feel comfortable asking questions.
Be clear
Let visitors know what kind of help they can expect and what topics the agent can assist with.
Be brief
Keep the message concise. Long welcome messages can be overwhelming and may get skipped.
Be actionable
Encourage visitors to ask their first question or guide them toward common topics.
Welcome Message Examples
Customer Support:Suggested Messages
Suggested messages (also called quick replies or starter prompts) appear as clickable buttons that visitors can use to quickly start a conversation. They reduce friction and help visitors who may not know what to ask.Adding Suggested Messages
- Navigate to the Content tab
- Find the Suggested Messages section
- Click Add to create a new suggested message
- Enter the message text
- Repeat for additional messages
- Drag to reorder if needed
- Save your changes
Managing Suggested Messages
| Action | How To |
|---|---|
| Add | Click the Add button and enter your message |
| Edit | Click on an existing message to modify the text |
| Remove | Click the X button next to a message to delete it |
| Reorder | Drag and drop messages to change their display order |
Best Practices for Suggested Messages
Limit the number
Use 2-4 suggested messages. Too many options can overwhelm visitors and have the opposite effect of what you intend.
Cover common topics
Choose messages that address your most frequently asked questions or common visitor needs.
Suggested Message Examples
E-commerce:- “What are your shipping options?”
- “How do I return an item?”
- “Track my order”
- “Talk to a human”
- “What features are included?”
- “How does pricing work?”
- “See a demo”
- “Get help with my account”
- “Reset my password”
- “Billing questions”
- “Technical support”
- “Feature request”
Configuration Reference
Default Values
| Setting | Default Value |
|---|---|
| Chat Bubble Position | Right |
| Custom Icon | Disabled |
| Header Title | Not set (uses default) |
| Welcome Message | Not set (uses default) |
| Suggested Messages | Empty |
Character Limits
| Field | Recommended Limit |
|---|---|
| Header Title | 30 characters |
| Welcome Message | 200 characters |
| Suggested Message | 50 characters each |
These are recommended limits for optimal display. Longer text may be truncated or cause layout issues on smaller screens.
Preview and Testing
Always preview your widget configuration changes before saving:- Make your changes in the configuration panel
- Watch the live preview on the right side of the screen
- Test on both desktop and mobile views if available
- Click Save Changes when satisfied