Chatbot Plugin Documentation

This document provides detailed information on how to integrate and configure the Chatbot plugin in your web application.

Integration

To integrate the Chatbot plugin into your website, include the following script in your HTML file:

<script>
(function () {
    var chatbotConfig = {
        primaryTextColor: "#FFFFFF",
        primaryBackgroundColor: "#212121",
        secondaryTextColor: "#212121",
        secondaryBackgroundColor: "#F2F4F5",
        botName: "Chatty",
        welcomeMessage: "Hello, I'm Chatty! 👋 How can I help you?",
        botImage: "http://example.com/icon.png",
        enabled: true,
        botDescription: "Welcome to your personal assistant. Ask me anything and I'll guide you.",
        wsApiUrl: "wss://test.execute-api.us-east-1.amazonaws.com/dev",
        apiUrl: "https://test.execute-api.us-east-1.amazonaws.com/api",
        apiToken: "api token",
        botId: "bot id",
        modelName: "claude-v3-haiku",
    };

    var script = document.createElement("script");
    script.src = "http://example.com/chatbot.js";
    document.head.appendChild(script);

    script.onload = function () {
        if (window.initializeChatbot) {
            window.initializeChatbot(chatbotConfig);
        }
    };
})();
</script>

Configuration

The chatbotConfig object contains the following properties:

primaryTextColor: The primary text color of the chatbot. Default is #FFFFFF.
primaryBackgroundColor: The primary background color of the chatbot. Default is #212121.
secondaryTextColor: The secondary text color of the chatbot. Default is #212121.
secondaryBackgroundColor: The secondary background color of the chatbot. Default is #F2F4F5.
botName: The name of the chatbot. Default is "Chatty".
welcomeMessage: The welcome message displayed by the chatbot. Default is "Hello, I'm Chatty! 👋 How can I help you?".
botImage: The URL of the bot's image. Example. "http://example.com/icon.png".
enabled: A boolean indicating if the chatbot is enabled. Default is true.
botDescription: A brief description of the bot. Default is "Welcome to your personal assistant. Ask me anything and I'll guide you.".
wsApiUrl: The WebSocket API URL for the chatbot. Example: "wss://test.execute-api.us-east-1.amazonaws.com/dev".
apiUrl: The API URL for the chatbot. Example: "https://test.execute-api.us-east-1.amazonaws.com/api".
apiToken: The API token for authentication. Example: "api token".
botId: The unique identifier for the bot. Example: "bot id".
modelName: The name of the model used by the chatbot. Example: "claude-v3-haiku".

Loading the Chatbot

The script will load the chatbot JavaScript file from the provided URL and initialize the chatbot with the configuration provided. Ensure the chatbot configuration is correct and the URLs are accessible from your web application.

Customization

You can customize the appearance and behavior of the chatbot by modifying the chatbotConfig object. Update the values as per your requirements before including the script in your HTML file.

Example

Below is an example of a complete HTML file integrating the chatbot plugin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Integration Example</title>
</head>
<body>
    <!-- Chatbot Script -->
    <script>
        (function () {
            var chatbotConfig = {
                primaryTextColor: "#FFFFFF",
                primaryBackgroundColor: "#212121",
                secondaryTextColor: "#212121",
                secondaryBackgroundColor: "#F2F4F5",
                botName: "Chatty",
                welcomeMessage: "Hello, I'm Chatty! 👋 How can I help you?",
                botImage: "http://example.com/icon.png",
                enabled: true,
                botDescription: "Welcome to your personal assistant. Ask me anything and I'll guide you.",
                wsApiUrl: "wss://test.execute-api.us-east-1.amazonaws.com/dev",
                apiUrl: "https://test.execute-api.us-east-1.amazonaws.com/api",
                apiToken: "api token",
                botId: "bot id",
                modelName: "claude-v3-haiku",
            };

            var script = document.createElement("script");
            script.src = "http://example.com/chatbot.js";
            document.head.appendChild(script);

            script.onload = function () {
                if (window.initializeChatbot) {
                    window.initializeChatbot(chatbotConfig);
                }
            };
        })();
    </script>
</body>
</html>