Embedded Chat Example

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

Interactive Playground

🔌 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 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({
                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"
                    }
                },
                // Mount to a specific container
                container: document.getElementById('chat-container')
            });
        }
    </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({
                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"
                    }
                },
                // Mount to the container element
                container: containerRef.current
            });
        }
    }, [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: (config: any) => void;
        };
    }
}
Assistant
👋 Hi! How can I help?

Code Example

import { EmbeddedChat } from 'superintern-web-sdk';

export default function MyChat() {
  return (
    <div style={{ height: '600px' }}>
      <EmbeddedChat
        baseSettings={{
          apiKey: "YOUR_API_KEY",
          primaryBrandColor: "#4f46e5",
        }}
        aiChatSettings={{
          aiAssistantName: "SuperIntern Assistant",
          introMessage: "👋 Hi! How can I help you today?",
          quickQuestions: [
            "How do I get started?",
            "What features are available?",
          ],
        }}
        shouldAutoFocusInput={true}
      />
    </div>
  );
}