設置コード

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

設定オプション

チャットボットの動作は、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クラス

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

オーバーレイ

コンテナ

ヘッダー

メッセージエリア

入力エリア

その他