Website Widget Integration
The KnowSync website widget allows you to embed an intelligent AI chat assistant directly on your website. Visitors can ask questions and get instant answers from your knowledge base, providing 24/7 support and improving user experience.
Quick Start
1. Create a Widget
- Navigate to your organization's Widget settings in the dashboard
- Click "Create widget" to open the widget configuration dialog
- Configure your widget settings (see Configuration below)
- Click "Create widget" to save
2. Embed on Your Website
After creating a widget, you'll receive an embed code. Simply copy and paste this code into your website's HTML, just before the closing </body> tag:
<script src="https://www.knowsync.ai/embed.js?key=YOUR_WIDGET_KEY"></script>
That's it! The widget will automatically appear on your website.
Configuration
General Settings
- Widget Name: Display name for the chat assistant
- Welcome Message: Initial greeting shown to visitors
- Suggested Prompts: Quick action buttons to guide conversations
- Allowed Domains: Restrict widget usage to specific domains (optional)
Knowledge Sources
Choose what knowledge your widget can access:
- Collections: Include entire document collections
- Documents: Select specific individual documents
AI Configuration
- AI Model: Select from available models (GPT-4, Claude, Gemini, etc.)
- System Prompt: Custom instructions for the AI assistant
- Maximum Sources: Limit cited sources per response (1-10)
Appearance Customization
Colors
- Primary Color: Main brand color
- Text Color: Text and icon colors
- Background Colors: Main and secondary backgrounds
- Message Colors: User and assistant message styling
- Border Color: Widget border and separator colors
- Accent Color: Interactive element highlights
Launcher
- Position: Bottom left or bottom right
- Shape: Circle or rounded square
- Icon Type: Default chat icon, custom URL, or organization avatar
Display Options
- Show Chat History: Persist conversations across sessions
- Show Sources: Display document citations in responses
- Show "Powered by KnowSync": Attribution footer
Advanced Settings
Rate Limiting
Control widget usage to manage costs and ensure fair access:
- Max Requests: Total requests allowed
- Time Window: Reset period in minutes
- Per Visitor: Apply limits per individual visitor
Widget Management
Viewing Widgets
Access your organization's widgets from the dashboard. Each widget shows:
- Configuration status
- Usage statistics
- Embed code
- Quick actions (edit, copy key, delete)
Editing Widgets
Click the edit button on any widget to modify its configuration. Changes take effect immediately for new conversations.
Security
- API Key Rotation: Generate new embed keys if compromised
- Domain Restrictions: Limit widget usage to approved domains
- Rate Limiting: Prevent abuse and control costs
Best Practices
User Experience
- Clear Welcome Message: Set expectations for what the AI can help with
- Suggested Prompts: Guide users toward common questions
- Branding: Match widget colors to your website design
Content Strategy
- Curated Knowledge: Select relevant documents and collections
- Regular Updates: Keep knowledge base current for accurate responses
- Quality Control: Review and refine AI responses over time
Performance
- Rate Limiting: Balance accessibility with cost control
- Domain Restrictions: Prevent unauthorized usage
- Monitoring: Track usage patterns and user satisfaction
Troubleshooting
Widget Not Loading
- Verify the embed code is correctly placed in your HTML
- Check that the domain is allowed (if restrictions are set)
- Ensure the widget API key is valid and active
AI Not Responding
- Confirm knowledge sources are selected and contain content
- Check rate limits haven't been exceeded
- Verify AI model configuration is correct
Styling Issues
- Reset to default colors if customization causes problems
- Ensure CSS conflicts don't affect widget positioning
- Test across different browsers and devices
API Reference
Embed Parameters
<script src="https://www.knowsync.ai/embed.js?key=YOUR_WIDGET_KEY"></script>
Parameters:
key: Your widget's public API key (required)
JavaScript API
The widget exposes a global KnowSyncWidget object for advanced control:
// Check if widget is loaded
if (window.KnowSyncWidget) {
// Widget is ready
}
// Programmatically open/close widget
window.KnowSyncWidget.open();
window.KnowSyncWidget.close();
Support
Need help with your widget? Contact our support team or check our community forums for common solutions and best practices.