Embedding Wabee AI Agent Chat on Your Website
Overview
This guide will walk you through the process of embedding your Wabee AI agent chat interface on any website. The embedding feature allows your users to interact with your agent directly from your website.
Enabling the Embedding Feature
- Navigate to your agent's settings page
- Click on the Integrations tab
- Locate the embedding feature toggle switch
- Enable the toggle to activate embedding functionality
Implementation Guide
Step 1: Access Embed Code
- After enabling the embedding feature, click on the How to Embed button
- You will be presented with the necessary code snippets and configuration options
Step 2: Add the Code to Your Website
Add the following code to the <body>
section of your website:
<!-- Create a container for the chat -->
<div id="wabee-chat-container"></div>
<!-- Load the Wabee Chat widget -->
<script src="https://platform.wabee.ai/scripts/wabee-chat-browser.umd.js"></script>
<script type="text/javascript">
window.WabeeChat.init({
target: '#wabee-chat-container',
apiKey: 'your_client_id_here',
agentUrl: 'https://data-analysis-agent.your_domain.ai/core/v1',
width: '100%',
height: '100%',
sseUrl: 'https://notifications-hub.wabee.ai/events'
});
</script>
Step 3: Configure the Integration
- Replace 'your_client_id_here' with your actual Client ID as shown in your account
- Update the
agentUrl
to point to your specific agent endpoint - Adjust the
width
andheight
parameters as needed for your website layout
Step 4: Optional Configuration Parameters
You can customize the chat widget behavior using these optional parameters:
<script type="text/javascript">
window.WabeeChat.init({
target: '#wabee-chat-container',
apiKey: 'your_client_id_here',
agentUrl: 'https://data-analysis-agent.your_domain.ai/core/v1',
width: '100%',
height: '100%',
sseUrl: 'https://notifications-hub.wabee.ai/events',
// Optional: Hide status text in chat interface
showStatusText: false,
// Optional: Enable CSS state classes for custom styling
enableStateClasses: true
});
</script>
Configuration Options
Parameter | Type | Default | Description |
---|---|---|---|
target |
string | - | Required. CSS selector for the container element where the chat will be rendered |
apiKey |
string | - | Required. Your Wabee API key or client ID |
agentUrl |
string | - | Required. URL endpoint for your specific agent |
width |
string | "100%" |
Width of the chat widget (CSS units) |
height |
string | "100%" |
Height of the chat widget (CSS units) |
requestInterceptor |
function | - | Optional. Function to intercept and modify requests |
showStatusText |
boolean | true |
Optional. Controls whether status text is displayed in the chat interface |
enableStateClasses |
boolean | false |
Optional. Enables CSS state classes on the chat wrapper for custom styling |
Advanced Customization
Custom Styling with State Classes
When enableStateClasses
is set to true
, the chat widget automatically applies CSS classes to the chat wrapper based on the current state:
wabee-chat-idle
- Chat is inactive and ready for inputwabee-chat-processing
- Processing user messagewabee-chat-generating
- AI agent is generating a responsewabee-chat-streaming
- AI agent is streaming text responsewabee-chat-loading
- Chat is loadingwabee-chat-session-loading
- Session data is loading
For detailed styling examples and implementation guidance, see the Custom Styling Guide.
Security Configuration
- Set Allowed Origins:
- In your agent settings, specify the allowed domains that can embed the chat
- This is a crucial security measure to prevent unauthorized embedding
- Implement proper authentication and authorization in your application
- Regularly review and update your security settings
Testing and Monitoring
- After implementation, thoroughly test the chat functionality on your website
- Monitor the performance and user interactions
- Make adjustments to the configuration as needed based on usage patterns
Troubleshooting
- Ensure the embedding feature is enabled
- Verify the iframe code is correctly placed in your website's HTML
- Check your website's Content Security Policy (CSP) settings if the embed doesn't load
- Confirm that your domain is listed in the Allowed Origins settings
- If you are getting 401 or 403 errors when running the chat in a local environment, check if your browser is sending the request with Origin http://localhost or http://127.0.0.1. If you use both interchangeably, you may need to add both to the Allowed Origins settings.