​

Website Chat Widget

​

Overview

• Real-time conversations with AI assistants
• Rich interactions with text, buttons, and media
• Seamless handoff to human agents when needed
• Visitor information collection
• Persistent conversation history

​

Setting Up the Chat Widget

​

Prerequisites

• A chat assistant already created and tested
• Admin access to your website to add the widget code
• Clear goals for how the widget will be used

​

Step 1: Create a New Channel

1. Navigate to Communication Channels in the sidebar
2. Click + Add Channel button
3. Select Website Chat Widget
4. Click Continue

​

Step 2: Basic Configuration

1. Channel Name: Give your widget a descriptive name (internal only)
2. Assistant: Select the AI assistant that will power this widget
3. Website URLs: Enter the domains where this widget will be used
   • This is a security measure to prevent unauthorized use
   • Add multiple domains if needed (e.g., staging and production)

​

Step 3: Appearance Customization

​

General Appearance

1. Theme: Choose between Light, Dark, or System (follows user’s preferences)
2. Primary Color: Select a color that matches your brand
3. Widget Position: Choose where the widget appears (bottom-right, bottom-left, etc.)
4. Border Radius: Adjust the roundness of the widget corners
5. Font: Select from available font options or use your website’s font

​

Widget State

1. Closed State:
   • Icon or logo
   • Widget button size
   • Button tooltip text
2. Open State:
   • Header title and subtitle
   • Header logo/avatar
   • Window size (height and width)
   • Maximum/minimum size constraints

​

Step 4: Behavior Settings

1. Initial Message: Set the first message users see when opening the widget
2. Auto-Open: Configure if and when the widget should automatically open
   • On page load
   • After time delay
   • On specific pages
   • Based on user behavior
3. Pre-Chat Form: Collect information before starting a conversation
   • Name
   • Email
   • Custom fields
   • Required vs. optional fields
4. File Attachments: Enable/disable file sharing
   • Allowed file types
   • Maximum file size
   • Usage limits
5. Operation Hours: Set when the widget is available
   • 24/7 operation
   • Business hours only
   • Custom schedule
   • Different behavior outside operating hours

​

Step 5: Advanced Options

1. Persistent Conversations: Allow returning users to continue previous conversations
2. User Identification: Connect known user information
3. Custom Variables: Pass website data to the assistant for context
4. Analytics Integration: Connect with Google Analytics or other tracking
5. Language Detection: Automatically detect user language

​

Step 6: Human Handoff Settings

1. Handoff Triggers:
   • User request
   • AI confidence threshold
   • Specific topics or keywords
   • Number of messages exchanged
2. Handoff Behavior:
   • Notification method
   • Queue messaging
   • Routing rules
   • Availability status

​

Step 7: Generate and Install Code

1. Click Generate Code button
2. Copy the provided JavaScript code
3. Add the code to your website before the closing </body> tag

<!-- Flowbotic Chat Widget -->
<script>
  window.flowboticSettings = {
    widgetId: "your-widget-id",
    primaryColor: "#3B82F6",
    position: "bottom-right",
    theme: "light"
  };
  
  (function(d) {
    var s = d.createElement("script");
    s.src = "https://cdn.flowbotic.com/widget/v1/flowbotic.js";
    s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s);
  })(document);
</script>
<!-- End Flowbotic Chat Widget -->

​

Advanced Integration Options

​

Custom Styling with CSS

:root {
  --flowbotic-primary-color: #3B82F6;
  --flowbotic-text-color: #1F2937;
  --flowbotic-background-color: #FFFFFF;
  --flowbotic-header-background: #F3F4F6;
  --flowbotic-border-radius: 12px;
  --flowbotic-font-family: 'Inter', sans-serif;
  --flowbotic-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

​

JavaScript API

// Open the widget
window.Flowbotic.open();

// Close the widget
window.Flowbotic.close();

// Toggle widget visibility
window.Flowbotic.toggle();

// Send a message programmatically
window.Flowbotic.sendMessage("Hello from my website!");

// Set user identity
window.Flowbotic.identify({
  name: "John Doe",
  email: "[email protected]",
  userId: "12345",
  metadata: {
    plan: "premium",
    signupDate: "2025-01-15"
  }
});

// Set custom variables
window.Flowbotic.setVariables({
  currentPage: "/products",
  cartValue: 99.99,
  itemCount: 3
});

// Listen for events
window.Flowbotic.on('ready', () => {
  console.log('Chat widget loaded');
});

window.Flowbotic.on('message:received', (message) => {
  console.log('New message:', message);
});

window.Flowbotic.on('conversation:ended', () => {
  console.log('Conversation ended');
});

​

URL Parameters

• ?flowbotic-open=true - Opens the widget automatically
• ?flowbotic-message=Hello - Pre-fills a user message
• ?flowbotic-hide=true - Temporarily hides the widget

https://yourwebsite.com/contact?flowbotic-open=true&flowbotic-message=I%20need%20help%20with%20my%20order

​

Testing Your Chat Widget

1. Basic Functionality:
   • Does the widget open and close properly?
   • Does the assistant respond appropriately?
   • Do all buttons and interactive elements work?
2. Appearance Testing:
   • Test on different devices (desktop, tablet, mobile)
   • Verify the widget looks good in both light and dark modes
   • Check that it respects your branding guidelines
3. Integration Testing:
   • Verify custom variables are properly passed
   • Test user identification features
   • Ensure analytics tracking works correctly
4. Conversation Flows:
   • Test common user scenarios
   • Verify knowledge retrieval is accurate
   • Test human handoff functionality

​

Monitoring and Analytics

1. Navigate to the Analytics section in the sidebar
2. Select the Channels tab
3. Choose your Website Chat Widget
4. View metrics including:
   • Conversation volume
   • Average conversation length
   • Most common topics
   • User satisfaction ratings
   • Handoff frequency

​

Best Practices

​

Widget Placement and Design

• Consistent Placement: Keep the widget in the same position across your site
• Contrasting Colors: Ensure the widget button stands out without clashing
• Clear Purpose: Make it obvious what the widget is for
• Non-Intrusive: Avoid interrupting the user experience
• Mobile-Friendly: Test thoroughly on mobile devices

​

Conversation Design

• Clear Welcome Message: Set expectations in the initial message
• Conversational Tone: Use natural language appropriate for your brand
• Helpful Fallbacks: Have good responses for queries the assistant can’t answer
• Guided Options: Offer button choices for common inquiries
• Appropriate Length: Keep responses concise for chat format

​

User Experience

• Fast Response Times: Optimize for quick initial responses
• Typing Indicators: Show when the assistant is “typing”
• Clear Human Handoff: Make it obvious when a human takes over
• Persistent Context: Remember returning users and their history
• Easy Restart: Provide a way to start a new conversation

​

Performance Optimization

• Lazy Loading: The widget script loads only when needed
• Caching Strategy: Implement proper caching for assets
• Minimal Dependencies: Avoid adding unnecessary code
• Compressed Assets: Use minified code and optimized images
• Content Delivery Network: Use the provided CDN for reliability

​

Troubleshooting

​

Next Steps