Skip to main content
Add an AI-powered chat widget directly to your website for instant customer support.

​
Capabilities

CapabilitySupported
Knowledge Source✗
Deployment Trigger✓ Chat conversations
Tool Actions✓ Send messages

​
Setup

​
Step 1: Create a Widget Deployment

  1. Go to Deploy
  2. Click Create Deployment
  3. Select your agent
  4. Choose Website Widget as the trigger
  5. Configure appearance and behavior
  6. Click Create

​
Step 2: Get the Embed Code

After creating the deployment:
  1. Click on the deployment to open settings
  2. Go to the Widget tab
  3. Copy the embed code

​
Step 3: Add to Your Website

Add the embed code before the closing </body> tag: 
<script>
  (function(d,u,c,k,i,e){
    d.DuckieWidget=d.DuckieWidget||function(){(d.DuckieWidget.q=d.DuckieWidget.q||[]).push(arguments)};
    e=d.createElement(u);e.async=1;e.src='https://widget.duckie.ai/widget.js';
    i=d.getElementsByTagName(u)[0];i.parentNode.insertBefore(e,i);
    DuckieWidget('init',{deploymentId:'YOUR_DEPLOYMENT_ID'});
  })(document,'script');
</script>
Replace YOUR_DEPLOYMENT_ID with your actual deployment ID.

​
Customization

​
Appearance

Customize the widget to match your brand:
OptionDescription
Primary colorButton and header color
PositionBottom-right or bottom-left
Welcome messageInitial greeting shown to visitors
Placeholder textInput field placeholder

​
Behavior

Configure how the widget behaves:
OptionDescription
Auto-openOpen automatically after X seconds
Show on pagesSpecific pages or all pages
Business hoursOnly show during certain hours
Require emailAsk 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: '[email protected]',
  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

​
Widget not appearing

  • 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