Back to Documentation
Website Widget Integration
Embed an AI chatbot on your website
Quick Start
Get your chatbot live on your website in under 5 minutes with just a few lines of code.
Step 1: Get Your Embed Code
- 1Navigate to Dashboard → Chatbots
- 2Select your chatbot and go to Settings → Widget
- 3Copy the embed code provided
Basic Installation
Embed Code
<script
src="https://cdn.agentpro.chat/widget.js"
data-chatbot-id="YOUR_CHATBOT_ID"
defer>
</script>Important
Place the script tag just before the closing </body> tag in your HTML for optimal performance. Replace YOUR_CHATBOT_ID with your actual chatbot ID from the dashboard.
Advanced Configuration
Customize the widget behavior, appearance, and functionality with advanced options.
Configuration Options
<script>
window.AgentProConfig = {
chatbotId: 'YOUR_CHATBOT_ID',
position: 'bottom-right', // or 'bottom-left'
primaryColor: '#6366f1',
greeting: 'Hi! How can I help you today?',
placeholder: 'Type your message...',
showBranding: true,
autoOpen: false,
autoOpenDelay: 5000, // ms
collectUserInfo: true,
userInfoFields: ['name', 'email'],
};
</script>
<script src="https://cdn.agentpro.chat/widget.js" defer></script>Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| chatbotId | string | required | Your unique chatbot identifier |
| position | string | 'bottom-right' | Widget position on screen |
| primaryColor | string | '#6366f1' | Primary brand color (hex) |
| autoOpen | boolean | false | Auto-open widget after delay |
| autoOpenDelay | number | 5000 | Delay in milliseconds before auto-open |
| collectUserInfo | boolean | true | Show pre-chat form for user info |
JavaScript API
Control the widget programmatically with our JavaScript API.
API Methods
// Initialize chat programmatically
AgentPro.init({
chatbotId: 'YOUR_CHATBOT_ID',
onReady: () => console.log('Widget ready'),
onMessage: (message) => console.log('New message:', message),
});
// Open/close widget
AgentPro.open();
AgentPro.close();
AgentPro.toggle();
// Send message programmatically
AgentPro.sendMessage('Hello from my app!');
// Set user information
AgentPro.setUser({
name: 'John Doe',
email: 'john@example.com',
customData: { plan: 'premium' }
});Customization
Appearance
- Custom colors and branding
- Custom avatar and bot name
- Light and dark mode support
- Custom CSS overrides
Behavior
- Auto-open on page load
- Trigger on scroll or exit intent
- Mobile-responsive design
- Keyboard accessibility
Troubleshooting
Widget not appearing?
- • Verify the script is placed before the closing
</body>tag - • Check that your chatbot ID is correct
- • Ensure your domain is whitelisted in chatbot settings
- • Check browser console for JavaScript errors
Widget not responding?
- • Verify your chatbot has a knowledge base configured
- • Check that the AI model is properly set up
- • Ensure you have remaining API credits