Documentation

Complete guide to integrating SuperIntern AI chat components into your application

Quick Navigation

📦 Installation 💬 Embedded Chat 🪟 Modal Chat 🔘 Chat Button 🔍 Search Bar 📑 Sidebar Chat ⚙️ Configuration Reference 🎯 Chat Methods 🌐 Complete HTML Example

Installation

⚠️Note: The SDK is currently distributed via CDN only. NPM publishing is planned but not yet available.

Via CDN (Recommended)

Add the following script tag to the <head> or <body> of your HTML:

<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>

💡Tip: The CDN version exposes a global SuperIntern object that you can use to create components.

Prefer ES modules? An ESM build is available at https://cdn.superintern.ai/sdk/embed.mjs for use with import.

Getting Your Credentials

Every widget needs an apiKey and an agentId. You can find both in your SuperIntern dashboard.

Embedded Chat

The Embedded Chat component is perfect for creating a dedicated AI chat experience directly on your page. You may want to add an embedded chat in places where you want to encourage the user to interact with the AI chat directly.

📌 Common Use Cases

• Deflect questions in your help center or support site
• Provide an AI chat experience on documentation sites (e.g., GitBook, ReadMe)
• Create a dedicated page for sharable chat sessions
• Embed on pages like help.domain.com or domain.com/ask-ai

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function ChatPage() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern) {
      window.SuperIntern.EmbeddedChat("#chat-container", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
          introMessage: "👋 Hi! How can I help you today?",
        },
      });
    }
  }, [sdkLoaded]);

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <div id="chat-container" style={{ height: '600px' }} />
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

Step 1: Add the script tag to your HTML

<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>

Step 2: Define a container element for the chat

<div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);">
  <div style="max-height: 600px; height: 100%;">
    <div id="superintern-embedded-chat"></div>
  </div>
</div>

Step 3: Initialize the Embedded Chat

<script>
  window.addEventListener("load", function() {
    const config = {
      baseSettings: {
        apiKey: "YOUR_API_KEY",
        agentId: "your-agent-id",
        environment: "production",
      },
      aiChatSettings: {
        aiAssistantName: "Support Assistant",
        introMessage: "👋 Hi! How can I help you today?",
      },
    };

    // Initialize the widget
    const chat = SuperIntern.EmbeddedChat("#superintern-embedded-chat", config);
  });
</script>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`searchSettings`	object	No	Search behavior when search mode is enabled. See Search Settings
`isHidden`	boolean	No	Hide the chat while keeping it mounted. Defaults to false
`shouldAutoFocusInput`	boolean	No	Auto focus input on mount. Defaults to false

Example: With Quick Questions

// Initialize with quick questions
SuperIntern.EmbeddedChat("#chat-container", {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    agentId: "your-agent-id",
    environment: "production",
    primaryBrandColor: "#4f46e5",
  },
  aiChatSettings: {
    aiAssistantName: "Support Bot",
    introMessage: "👋 Welcome! How can I assist you?",
    quickQuestions: [
      "How do I get started?",
      "What features are available?",
      "How do I contact support?",
    ],
  },
});

Modal Chat

The Modal Chat component displays a chat interface in a modal/dialog overlay. Perfect for providing on-demand support without taking up permanent screen space.

ℹ️Controlled open state: Modal Chat uses a controlled-component pattern. You pass modalSettings.isOpen and keep it in sync via modalSettings.onOpenChange. To open or close the modal programmatically, call modal.update({ modalSettings: { isOpen: true } }) on the instance returned by SuperIntern.ModalChat(config).

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect, useRef } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);
  const modalRef = useRef<any>(null);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern && !modalRef.current) {
      modalRef.current = window.SuperIntern.ModalChat({
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
          theme: {
            colorMode: { type: "auto" }
          }
        },
        modalSettings: {
          isOpen: false,
          onOpenChange: (isOpen: boolean) => {
            // Keep the modal state in sync when the user closes it
            modalRef.current?.update({ modalSettings: { isOpen } });
          }
        }
      });
    }
  }, [sdkLoaded]);

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

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <button onClick={handleOpenChat}>Open Chat</button>
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <button id="open-chat-btn">Open Chat</button>

  <script>
    window.addEventListener("load", function() {
      // Create the modal (hidden until opened)
      const modal = SuperIntern.ModalChat({
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
        },
        modalSettings: {
          isOpen: false,
          onOpenChange: (isOpen) => {
            // Keep the modal state in sync when the user closes it
            modal.update({ modalSettings: { isOpen } });
          },
        },
      });

      // Open the modal when the button is clicked
      document.getElementById("open-chat-btn").addEventListener("click", function() {
        modal.update({ modalSettings: { isOpen: true } });
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`modalSettings`	object	✓ Yes	Controlled open state: `{ isOpen, onOpenChange }`

Chat Button

The Chat Button component provides a floating button that opens a modal chat when clicked. Perfect for customer support and help features.

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach. Called without a target, the button floats in a fixed position and the SDK creates its own container:

import { useState, useEffect, useRef } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);
  const buttonRef = useRef<any>(null);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern && !buttonRef.current) {
      buttonRef.current = window.SuperIntern.ChatButton({
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
          theme: {
            colorMode: { type: "auto" }
          }
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
        },
      });
    }
  }, [sdkLoaded]);

  return (
    <Script
      src="https://cdn.superintern.ai/sdk/embed.global.js"
      onLoad={() => setSdkLoaded(true)}
    />
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener("load", function() {
      // Floating button — the SDK creates its own container
      SuperIntern.ChatButton({
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
        },
      });
    });
  </script>
</body>
</html>

Inline Placement

The Chat Button also supports a second signature, SuperIntern.ChatButton(target, config), which renders the button inside your own container with static positioning so it sits in your page layout instead of floating:

<div id="chat-button-container"></div>

<script>
  window.addEventListener("load", function() {
    // Renders inside #chat-button-container instead of floating
    SuperIntern.ChatButton("#chat-button-container", {
      baseSettings: {
        apiKey: "YOUR_API_KEY",
        agentId: "your-agent-id",
        environment: "production",
      },
      label: "Ask SuperIntern",
    });
  });
</script>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`modalSettings`	object	No	`{ isOpen, onOpenChange }` for controlling the chat modal opened by the button
`label`	string	No	Button label text. The button is icon-only when omitted; in avatar mode the speech bubble appears after 5s and defaults to "Ask SuperIntern" (pass "" to hide it)
`avatar`	object	No	Button avatar: `{ type?: "default" \| "custom", src?: string }`. Use type "custom" with src for your own image
`style`	React.CSSProperties	No	Custom CSS styles for the button

Example: Custom Label and Avatar

SuperIntern.ChatButton({
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    agentId: "your-agent-id",
    environment: "production",
  },
  label: "Chat with us",
  avatar: {
    type: "custom",
    src: "https://example.com/avatar.png",
  },
});

Search Bar

The Search Bar component provides an AI-powered search interface that opens a modal chat when clicked. The Search Bar always renders into a container you provide — the target argument is required.

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern) {
      window.SuperIntern.SearchBar("#search-bar", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
        },
        searchSettings: {
          placeholder: "Search the docs...",
          numResults: 10,
        },
      });
    }
  }, [sdkLoaded]);

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <div id="search-bar" />
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <!-- The search bar renders into this container -->
  <div id="search-bar"></div>

  <script>
    window.addEventListener("load", function() {
      SuperIntern.SearchBar("#search-bar", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
        },
        searchSettings: {
          placeholder: "Search the docs...",
        },
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`searchSettings`	object	No	Search behavior (placeholder, numResults, threshold, mode). See Search Settings
`aiChatSettings`	object	No	Settings for the chat view that opens on click
`style`	React.CSSProperties	No	Custom CSS styles for the search bar

Sidebar Chat

The Sidebar Chat component renders a persistent side-panel chat that stays docked next to your content. It is a good fit for app layouts and documentation sites where the assistant should remain visible while the user works. Like Embedded Chat, it renders into a container you provide — the target argument is required.

Quick Start (HTML / Script Tag)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
  <style>
    .layout { display: flex; height: 100vh; }
    .content { flex: 1; overflow-y: auto; }
    .sidebar { width: 380px; border-left: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="layout">
    <main class="content">
      <!-- Your page content -->
    </main>
    <aside id="sidebar-chat" class="sidebar"></aside>
  </div>

  <script>
    window.addEventListener("load", function() {
      SuperIntern.SidebarChat("#sidebar-chat", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
          introMessage: "👋 Hi! How can I help you today?",
        },
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`shouldAutoFocusInput`	boolean	No	Auto focus input on mount. Defaults to false

Configuration Reference

Base Settings

Core configuration options that apply to all components:

Property	Type	Required	Description
`apiKey`	string	✓ Yes	Your SuperIntern API key, from the SuperIntern dashboard
`agentId`	string	✓ Yes	The agent to talk to, from the SuperIntern dashboard. Without both apiKey and agentId the SDK returns a canned placeholder response and never contacts the backend
`environment`	"test" \| "production"	No	API environment. Defaults to "production"
`modeName`	string	No	Mode name to use, as shown in the dashboard
`modeShortId`	string	No	Mode short ID (alternative to modeName)
`enableThinking`	boolean	No	Enable thinking mode. Defaults to false
`stream`	boolean	No	Enable streaming responses. Defaults to true
`primaryBrandColor`	string	No	Primary brand color (hex)
`secondaryBrandColor`	string	No	Secondary brand color (hex)
`theme`	object	No	Theme configuration. colorMode type: "light" \| "dark" \| "auto" ("auto" follows the visitor's prefers-color-scheme)
`user`	object	No	Identity of the current end user: `{ id?, email?, name? }`. Sent with chat requests as visitor_info. See "Identifying Your Users" below

ℹ️Environment: environment defaults to "production". We recommend setting it explicitly in every config, and using "test" only when pointing at your test workspace.

Identifying Your Users

If your site knows who the current user is, pass their identity in baseSettings.user. It is sent with every chat request as visitor_info, so sessions and tickets can be attributed to the same person in the SuperIntern dashboard. All fields are optional.

SuperIntern.EmbeddedChat("#chat-container", {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    agentId: "your-agent-id",
    environment: "production",
    user: {
      id: "user-42",
      email: "jane@example.com",
      name: "Jane Doe",
    },
  },
});

AI Chat Settings

Configuration options for the AI chat behavior and appearance:

Property	Type	Description
`aiAssistantName`	string	Display name for the AI assistant
`aiAssistantDescription`	string	Subtitle or description for the assistant
`introMessage`	string	Initial greeting message
`quickQuestions`	string[]	Array of suggested questions
`placeholder`	string	Placeholder text for the chat input
`botAvatarSrcUrl`	string	URL of a custom avatar image for the assistant
`showThinkingProcess`	boolean	Show thinking process UI. Defaults to true
`disclaimer`	object	Disclaimer settings (text, link)
`feedback`	object	Like/dislike feedback configuration. See "Feedback Settings" below
`enableSearchMode`	boolean	Show a chat/search mode toggle. Defaults to false
`defaultMode`	"chat" \| "search"	Mode shown when the widget opens. Defaults to "chat"

Feedback Settings

The aiChatSettings.feedback object controls like/dislike buttons on assistant messages and the follow-up feedback forms:

Property	Type	Description
`enableLike`	boolean	Show the like button. Defaults to true
`enableDislike`	boolean	Show the dislike button. Defaults to true
`enableLikeFeedback`	boolean	Show a feedback form after a like. Defaults to false
`enableDislikeFeedback`	boolean	Show a feedback form after a dislike. Defaults to true
`likeFeedbackQuestions`	FeedbackQuestion[]	Custom questions for the like feedback form
`dislikeFeedbackQuestions`	FeedbackQuestion[]	Custom questions for the dislike feedback form

Each FeedbackQuestion has the following shape:

interface FeedbackQuestion {
  id: string;
  question: string;
  type: "text" | "textarea" | "rating" | "checkbox" | "radio";
  required?: boolean;
  options?: string[];   // for radio/checkbox types
  placeholder?: string; // for text/textarea types
}

Example: ask why a response was disliked:

aiChatSettings: {
  feedback: {
    enableLike: true,
    enableDislike: true,
    enableDislikeFeedback: true,
    dislikeFeedbackQuestions: [
      {
        id: "reason",
        question: "What went wrong?",
        type: "radio",
        required: true,
        options: ["Inaccurate", "Not helpful", "Too slow", "Other"],
      },
      {
        id: "details",
        question: "Anything else we should know?",
        type: "textarea",
        placeholder: "Tell us more...",
      },
    ],
  },
}

Search Settings

The searchSettings object configures search behavior for the Search Bar and for chat widgets with enableSearchMode turned on:

Property	Type	Description
`placeholder`	string	Placeholder text for the search input
`numResults`	number	Number of search results to return. Defaults to 10
`threshold`	number	Similarity distance threshold. Defaults to 1.0; lower values are stricter
`mode`	"keyword" \| "query"	"keyword" for exact/fuzzy matching, "query" for semantic search. Defaults to "keyword"

Example: Full Configuration

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    agentId: "your-agent-id",
    environment: "production",
    modeShortId: "support-mode",
    enableThinking: true,
    stream: true,
    persistSessionOnReload: true,
    primaryBrandColor: "#4f46e5",
    secondaryBrandColor: "#ec4899",
    theme: {
      colorMode: { type: "auto" }
    },
    user: {
      id: "user-42",
      email: "jane@example.com",
      name: "Jane Doe"
    }
  },
  aiChatSettings: {
    aiAssistantName: "Support Bot",
    aiAssistantDescription: "Your 24/7 AI Assistant",
    introMessage: "👋 Hello! How can I help you today?",
    quickQuestions: [
      "How do I get started?",
      "What features are available?",
      "Contact support"
    ],
    placeholder: "Ask me anything...",
    showThinkingProcess: true,
    enableSearchMode: true,
    defaultMode: "chat",
    disclaimer: {
      text: "AI responses may not always be 100% accurate.",
      link: "https://example.com/disclaimer"
    },
    feedback: {
      enableLike: true,
      enableDislike: true,
      enableDislikeFeedback: true
    }
  },
  searchSettings: {
    placeholder: "Search the docs...",
    numResults: 10,
    threshold: 1.0,
    mode: "keyword"
  }
};

Chat Methods

Every widget factory returns an instance you can use to control the widget programmatically. EmbeddedChat, ModalChat, and SidebarChat instances expose the chat methods directly. ChatButton and SearchBar instances expose the same methods, but they act on the inner chat that opens from the button or search bar. That chat is mounted (hidden) as soon as the widget mounts, so calling submitMessage() before the modal is opened sends the message and the conversation is there when the widget opens; calls made before the widget finishes mounting are safely ignored. All instances also support update() and unmount().

Available Methods

submitMessage(message?: string)

Programmatically sends a message in chat. If message is omitted, sends the current input value.

// Send a specific message
chat.submitMessage("Hello, I need help!");

// Send whatever is in the input field
chat.submitMessage();

updateInputMessage(message: string)

Updates the text in the chat input field without sending it.

chat.updateInputMessage("How do I reset my password?");

clearChat()

Resets the chat to its initial state, clearing all messages.

chat.clearChat();

focusInput()

Sets focus to the chat input field.

chat.focusInput();

update(config: Partial<Config>)

Updates the widget configuration after creation. The partial config is deep-merged into the current one — pass only the fields you want to change. This is also how you open and close a Modal Chat.

// Update primary color
chat.update({
  baseSettings: {
    primaryBrandColor: "#10b981"
  }
});

// Update assistant name
chat.update({
  aiChatSettings: {
    aiAssistantName: "New Assistant Name"
  }
});

// Open a Modal Chat
modal.update({
  modalSettings: { isOpen: true }
});

unmount()

Removes the widget from the page and cleans up the container the SDK created (if any).

chat.unmount();

Example: Dynamic Color Changer

This example shows how to change the primary color when a button is clicked:

const colors = [
  "#26D6FF",
  "#e300bd",
  "#512fc9",
  "#fde046",
  "#2ecc71",
  "#e74c3c",
  "#9b59b6",
  "#f1c40f",
];

let count = 0;

const changeColorButton = document.getElementById("change-color-button");
changeColorButton.addEventListener("click", () => {
  count++;
  chat.update({
    baseSettings: {
      primaryBrandColor: colors[count % colors.length],
    },
  });
});

Example: Submit Message from External Button

// HTML / Vanilla JS example
var chat = SuperIntern.EmbeddedChat("#chat", config);

document.getElementById("help-btn").addEventListener("click", function() {
  chat.submitMessage("I need help with my account");
});

// React / Next.js example (using Script tag)
import { useState, useEffect, useRef } from 'react';
import Script from 'next/script';

export default function ChatWithCustomButton() {
  const [sdkLoaded, setSdkLoaded] = useState(false);
  const chatRef = useRef(null);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern) {
      chatRef.current = window.SuperIntern.EmbeddedChat("#chat-container", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
        },
      });
    }
  }, [sdkLoaded]);

  const handleQuickHelp = () => {
    if (chatRef.current) {
      chatRef.current.submitMessage("I need help with my account");
    }
  };

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <button onClick={handleQuickHelp}>Quick Help</button>
      <div id="chat-container" style={{ height: '600px' }} />
    </>
  );
}

Complete HTML Example

Here's a complete example showing how to use the SDK in a static HTML page with interactive controls:

Full Working Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SuperIntern Chat Demo</title>

  <!-- Load the SDK -->
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>

  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .chat-container {
      height: 600px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      overflow: hidden;
    }
    .controls {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }
    button {
      padding: 10px 20px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: #4338ca;
    }
  </style>
</head>
<body>
  <h1>SuperIntern Chat Demo</h1>

  <div class="controls">
    <button id="clear-btn">Clear Chat</button>
    <button id="focus-btn">Focus Input</button>
    <button id="send-btn">Send Test Message</button>
    <button id="color-btn">Change Color</button>
  </div>

  <div id="superintern-chat" class="chat-container"></div>

  <script>
    window.addEventListener("load", function() {
      // Configuration
      const config = {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          agentId: "your-agent-id",
          environment: "production",
          primaryBrandColor: "#4f46e5",
          stream: true,
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
          introMessage: "👋 Hi! How can I help you today?",
          quickQuestions: [
            "How do I get started?",
            "What features are available?",
            "Contact support"
          ],
        },
      };

      // Initialize chat
      var chat = SuperIntern.EmbeddedChat("#superintern-chat", config);

      // Button handlers
      document.getElementById("clear-btn").addEventListener("click", function() {
        chat.clearChat();
      });

      document.getElementById("focus-btn").addEventListener("click", function() {
        chat.focusInput();
      });

      document.getElementById("send-btn").addEventListener("click", function() {
        chat.submitMessage("This is a test message!");
      });

      var colors = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
      var colorIndex = 0;

      document.getElementById("color-btn").addEventListener("click", function() {
        colorIndex = (colorIndex + 1) % colors.length;
        chat.update({
          baseSettings: {
            primaryBrandColor: colors[colorIndex]
          }
        });
      });
    });
  </script>
</body>
</html>

💡Note: When using the CDN version, all components are available under the global SuperIntern object:

SuperIntern.EmbeddedChat(target, config)
SuperIntern.ModalChat(config)
SuperIntern.ChatButton(config) — floating, or SuperIntern.ChatButton(target, config) — inline
SuperIntern.SearchBar(target, config)
SuperIntern.SidebarChat(target, config)

🎮 Try it Out!

Want to see these components in action? Check out our interactive playgrounds:

💬 Embedded Chat Playground

Interactive demo with live configuration

🪟 Modal Chat Playground

Test modal chat configurations

🔘 Chat Button Playground

Customize your chat button

🔍 Search Bar Playground

Experiment with search bar styles

📑 Sidebar Chat Playground

Explore the persistent side-panel chat