Sidebar Chat Example

The SidebarChat component renders the assistant as a persistent side panel that lives next to your app content — ideal for dashboards, editors, and documentation sites where the chat should always be within reach.

Live Demo

Uses the playground credentials saved in this browser (API key, agent ID, and environment). Configure them in any component playground, e.g. Embedded Chat. Without them the chat only returns canned demo responses.

My App

Assistant

Usage

HTML / Script Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperIntern Sidebar Chat</title>
    <style>
        .layout {
            display: flex;
            height: 100vh;
        }
        .content {
            flex: 1;
            overflow: auto;
        }
        #sidebar {
            width: 380px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="layout">
        <main class="content">
            <!-- Your app content -->
        </main>

        <!-- Container for the sidebar chat -->
        <div id="sidebar"></div>
    </div>

    <!-- SuperIntern SDK -->
    <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
    <script>
        window.addEventListener('load', function () {
            SuperIntern.SidebarChat('#sidebar', {
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    agentId: "your-agent-id",
                    environment: "production",
                    primaryBrandColor: "#4f46e5"
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 Hi! How can I help?"
                }
            });
        });
    </script>
</body>
</html>