Skip to content

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

  1. Navigate to your agent's settings page
  2. Click on the Integrations tab
  3. Locate the embedding feature toggle switch
  4. 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

  1. Replace 'your_client_id_here' with your actual Client ID as shown in your account
  2. Update the agentUrl to point to your specific agent endpoint
  3. Adjust the width and height parameters as needed for your website layout

Security Configuration

  1. Set Allowed Origins:
  2. In your application settings, specify the allowed domains that can embed the chat

  3. This is a crucial security measure to prevent unauthorized embedding

  4. Implement proper authentication and authorization in your application

  5. Regularly review and update your security settings

Testing and Monitoring

  1. After implementation, thoroughly test the chat functionality on your website
  2. Monitor the performance and user interactions
  3. 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.