SuperInternSuperIntern

Chat Button Example

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

Live Preview

onOpenChange Callback Log
Click the chat button to see callback events...

Inline Integration Example

ChatButton can be placed inline in headers or navbars using static positioning.

My Website Header

Backend Configuration

You need an API key and agent id to chat for real. The SuperIntern dashboard's Web Chat page has a setup wizard that creates a website-safe key in a minute — and its Playground links come back here with everything pre-filled.

Get credentials from the dashboard

Reuse the backend session and restore cached messages after a page reload.

User Identity (optional)

Sent to the backend as visitor info for dashboard attribution

Search Settings
Feedback Settings

Button

(3/5)

Up to 5 labels. Avatar bubbles appear after 5s and rotate every 10s; regular buttons use the first.

Chat Window

Content

#4f46e5
None

Get the Code

<!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",
                    agentId: "your-agent-id",
                    environment: "production",
                    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"
                    },
                },
                // Optional: Control modal state externally
                modalSettings: {
                    onOpenChange: function(isOpen) {
                        console.log('Modal state changed:', isOpen);
                        // You can track modal state or sync with your app state here
                    }
                },
                label: ["Chat with us","Need help?","Ask SuperIntern"],
                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",
                    agentId: "your-agent-id",
                    environment: "production",
                    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"
                    },
                },
                // Optional: Control modal state externally
                modalSettings: {
                    onOpenChange: (isOpen) => {
                        console.log('Modal state changed:', isOpen);
                        // You can track modal state or sync with your app state here
                    }
                },
                label: ["Chat with us","Need help?","Ask SuperIntern"],
                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) => any;
        };
    }
}
Props
  • label: Text displayed on the button (icon-only when omitted; the avatar-mode bubble defaults to "Ask SuperIntern")
  • avatar: { type?: "default" | "custom"; src?: string } — render the button as an avatar instead of a labeled pill
  • aiChatSettings.enableSearchMode: Adds a search tab to the chat modal (configure it via searchSettings)
  • aiChatSettings.defaultMode: 'chat' or 'search' — which tab the modal opens in first (default: 'chat')
  • style: CSSProperties object to override styles (use position: 'static' for inline)