インストール

1. CLIからインストール

開発中のプロジェクトにターミナルからインストールします。

npm install hisho-client

2. 環境変数の設定

埋め込みたいプロジェクトの「設定 > チャット公開設定 > 自分のサイトに埋め込む」からHISHO_CLIENT_TOKENを取得し、環境変数に設定します。

NEXT_PUBLIC_HISHO_CLIENT_TOKEN=your-token-here

3. 承認済みオリジンの追加

埋め込みたいプロジェクトの「設定 > チャット公開設定 > 自分のサイトに埋め込む」から、呼び出し元サイトのオリジンを追加します。

例）https://example.com

4. ウィジェットを表示する

開発しているフレームワークを選択すると対応する手順が表示されます。

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

export const Page = () => {
  return (
    <HishoChatWidget
      auth={{
        clientToken: process.env.NEXT_PUBLIC_HISHO_CLIENT_TOKEN ?? "",
      }}
    />
  );
};

5. オプション