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.

Sizing

The chatbot frame dimensions and the max width of message content can all be overridden via theme.chatbot. Defaults are width: 375px, height: 640px, contentMaxWidth: 1200px.

tip

Beyond width / height, you can also use maxWidth, minWidth, maxHeight, and minHeight for responsive control.

  1. Code Example​

    import { Chatbot } from "@asgard-js/react";
    import type { AsgardThemeContextValue } from "@asgard-js/react";
     
    const sizingTheme: Partial<AsgardThemeContextValue> = {
      chatbot: {
        width: "375px",
        height: "640px",
        maxWidth: "100%",
        maxHeight: "80vh",
        contentMaxWidth: "800px",
      },
    };
     
    <Chatbot theme={sizingTheme} {...rest} />;

  2. Sizing Fields​

    FieldDefaultDescription
    width375pxChatbot frame width
    height640pxChatbot frame height
    maxWidth—Upper bound on frame width
    minWidth—Lower bound on frame width
    maxHeight—Upper bound on frame height
    minHeight—Lower bound on frame height
    contentMaxWidth1200pxMax width of the message content area

Ready to get started?

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

Contact us