Chat Button Example

The chat button component renders a floating button that opens a modal chat.

Interactive Playground

Assistant
👋 Hi! How can I help?

Inline Integration Example

ChatButton can be placed inline in headers or navbars using position: 'static'

My Website Header

🔌 Backend Configuration

Search Settings
Feedback Settings
#4f46e5
None
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperIntern Chat Button</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- SuperIntern SDK -->
    <script src="https://cdn.superintern.ai/sdk/embed.global.js"></script>
    <script>
        // Wait for the SDK to load
        document.addEventListener('DOMContentLoaded', function() {
            // Check if SuperIntern is loaded
            if (window.SuperIntern) {
                initSuperIntern();
            } else {
                // If script hasn't loaded yet, wait for it
                window.addEventListener('load', initSuperIntern);
            }
        });

        function initSuperIntern() {
            window.SuperIntern.ChatButton({
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    environment: "test",
                    primaryBrandColor: "#4f46e5",
                    theme: {
                        colorMode: { type: "light" }
                    }
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 Hi! How can I help?",
                    quickQuestions: ["What can you help with?","How do I get started?","Tell me more"],
                    disclaimer: {
                        text: "My answers might not always be 100% accurate. Double-check when in doubt.",
                        link: "https://example.com/disclaimer"
                    }
                },
                label: "Chat with us",
                style: {
                          "position": "fixed",
                          "bottom": "20px",
                          "right": "20px"
                }
            });
        }
    </script>
</body>
</html>
import { useState, useEffect } from "react";
import Script from "next/script";

export default function MyApp() {
    const [isSuperInternLoaded, setIsSuperInternLoaded] = useState(false);

    // Initialize SuperIntern when SDK is loaded
    useEffect(() => {
        if (isSuperInternLoaded && typeof window !== "undefined" && window.SuperIntern) {
            const buttonConfig = {
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    environment: "test",
                    primaryBrandColor: "#4f46e5",
                    theme: {
                        colorMode: { type: "light" }
                    }
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 Hi! How can I help?",
                    quickQuestions: ["What can you help with?","How do I get started?","Tell me more"],
                    disclaimer: {
                        text: "My answers might not always be 100% accurate. Double-check when in doubt.",
                        link: "https://example.com/disclaimer"
                    }
                },
                label: "Chat with us",
                style: {
                          "position": "fixed",
                          "bottom": "20px",
                          "right": "20px"
                }
            };

            // Creates a fixed floating button
            window.SuperIntern.ChatButton(buttonConfig);
        }
    }, [isSuperInternLoaded]);

    return (
        <>
            {/* Load the SuperIntern SDK */}
            <Script
                src="https://cdn.superintern.ai/sdk/embed.global.js"
                onLoad={() => setIsSuperInternLoaded(true)}
            />

            {/* Your app content */}
            <div>
                <h1>My Website</h1>
                {/* The chat button will be rendered automatically by the SDK */}
            </div>
        </>
    );
}

// TypeScript: Add type declaration for window.SuperIntern
declare global {
    interface Window {
        SuperIntern?: {
            ChatButton: (config: any) => void;
        };
    }
}

Props