Chatbot Widget Integration Guide

Get Your Access Token

First, you need your unique API key to authenticate the widget.

How to get your API key:

1. Login to the admin dashboard at /admin
2. Type /apikey in the chat
3. Copy your API key (keep it secure!)

Add Widget Script to Your Website

Add these two script tags to your HTML page, just before the closing </body> tag:

<!-- Chainlit Chatbot Widget -->
<script src="https://YOUR-CHATBOT-URL.com/copilot/index.js"></script>
<script>
    window.mountChainlitWidget({
        chainlitServer: "https://YOUR-CHATBOT-URL.com",
        accessToken: "YOUR_API_KEY_HERE",
    });
</script>

Configuration Options:

chainlitServer - Your chatbot service URL
accessToken - Your unique API key from Step 1

Example: Complete HTML Page

Here's a complete example showing where to place the widget code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Your content here...</p>

    <!-- Chatbot Widget (add before closing body tag) -->
    <script src="https://YOUR-CHATBOT-URL.com/copilot/index.js"></script>
    <script>
        window.mountChainlitWidget({
            chainlitServer: "https://YOUR-CHATBOT-URL.com",
            accessToken: "YOUR_API_KEY_HERE",
        });
    </script>
</body>
</html>

For Local Development (localhost)

If you're testing on your local machine, use http://localhost:8000 as the server URL:

<script src="http://localhost:8000/copilot/index.js"></script>
<script>
    window.mountChainlitWidget({
        chainlitServer: "http://localhost:8000",
        accessToken: "YOUR_API_KEY_HERE",
    });
</script>

✓

Important Notes

🔒 Security: Keep your API key secure. Each key is tied to your account and gives access to your chatbot data.

💡 Testing: You can test the widget on this page - look for the chat icon in the bottom-right corner!

🎨 Customization: The widget automatically adapts to your website's theme. No additional styling required.

🚀 See It In Action

The chatbot widget is already live on this page! Click the chat icon in the bottom-right corner to start a conversation.

🤖 Chatbot Widget Integration