Embedding in website
This guide explains how to embed your Waterflai chatbots directly into your website using our custom web component. This allows your users to interact with your chatbot without leaving your site.
Prerequisites
Before you begin, ensure you have:
A published Waterflai chatbot (Simple or Chatflow type)
An API key for authentication (see the "Integration with API" guide for details on creating API keys)
Embedding Process
Step 1: Access the Embedding Guide
In the Studio page, find your chatbot in the list.
Click the globe icon on your chatbot card to open the Embedding Guide modal.
Step 2: Copy the Embedding Code
In the Embedding Guide modal, you'll see a code snippet similar to this:
Click the copy button in the top-right corner of the code block to copy this code to your clipboard.
Step 3: Choose Your Display Mode
The chatbot can be displayed in two modes:
Widget Mode (Default)
The chatbot appears as a floating button that expands into a chat window when clicked. This is the default mode.
Inline Mode
The chatbot is embedded directly within your page layout. Add the inline-mode attribute and place the component within a container with specified dimensions:
Step 4: Customize the Embedding Code
Modify the copied code as follows:
Replace
YOUR_CHATBOT_IDwith your actual chatbot IDReplace
YOUR_API_KEYwith your Waterflai API keyAdjust other attributes as needed:
welcome-message: The initial message displayed by the chatbotheader-title: The title shown in the chatbot headerinput-placeholder: The placeholder text for the user input fieldprimary-color: The main color used in the chatbot interface (hex value)
Step 5: Add the Web Component Script
Ensure you include the Waterflai Chatbot web component script in your website. Add this line to your HTML <head> section:
Step 6: Insert the Embedding Code
Place the modified embedding code where you want the chatbot to appear on your website.
Customization Options
The <waterflai-chatbot> component accepts several attributes for customization:
Required Attributes
chatbot-id: The ID of your Waterflai chatbotapi-key: Your Waterflai API key
Optional Attributes
api-url: The URL of the Waterflai API (default: "https://api.waterflai.ai")chatbot-type: The type of your chatbot ("simple" or "chatflow")welcome-message: The initial message displayed by the chatbotheader-title: The title shown in the chatbot headerinput-placeholder: The placeholder text for the user input fieldprimary-color: The main color used in the chatbot interface (hex value, default: "#6366f1")inline-mode: Enable inline display mode (remove for widget mode)stream-response: (For Simple chatbots only) Enable streaming responsesinfo-message: Custom message displayed at the bottom of the chat interface
Display Mode Considerations
Widget Mode
Appears as a floating button on your website
Automatically adjusts position on mobile devices
Can be opened/closed by users
Ideal for most websites where the chat is a supplementary feature
Inline Mode
Embedded directly in your page layout
Requires a container with specified dimensions
Always visible to users
Perfect for dedicated chat pages or customer support sections
Troubleshooting
If you encounter issues with your embedded chatbot:
Verify that you're using the correct chatbot ID and API key.
Check your browser's console for any error messages.
Ensure the Waterflai web component script is properly loaded.
Test your API key separately to confirm it's active and has the necessary permissions.
By following these steps, you can successfully embed your Waterflai chatbot into your website, providing an interactive AI-powered chat experience for your users.
Last updated