Web Chat Widget

Web Chat Integration

Embed your AI integration directly on your website with a customizable chat widget that provides instant support to your visitors.

Basic Setup

1. Configure Widget

   Customize the appearance of your widget:

   • Theme: Light, dark, or custom colors
   • Position: Bottom-right, bottom-left, etc.
   • Initial State: Expanded or collapsed
   • Welcome Message: Customize the initial greeting
   • Widget Icon: Upload a custom icon
2. Get Embed Code

   Navigate to the Embed tab and copy the provided JavaScript snippet:

   <script src="https://embed.knowflow.in/js/widget.js" data-app-id="YOUR_APP_ID" defer></script>

3. Add to Website

   Paste the JavaScript snippet into your website's HTML, just before the closing </body> tag.

4. Test Implementation

   Visit your website to verify the widget appears and functions correctly.

Widget Configuration Options

Appearance Settings

Customize your widget to match your brand:

Behavior Settings

Control how your widget behaves:

• Auto-open: Automatically open after X seconds
• Greeting Delay: Time before showing welcome message
• Sound Notifications: Enable/disable notification sounds
• Typing Indicators: Show when AI is responding

Advanced Configuration

window.KnowFlowConfig = {
  integrationId: "your-integration-id",
  websiteId: "your-website-id",
  primaryColor: "#007bff",
  position: "bottom-right",
  initialMessage: "Hi! How can I help you?",
  messagePlaceholder: "Type your message...",
  integrationName: "Support Assistant",
  integrationLogo: "https://your-domain.com/logo.png",
  showBranding: true,
  enableTriggerButtons: true
};

Styling and Customization

CSS Customization

Override default styles with custom CSS:

/* Custom widget button styling */
#knowflow-widget-container button {
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Custom chat dialog styling */
.knowflow-widget-dialog {
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

Responsive Design

The widget automatically adapts to different screen sizes:

• Desktop: Full-featured chat dialog
• Tablet: Optimized dialog size
• Mobile: Full-screen overlay on small devices

Next Steps

Best Practices

• Strategic Placement: Position the widget where users naturally look for help
• Clear Messaging: Use welcoming, helpful initial messages
• Brand Consistency: Match widget colors to your site's brand
• Mobile Testing: Always test on mobile devices
• Performance: Monitor page load impact and optimize if needed