設置コード

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

設定オプション

チャットボットの動作は、neodig-chat-config クラスを持つ <script> タグ内のJSON設定で変更できます。

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

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

• title: チャットウィンドウのタイトル
• inputPlaceholder: 入力欄のプレースホルダーテキスト
• firstMessage: 最初に表示されるメッセージ（${greetings}は時間帯に応じた挨拶に置き換えられます）
  • ${greetings}の置き換え内容（日本時間基準）：
    • 5:00-9:59: おはようございます
    • 10:00-18:59: こんにちは
    • 19:00-4:59: こんばんは
• loading: 応答を生成中に表示されるメッセージ
• error: エラー発生時に表示されるメッセージ
• unavailable: チャット機能が利用できない場合のメッセージ
• disclaimer: 生成AIに関する注意事項

表示オプション

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

• enableOverlay: チャット展開時にオーバーレイ（背景）を表示するかどうか（デフォルト: false）
• defaultExpanded: ページ読み込み時にチャットを拡大状態で表示するかどうか（デフォルト: false）
• showDisclaimer: 生成AIに関する注意事項を表示するかどうか（デフォルト: true）
• historyCount: 保持する会話履歴の件数（デフォルト: 5、範囲: 1〜10）

デザインのカスタマイズ

チャットボタンのカスタマイズ

サンプルCSSは参考として提供されています。実際のデザインは、お客様のサイト側のCSSで自由にカスタマイズしてください。

チャットボタンのCSSクラス

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

オーバーレイ

コンテナ

ヘッダー

メッセージエリア

入力エリア

音声入力

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

その他

トラブルシューティング

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

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

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)