Documentation Index
Fetch the complete documentation index at: https://docs.duckie.ai/llms.txt
Use this file to discover all available pages before exploring further.
Add an AI-powered chat widget directly to your website for instant customer support.
Capabilities
| Capability | Supported |
|---|
| Knowledge Source | ✗ |
| Deployment Trigger | ✓ Chat conversations |
| Tool Actions | ✓ Send messages |
Setup
- Go to Deploy
- Click Create Deployment
- Select your agent
- Choose Website Widget as the trigger
- Configure appearance and behavior
- Click Create
Step 2: Get the Embed Code
After creating the deployment:
- Click on the deployment to open settings
- Go to the Widget tab
- Copy the embed code
Step 3: Add to Your Website
Add the embed code before the closing </body> tag:
<script>
(function(d,w){
w.DuckieWidget={key:"wgt_cTqeFN4LNFCZORc3"};
var s=d.createElement('script');
s.src='https://app.useduckie.ai/widget/embed.js';
s.async=true;
d.head.appendChild(s);
})(document,window);
</script>
YOUR_DEPLOYMENT_ID with your actual deployment ID.
Customization
Appearance
Customize the widget to match your brand:
| Option | Description |
|---|
| Primary color | Button and header color |
| Position | Bottom-right or bottom-left |
| Welcome message | Initial greeting shown to visitors |
| Placeholder text | Input field placeholder |
Behavior
Configure how the widget behaves:
| Option | Description |
|---|
| Auto-open | Open automatically after X seconds |
| Show on pages | Specific pages or all pages |
| Business hours | Only show during certain hours |
| Require email | Ask for email before starting chat |
Advanced Configuration
JavaScript API
Control the widget programmatically:
// Open the widget
DuckieWidget('open');
// Close the widget
DuckieWidget('close');
// Send a message
DuckieWidget('sendMessage', 'Hello!');
// Set user information
DuckieWidget('identify', {
email: 'user@example.com',
name: 'John Doe',
customFields: {
plan: 'premium',
accountId: '12345'
}
});
Passing Context
Pass contextual information to help the agent:
DuckieWidget('setContext', {
currentPage: window.location.pathname,
product: 'Enterprise Plan',
userId: '12345'
});
Best Practices
Strategic Placement
- Show on pages where users need help (pricing, checkout, docs)
- Consider hiding on landing pages to reduce distraction
- Use page-specific welcome messages
Provide Context
Pass user and page context so the agent can personalize responses:
- User’s plan or tier
- Current page or product
- Account information
Set Expectations
Use the welcome message to set expectations:
- “Hi! I’m an AI assistant. How can I help?”
- Mention response times for complex issues
Example Implementations
Documentation Site
DuckieWidget('init', {
deploymentId: 'YOUR_ID',
welcomeMessage: 'Need help with our docs? Ask me anything!',
position: 'bottom-right'
});
// Pass current doc page
DuckieWidget('setContext', {
currentDoc: document.title
});
SaaS Dashboard
DuckieWidget('init', {
deploymentId: 'YOUR_ID',
welcomeMessage: 'Hi {{user.name}}! How can I help?'
});
// Identify the user
DuckieWidget('identify', {
email: currentUser.email,
name: currentUser.name,
plan: currentUser.subscription.plan
});
Troubleshooting
- Check browser console for JavaScript errors
- Verify the deployment ID is correct
- Ensure the script is loading (check Network tab)
Slow to load
- The widget script is loaded asynchronously
- Initial load may take 1-2 seconds
- Subsequent loads are cached
Styling conflicts
- Widget uses Shadow DOM to isolate styles
- If issues persist, check for global CSS resets
