Website Chat Widget
What is the Website Chat Widget?
The website chat widget is a small chat bubble that appears on your website, allowing visitors to instantly start a conversation with your AI agent. It’s like having a helpful assistant available 24/7 on every page of your website. Think of it as your AI agent’s office hours extended to “always open” - right where your customers are browsing and shopping.Why Add a Chat Widget to Your Website?
Capture Visitors Before They Leave
- Instant help - answer questions while customers are browsing
- Reduce bounce rate - keep visitors engaged instead of leaving
- Convert browsers to buyers - help hesitant customers make decisions
- 24/7 availability - help customers even when you’re sleeping
Better Customer Experience
- No phone calls needed - customers get answers without interrupting their day
- No email waiting - instant responses instead of waiting hours
- Context-aware help - AI knows what page they’re on
- Easy to use - familiar chat interface everyone understands
Increase Sales and Conversions
- Answer purchase questions immediately
- Reduce cart abandonment - help customers complete purchases
- Provide product recommendations based on what they’re viewing
- Collect leads - get contact info from interested visitors
Professional Image
- Modern customer service - shows you’re tech-savvy and customer-focused
- Always responsive - never miss an opportunity to help
- Consistent branding - matches your website design
- Competitive advantage - many businesses still don’t offer instant chat
Setting Up Your Website Widget
Step 1: Access Widget Settings
- Go to your Channels page in your dashboard
- Click on the “Website Chat” card
- Click “Connect” or “Manage” button
- You’ll see the widget configuration page
Step 2: Configure Basic Settings
Choose Your AI Agent
- Select which agent will handle website conversations
- Same agent across all pages or different agents for different sections
- Make sure agent is active and properly configured
Set Up Widget Appearance
Widget Color:- Choose a color that matches your website design
- Default is chat-friendly blue, but any color works
- Consider your brand colors for consistency
- Test contrast - make sure it’s visible but not intrusive
- Bottom Right (most popular) - doesn’t interfere with navigation
- Bottom Left - good for right-to-left reading cultures
- Top Right - more prominent but might block content
- Top Left - least common but works for some designs
- Small - subtle and unobtrusive
- Medium (recommended) - good balance of visibility and space
- Large - very prominent, good for chat-focused businesses
Step 3: Customize Messages and Behavior
Welcome Message
What it is: The first message customers see when they open the chat Good welcome messages:- “Hi! How can I help you today?”
- “Welcome! Any questions about our products?”
- “Hello! I’m here to help with any questions you have.”
- “Hi there! Looking for something specific?”
- Keep it short and friendly
- Ask an open-ended question
- Match your brand’s tone
- Make it clear help is available
Pre-filled Message
What it is: Text that appears in the customer’s message box, ready to send Good pre-filled messages:- “Hello! I’m interested in your products and would like to know more.”
- “Hi! I have a question about…”
- “Hello! Can you help me with…”
- “Hi! I’d like to learn more about your services.”
- Helps customers start the conversation
- Reduces typing for customers
- Ensures you get useful context
- Increases engagement rates
Call-to-Action Text
What it is: Text that appears on the chat button before customers click it Good call-to-action examples:- “Chat with us”
- “Need help? Ask here!”
- “Questions? We’re here!”
- “Get instant help”
- “Ask us anything”
Step 4: Advanced Configuration
Operating Hours (Optional)
- Set business hours when human agents are available
- Different messages for business hours vs. after hours
- Timezone settings to match your location
- Holiday schedules for special dates
Customer Information Collection
- Ask for name - personalizes the conversation
- Request email - for follow-up if needed
- Phone number - for urgent issues
- Company name - for B2B businesses
Step 5: Get Your Embed Code
- Click “Get Embed Code” button
- Copy the code that appears (it’s automatically highlighted)
- Code looks like this:
Step 6: Add Code to Your Website
For Most Websites
- Open your website editor (WordPress, Squarespace, Wix, etc.)
- Go to the HTML/Code section (usually in settings or advanced)
- Look for “Before
</body>tag” or “Footer Scripts” section - Paste the code there
- Save and publish your changes
For WordPress
- Go to Appearance > Theme Editor
- Edit footer.php file
- Find the
</body>tag - Paste code just before the
</body>tag - Update file
For Shopify
- Go to Online Store > Themes
- Click “Actions” > “Edit Code”
- Open theme.liquid file
- Find the
</body>tag - Paste code before the
</body>tag - Save
For Custom Websites
- Open your website files
- Find the main template file (usually index.html or similar)
- Locate the
</body>tag - Paste code right before the
</body>tag - Upload changes to your server
Step 7: Test Your Widget
- Visit your website in a private/incognito browser window
- Look for the chat widget in the position you selected
- Click the chat widget to open it
- Send a test message to see if your AI responds
- Check your inbox to see if the conversation appears
Customizing Widget Behavior
Live Preview
What it is: See exactly how your widget will look and work before putting it on your website How to use it:- Make changes to settings on the left
- See immediate results in the preview on the right
- Test different messages and responses
- Try different colors and positions
- Ensure everything works before going live
Branding Options
Widget Icon
- Upload custom icon - your logo or brand symbol
- Use default chat icon - universal and recognizable
- Consider size - icon should be clear at small sizes
- Match your brand - consistent with website design
Colors and Styling
- Primary color - main widget color
- Text colors - ensure good readability
- Match website theme - consistent look and feel
- Test on different backgrounds - make sure it’s always visible
Response Behavior
AI Agent Settings
- Response speed - how quickly AI responds
- Conversation style - formal vs. casual
- Escalation triggers - when to suggest human help
- Knowledge base integration - what information AI can access
Human Handoff
- When to offer human help - complex questions, complaints, etc.
- How to transition - smooth handoff from AI to human
- Business hours consideration - different options when humans aren’t available
- Contact information - alternative ways to reach you
Managing Widget Conversations
In Your Inbox
Website conversations appear just like any other channel:- Same inbox - all conversations in one place
- Channel indicator - shows it came from website widget
- Page context - see what page customer was on
- Visitor information - location, device, browser
Taking Over Conversations
When to step in:- Customer asks for human help
- AI can’t answer the question
- Complex technical issues
- Sales opportunities that need personal touch
- Click on the conversation in your inbox
- Click “Take Over” button
- Introduce yourself to the customer
- Continue the conversation personally
Conversation Analytics
Track important metrics:- Number of conversations started through widget
- Response times - how quickly customers get help
- Resolution rates - how many issues are solved
- Customer satisfaction - feedback on service quality
Common Widget Setup Issues
”Widget not appearing on website”
Possible causes:- Code not added correctly
- Code in wrong location
- Website caching issues
- Browser blocking scripts
- Double-check code placement - should be before
</body>tag - Clear website cache if using caching plugins
- Try different browser or incognito mode
- Check browser console for error messages
- Contact support with your website URL
”Widget appears but doesn’t work”
Possible causes:- AI agent not connected properly
- Agent is paused or disabled
- Network connectivity issues
- Configuration errors
- Check agent status - make sure it’s active
- Verify widget settings - ensure everything is configured
- Test from different device/network
- Check inbox - messages might be arriving but responses failing
- Review agent configuration - ensure it has proper instructions
”Widget looks wrong on mobile”
Possible causes:- Size settings not mobile-optimized
- Position conflicts with mobile navigation
- CSS conflicts with website theme
- Try different size setting - smaller often works better on mobile
- Test different positions - bottom corners usually work best
- Check on actual mobile devices - not just browser resize
- Contact support if issues persist
Best Practices for Website Widgets
Placement and Design
- Don’t be intrusive - widget should help, not annoy
- Consider mobile users - ensure it works well on all devices
- Match website design - should feel like part of your site
- Test on different pages - make sure it works everywhere
Customer Experience
- Quick response times - customers expect instant replies
- Helpful first interaction - make sure welcome message is useful
- Easy escalation - clear path to human help when needed
- Respectful of privacy - don’t ask for unnecessary information
Business Benefits
- Monitor performance - track how widget affects your business
- Train your AI - improve responses based on common questions
- Use conversation insights - learn what customers really want
- Promote the feature - let customers know chat help is available
Content Strategy
- Keep messages conversational - friendly but professional
- Be specific and helpful - generic responses frustrate customers
- Offer alternatives - if AI can’t help, suggest other options
- Follow up - ensure customer questions are fully answered