The ModalChat component provides a full-screen or centered modal interface for the AI assistant. It handles its own visibility state and backdrop.
<!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",
environment: "test",
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",
environment: "test",
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 };
};
}
}isOpen (boolean) and onOpenChange (function)