​

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

1. Go to your Channels page in your dashboard
2. Click on the “Website Chat” card
3. Click “Connect” or “Manage” button
4. 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

Widget Position:

• 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

Widget Size:

• 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?”

Tips for welcome messages:

• 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.”

Benefits:

• 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

Balance: Don’t ask for too much info upfront - it can discourage people from starting a chat.

​

Step 5: Get Your Embed Code

1. Click “Get Embed Code” button
2. Copy the code that appears (it’s automatically highlighted)
3. Code looks like this:
   Copy

   <script src='...' data-url='...' data-id='...'></script>
   

​

Step 6: Add Code to Your Website

​

For Most Websites

1. Open your website editor (WordPress, Squarespace, Wix, etc.)
2. Go to the HTML/Code section (usually in settings or advanced)
3. Look for “Before </body> tag” or “Footer Scripts” section
4. Paste the code there
5. Save and publish your changes

​

For WordPress

1. Go to Appearance > Theme Editor
2. Edit footer.php file
3. Find the </body> tag
4. Paste code just before the </body> tag
5. Update file

​

For Shopify

1. Go to Online Store > Themes
2. Click “Actions” > “Edit Code”
3. Open theme.liquid file
4. Find the </body> tag
5. Paste code before the </body> tag
6. Save

​

For Custom Websites

1. Open your website files
2. Find the main template file (usually index.html or similar)
3. Locate the </body> tag
4. Paste code right before the </body> tag
5. Upload changes to your server

​

Step 7: Test Your Widget

1. Visit your website in a private/incognito browser window
2. Look for the chat widget in the position you selected
3. Click the chat widget to open it
4. Send a test message to see if your AI responds
5. 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

How to take over:

1. Click on the conversation in your inbox
2. Click “Take Over” button
3. Introduce yourself to the customer
4. 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

Solutions:

1. Double-check code placement - should be before </body> tag
2. Clear website cache if using caching plugins
3. Try different browser or incognito mode
4. Check browser console for error messages
5. 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

Solutions:

1. Check agent status - make sure it’s active
2. Verify widget settings - ensure everything is configured
3. Test from different device/network
4. Check inbox - messages might be arriving but responses failing
5. 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

Solutions:

1. Try different size setting - smaller often works better on mobile
2. Test different positions - bottom corners usually work best
3. Check on actual mobile devices - not just browser resize
4. 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

Remember: Your website widget is often the first personal interaction customers have with your business. Make it count by being helpful, responsive, and genuinely useful. The AI does the hard work - you just need to set it up thoughtfully!