SuperInternSuperIntern

Modal Chat

The ModalChat component provides a full-screen or centered modal interface for the AI assistant. Visibility is controlled by you: pass modalSettings.isOpen and update your state when onOpenChange fires. The component renders its own backdrop and close button.

Live Preview

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

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>Modal Chat Demo</title>
  <!-- Load the SDK -->
  <script src="https://cdn.superintern.ai/sdk/embed.global.js"></script>
</head>
<body>
  <button id="open-modal-btn">Open Chat</button>

  <script>
    const modalConfig = {
      baseSettings: {
        apiKey: "YOUR_API_KEY",
        agentId: "your-agent-id",
        environment: "production",
        primaryBrandColor: "#4f46e5",
        theme: {
          colorMode: { type: "light" }
        },
      },
      aiChatSettings: {
        aiAssistantName: "Assistant",
        introMessage: "👋 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"
        },
      },
      modalSettings: {
        isOpen: false,
        onOpenChange: (isOpen) => {
          modalWidget.update({
            modalSettings: { isOpen: isOpen }
          });
        }
      }
    };

    const modalWidget = SuperIntern.ModalChat(modalConfig);

    document.getElementById("open-modal-btn").addEventListener("click", () => {
      modalWidget.update({
        modalSettings: { isOpen: true }
      });
    });
  </script>
</body>
</html>
import { useState, useEffect, useRef } from "react";
import Script from "next/script";

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

    // Initialize SuperIntern when SDK is loaded
    useEffect(() => {
        if (isSuperInternLoaded && typeof window !== "undefined" && window.SuperIntern) {
            const modalConfig = {
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    agentId: "your-agent-id",
                    environment: "production",
                    primaryBrandColor: "#4f46e5",
                    theme: {
                        colorMode: { type: "light" }
                    },
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 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"
                    },
                },
                modalSettings: {
                    isOpen: false,
                    onOpenChange: (isOpen: boolean) => {
                        // Update modal state when it changes
                        modalWidgetRef.current?.update({
                            modalSettings: { isOpen }
                        });
                    }
                }
            };

            // Create the modal widget and store reference
            modalWidgetRef.current = window.SuperIntern.ModalChat(modalConfig);
        }
    }, [isSuperInternLoaded]);

    const openModal = () => {
        modalWidgetRef.current?.update({
            modalSettings: { isOpen: true }
        });
    };

    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>
                <button onClick={openModal}>Open Chat</button>
            </div>
        </>
    );
}

// TypeScript: Add type declaration for window.SuperIntern
declare global {
    interface Window {
        SuperIntern?: {
            ModalChat: (config: any) => { update: (config: any) => void };
        };
    }
}
Props
  • modalSettings: Object containing isOpen (boolean) and onOpenChange (function)
  • baseSettings: Core configuration including API key and theme
  • aiChatSettings: AI assistant configuration (name, intro message)