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:

<body>
    <div class="container">
        <h1>Waterflai Simple Chatbot Integration</h1>
    </div>

    <!-- Include the Waterflai Chatbot web component -->
    <script src="waterflai-chat-web-component.js"></script>

    <!-- Initialize the chatbot with settings -->
    <waterflai-chatbot 
        id="myWaterflaiChatbot"
        chatbot-id="YOUR_CHATBOT_ID"
        api-key="YOUR_API_KEY"
        api-url="https://api.waterflai.ai"
        chatbot-type="simple"
        welcome-message="Welcome! How can I assist you today?"
        header-title="Chat with us"
        input-placeholder="Type your message..."
        primary-color="#6366f1"
        stream-response>
    </waterflai-chatbot>
</body>

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.

<waterflai-chatbot 
    chatbot-id="YOUR_CHATBOT_ID"
    api-key="YOUR_API_KEY"
    api-url="https://api.waterflai.ai"
    chatbot-type="simple"
    primary-color="#6366f1">
</waterflai-chatbot>

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:

<div style="width: 100%; height: 600px;">
    <waterflai-chatbot 
        chatbot-id="YOUR_CHATBOT_ID"
        api-key="YOUR_API_KEY"
        api-url="https://api.waterflai.ai"
        chatbot-type="simple"
        primary-color="#6366f1"
        inline-mode>
    </waterflai-chatbot>
</div>

Step 4: Customize the Embedding Code

Modify the copied code as follows:

Replace YOUR_CHATBOT_ID with your actual chatbot ID
Replace YOUR_API_KEY with your Waterflai API key
Adjust other attributes as needed:
- welcome-message: The initial message displayed by the chatbot
- header-title: The title shown in the chatbot header
- input-placeholder: The placeholder text for the user input field
- primary-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:

<script src="https://cdn.waterflai.ai/web-components/waterflai-chat-web-component.js"></script>

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 chatbot
api-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 chatbot
header-title: The title shown in the chatbot header
input-placeholder: The placeholder text for the user input field
primary-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 responses
info-message: Custom message displayed at the bottom of the chat interface

Display Mode Considerations

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.

For more advanced customization options and detailed API documentation, visit our Developer Portal.

By following these steps, you can successfully embed your Waterflai chatbot into your website, providing an interactive AI-powered chat experience for your users.

PreviousIntegration with API NextAnalytics Overview

Last updated 1 month ago

<body> <div class="container"> <h1>Waterflai Simple Chatbot Integration</h1> </div>  <script src="waterflai-chat-web-component.js"></script>  <waterflai-chatbot id="myWaterflaiChatbot" chatbot-id="YOUR_CHATBOT_ID" api-key="YOUR_API_KEY" api-url="https://api.waterflai.ai" chatbot-type="simple" welcome-message="Welcome! How can I assist you today?" header-title="Chat with us" input-placeholder="Type your message..." primary-color="#6366f1" stream-response> </waterflai-chatbot> </body>

<div style="width: 100%; height: 600px;"> <waterflai-chatbot chatbot-id="YOUR_CHATBOT_ID" api-key="YOUR_API_KEY" api-url="https://api.waterflai.ai" chatbot-type="simple" primary-color="#6366f1" inline-mode> </waterflai-chatbot> </div>