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.

Sizing Controls

Width375px

Height640px

Content Max Width800px

contentMaxWidth controls the max width of message content inside the bubble.

Current Theme Config

{
  "chatbot": {
    "width": "375px",
    "height": "640px",
    "contentMaxWidth": "800px"
  }
}

Loading chatbot...

tip

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

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} />;

Sizing Fields

Field	Default	Description
width	375px	Chatbot frame width
height	640px	Chatbot 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
contentMaxWidth	1200px	Max width of the message content area