Skip to main content

REFERENCE

SDK Demos

How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.

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. 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. 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.

    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)}
    />
    PropBehavior
    onCloseFires when the user clicks the header close button; collapse the window here
    maintainConnectionWhenClosedKeep the SSE connection when closed (default false, which disconnects)

  3. 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
    />

  4. 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.

  5. 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

Ready to get started?

Want to see how Asgard fits your team? Talk to us.

Contact us