跳至主要内容

REFERENCE

SDK 範例

@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。

尺寸調整

聊天機器人的外框寬高、以及訊息內容的最大寬度都可以透過 theme.chatbot 覆寫。預設值為 width: 375px、height: 640px、contentMaxWidth: 800px。

提示

除了 width / height 之外，還可以使用 maxWidth、minWidth、 maxHeight、minHeight 做響應式控制。

程式範例

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

尺寸欄位

欄位	預設值	說明
`width`	`375px`	聊天機器人外框寬度
`height`	`640px`	聊天機器人外框高度
`maxWidth`	—	外框寬度上限
`minWidth`	—	外框寬度下限
`maxHeight`	—	外框高度上限
`minHeight`	—	外框高度下限
`contentMaxWidth`	`800px`	訊息內容區域最大寬度

準備好開始了嗎？

想知道 Asgard 怎麼用在你的團隊？跟我們聊聊。