デザインの変更

テーマ

themeで指定します。

オプション	内容	デフォルト
mode	light \| dark \| system	system
accentColor	ボタンや強調表示の色	#111827
borderRadius	パネルの角丸	20

サイズ

uiで指定します。

オプション	内容	デフォルト
width	パネル幅	380
height	パネル高さ	640
zIndex	ウィジェットの重なり順	2147483000

コード例

HishoChatWidget に theme と ui を指定します。

import { HishoChatWidget } from "hisho-client/next";

export const Page = () => {
  return (
    <HishoChatWidget
      auth={{
        clientToken: process.env.NEXT_PUBLIC_HISHO_CLIENT_TOKEN ?? "",
      }}
      theme={{
        mode: "system",
        accentColor: "#2563eb",
        borderRadius: 16,
      }}
      ui={{
        width: 400,
        height: 640,
      }}
    />
  );
};