設置コード

チャット機能をウェブサイトに導入するには、提供される設置コードを埋め込む必要があります。設置方法については、ダッシュボードの手順をご確認ください。

検索インデックスが作成されていないアプリでは、クロールしたコンテンツを元にした回答は利用できません。この場合もFAQを元にした回答は引き続き利用できます。

設定オプション

チャットボットの動作は、neodig-chat-config クラスを持つ <script> タグ内のJSON設定で変更できます。この <script> タグにも、起動ボタンと同じ data-neodig-appid 属性の指定が必要です（設置コードをそのまま使う場合は既に付いています）。

メッセージのカスタマイズ

"messages": {
  "title": "チャットサポート",
  "inputPlaceholder": "質問を入力してください...",
  "firstMessage": "${greetings}。何かお手伝いできることはありますか？",
  "loading": "考えています...",
  "error": "エラーが発生しました。時間を空けて再度お試しください。",
  "unavailable": "申し訳ございません。現在チャット機能はご利用いただけません。",
  "disclaimer": "※生成AIによる回答は誤りを含むことがあります"
}

表示オプション

"enableOverlay": false,
"defaultExpanded": false,
"showDisclaimer": true,
"historyCount": 5

エンドユーザーが送信できる1件のメッセージは100文字までです。

会話のクリア

チャットウィンドウのヘッダーには「会話をクリア」ボタンがあり、エンドユーザーはいつでも会話を最初からやり直せます。進行中の応答があれば中断し、会話履歴と初期質問の表示を初期状態に戻します。

NGワードが検出された場合も、会話は自動的にリセットされます。詳細はNGワード設定をご確認ください。

デザインのカスタマイズ

起動ボタンのカスタマイズ

起動ボタンのデザイン（プリセット・ラベル・カスタムHTML・カスタムCSS）は、チャット設定の「起動ボタンのデザイン」から変更します。設置コード自体を変更する必要はありません。

起動ボタンのCSSクラス

チャットボタンは設置コードの時点で .neodig-chat-unavailable が付いており、非表示です。チャットの設定を読み込んで利用可能と確認できた時点でこのクラスが外れ、ボタンが表示されます。読み込み前にボタンが既定のデザインで一瞬表示されるのを防ぐためです。

チャットウィンドウの構造

オーバーレイ

コンテナ

ヘッダー

メッセージエリア

入力エリア

音声入力

対応ブラウザ（Chrome、Edge）では、入力エリアに音声入力ボタンが自動的に表示されます。Firefox等の非対応ブラウザやiOS端末ではボタンは表示されません。音声入力ボタンが表示されない場合は、トラブルシューティングをご確認ください。

その他

トラブルシューティング

起動ボタンが表示されない

起動ボタンは、次のいずれかに当てはまる場合は表示されません。

• チャット機能がチャット設定で無効になっている
• 契約プランがチャットボット機能に対応していない（Standardプラン等）
• サブスクリプションが有効な状態ではない
• チャットのトークン予算を使い切っている

会話の途中でこれらの状態になった場合は、unavailable に設定したメッセージがチャットウィンドウに表示されます。

音声入力ボタンが表示されない

音声入力ボタンが表示されない場合、以下の点を確認してください。

1. ブラウザの対応状況

音声入力は Web Speech API に対応したブラウザ（Chrome、Edge）でのみ利用可能です。Firefox等の非対応ブラウザではボタンは表示されません。また、iOSでは全てのブラウザがWebKitエンジンを使用しており、Web Speech APIが正常に動作しないためボタンは表示されません。

2. HTTPS の使用

音声入力にはHTTPS接続が必要です（localhost を除く）。HTTP環境では音声入力は利用できません。

3. Permissions-Policy ヘッダーの確認

サーバーの Permissions-Policy HTTPレスポンスヘッダーで microphone がブロックされていると、音声入力ボタンは自動的に非表示になります。ブラウザのDevToolsコンソールに以下のメッセージが表示されている場合、この設定が原因です。

Voice input button is hidden because microphone access is blocked. Please check that the Permissions-Policy header allows microphone.

対処方法: サーバーの Permissions-Policy ヘッダーで microphone を許可してください。

Permissions-Policy: microphone=(self)

WAFやCDN、セキュリティモジュール（例: helmet、nuxt-security）がデフォルトで microphone=() を設定している場合があります。