Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

  1. A published Waterflai chatbot (Simple or Chatflow type)

  2. 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

  1. In the Studio page, find your chatbot in the list.

  2. 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="https://app.waterflai.ai/web_components/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.

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_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: 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

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:

  1. Verify that you're using the correct chatbot ID and API key.

  2. Check your browser's console for any error messages.

  3. Ensure the Waterflai web component script is properly loaded.

  4. 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 APINextAnalytics Overview

Last updated