SuperInternSuperIntern

Embedded Chat

This component renders an inline chat interface directly in your page.

Live Preview

Assistant
👋 Hi! How can I help?

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.

Show the "Talk to a human" button when the agent has web escalation enabled. Turn off to let only the AI decide when to escalate.

User Identity (optional)

Sent to the backend as visitor info for dashboard attribution

Search Settings
Feedback Settings

Appearance & 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 Embedded Chat</title>
    <style>
        #chat-container {
            height: 600px;
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- Container for the embedded chat -->
    <div id="chat-container"></div>

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

        function initSuperIntern() {
            window.SuperIntern.EmbeddedChat('#chat-container', {
                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"
                    },
                },
            });
        }
    </script>
</body>
</html>
import { useState, useEffect, useRef } from "react";
import Script from "next/script";

export default function MyApp() {
    const [isSuperInternLoaded, setIsSuperInternLoaded] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);

    // Initialize SuperIntern when SDK is loaded
    useEffect(() => {
        if (isSuperInternLoaded && typeof window !== "undefined" && window.SuperIntern && containerRef.current) {
            window.SuperIntern.EmbeddedChat(containerRef.current, {
                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"
                    },
                },
            });
        }
    }, [isSuperInternLoaded]);

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

            {/* Container for the embedded chat */}
            <div
                ref={containerRef}
                style={{ height: "600px", maxWidth: "800px", margin: "0 auto" }}
            />
        </>
    );
}

// TypeScript: Add type declaration for window.SuperIntern
declare global {
    interface Window {
        SuperIntern?: {
            EmbeddedChat: (target: string | HTMLElement, config: any) => any;
        };
    }
}
Code Example
<!-- Container for the embedded chat -->
<div id="chat-container" style="height: 600px"></div>

<!-- SuperIntern SDK -->
<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
<script>
  window.addEventListener("load", function () {
    SuperIntern.EmbeddedChat("#chat-container", {
      baseSettings: {
        apiKey: "YOUR_API_KEY",        // from the SuperIntern dashboard
        agentId: "your-agent-id",      // from the SuperIntern dashboard
        environment: "production",     // "production" (default) or "test"
        primaryBrandColor: "#4f46e5",
      },
      aiChatSettings: {
        aiAssistantName: "SuperIntern Assistant",
        introMessage: "👋 Hi! How can I help you today?",
        quickQuestions: [
          "How do I get started?",
          "What features are available?",
        ],
      },
    });
  });
</script>