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.

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>