Embedding & Integration

@asgard-js/react only ships the core <Chatbot> component — there is no built-in floating window or launcher button. That leaves you free to decide how to place it on your site. This page covers three common placements.

tip

Whichever you pick, SSR frameworks (Next.js, Docusaurus…) require a client-only wrapper — see the SSR section of Quick Start.

1. Inline (default)

The simplest option: drop <Chatbot> into a fixed-size container and it fills the parent. Prefer controlling the size via the theme — see Sizing.

<div style={{ width: 420, height: 640 }}>
  <Chatbot
    config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
    customChannelId="user-123"
  />
</div>

2. Floating launcher widget

The classic website support pattern: a button in the bottom-right that opens a chat window. The SDK doesn't provide this shell, but you can build it with a single isOpen state — use <Chatbot>'s onClose callback to collapse it when the user clicks the close button.

Click the button at the bottom-right to open the floating chat; close it from the window's close button (or click the launcher again).

import { useState } from "react";
import { Chatbot } from "@asgard-js/react";

export function FloatingChatbot() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {isOpen && (
        <div style={{ position: "fixed", bottom: 96, right: 24 }}>
          <Chatbot
            config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
            customChannelId="user-123"
            theme={{ chatbot: { width: "360px", height: "520px" } }}
            onClose={() => setIsOpen(false)}
          />
        </div>
      )}
      <button
        style={{ position: "fixed", bottom: 24, right: 24 }}
        onClick={() => setIsOpen((open) => !open)}
      >
        {isOpen ? "Close" : "Chat"}
      </button>
    </>
  );
}

Keep the connection alive when closed?

When the user clicks the header close button, the SDK disconnects the SSE stream by default and reconnects on the next open. If you want to keep receiving messages in the background while closed (e.g. for unread badges), add maintainConnectionWhenClosed:

<Chatbot
  config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
  customChannelId="user-123"
  maintainConnectionWhenClosed
  onClose={() => setIsOpen(false)}
/>

Prop	Behavior
onClose	Fires when the user clicks the header close button; collapse the window here
maintainConnectionWhenClosed	Keep the SSE connection when closed (default false, which disconnects)

3. fullScreen

Mobile or dedicated chat pages suit fullScreen: <Chatbot> switches to a fixed full-viewport container, handling the iOS virtual keyboard and preventing scroll chaining.

<Chatbot
  config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
  customChannelId="user-123"
  fullScreen
/>

Framework integration

The client-only wrappers for each framework (Next.js App Router / Pages Router, Docusaurus, Vite) are covered in the SSR section of Quick Start. All three placements above follow the same wrapping principle.

See also

• Sizing — control width/height and responsiveness via the theme
• Quick Start — installation and SSR wrapping
• Chatbot Props — full props including fullScreen, onClose, maintainConnectionWhenClosed