チャットボット

組織のWebサイトにKeuralのチャットボットを設置します。訪問者が画面の隅にあるボタンを押すと、チャットボットの画面が開きます。管理画面で作成したインストールコードを、Webサイトに貼り付けて設置します。

作成方法アンカーリンクをコピー

1. 組織のオーナー・管理者が、組織管理 → チャットボットで＋ チャットボットを追加を押します。
2. チャットボットの名前と、デフォルトドメイン（例: https://example.com）を入力して登録します。
3. チャットボットを開いて、3つのタブを設定します。

4. インストールコードをWebサイトに貼り付けます。

インストールコードアンカーリンクをコピー

トークン・インストールタブで、HTML用またはNext.js用のコードをコピーします。コードは2つの部分で構成されます。

• ローダー: Keural関数を作成し、ページの読み込みが終わると、チャットボットのスクリプト（/plugin/keural-widget@1.0.1.js）を非同期で読み込みます。スクリプトの読み込み前に呼び出したコマンドは、キューにたまり、順番に実行されます。
• 開始コマンド: Keural('boot', { token: '…' })。トークンはwgt_で始まります。

スクリプトのバージョンはアドレスに固定されています。新しいバージョンが出たら、インストールコードをコピーし直して差し替えます。同じページにインストールコードを2回入れると、2回目のコードは無視され、コンソールにエラーが記録されます。

<script id="keural-one-script">
  /* トークン・インストールタブでコピーしたコード */
</script>

Next.jsでは、next/scriptの<Script id="keural-one-script" strategy="afterInteractive">で追加します。すべてのページに表示するには、ルートのレイアウトに配置します。

開始オプションアンカーリンクをコピー

bootに入れた値は、管理画面の設定より優先されます。ページごとに見た目を変えるときに使います。

Keural('boot', {
  token: 'wgt_…',
  theme: 'system',
  header: { enabled: true, extended: true, draggable: true, title: 'カスタマーサポート', color: '#495BD8' },
  button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});

新しく作ったチャットボットの既定値は、ヘッダーの表示と拡大がオン、ヘッダー・ボタンの色が#495BD8、右側、オフセット30px、テーマsystemです。

ページの制御アンカーリンクをコピー

Keural.open()のようなメソッドは、スクリプトの読み込み後にのみ動作します。ページの読み込み直後に呼び出す場合は、Keural('open')のように関数の形で呼び出すと、順番に実行されます。

<button onclick="Keural('open')">お問い合わせ</button>

既定のボタンを隠し（button.visible: false）、ページのボタンで開くこともできます。

画面のサイズアンカーリンクをコピー

チャットボットの窓は390×800pxです。画面の幅が480px以下の場合は、全画面で開きます。ヘッダーの拡大ボタンで、窓を大きくします。

表示ドメインアンカーリンクをコピー

• チャットボットは、デフォルトドメインとホストが同じページで開きます。ホストはポート番号まで比べ、大文字と小文字は区別しません。www.が付いたアドレスとサブドメインは、別のホストとして扱います。開発サーバーで試すには、そのアドレスをデフォルトドメインにしたチャットボットを別に作ります。
• デフォルトドメインは、作成した後に変更できません。変更するには、チャットボットを新しく作ります。
• 詳細設定の許可ドメインを空にすると、デフォルトドメインのすべてのページで開きます。許可ドメインを入れると、そのアドレスで始まるページだけで開きます。https://example.com/helpのようにパスまで入力すると、その下のページに絞られます。許可ドメインはhttp://またはhttps://で始まり、最大5つまで入れられます。
• インストールコードのトークンは、ページにそのまま表示されます。チャットボットには、公開しても問題ない内容だけを接続してください。

セキュリティポリシー（CSP）アンカーリンクをコピー

サイトでContent-Security-Policyを適用している場合は、次を許可します。アドレスはkeural.aiを基準にしています。