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

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 input
  • wabee-chat-processing - Processing user message
  • wabee-chat-generating - AI agent is generating a response
  • wabee-chat-streaming - AI agent is streaming text response
  • wabee-chat-loading - Chat is loading
  • wabee-chat-session-loading - Session data is loading

For detailed styling examples and implementation guidance, see the Custom Styling Guide.

Security Configuration

  1. 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
  2. Implement proper authentication and authorization in your application
  3. 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.