サジェステッドレスポンス:表示する
suggested-responses
概要
サジェステッドレスポンスは、会話AI（Chatbot / SpeakAPI）から instructions を通じて、フロントエンドにユーザーが選択できる返信候補（ボタン）を提示する機能です。
ユーザーは表示されたボタンをクリックすることで、指定された発話（メッセージ）を即座に送信できます。
主な用途
- Yes/No の選択肢を提示して会話をスムーズに進める
- ユーザーが次に聞きたいことを誘導する
- よくある質問や深掘り質問を即座に送信させる
仕様
サジェステッドレスポンスの構造
suggestedResponses は instructions 内に 配列として指定します。
配列の各要素は サジェステッドレスポンスオブジェクト です。
サジェステッドレスポンスオブジェクト
フィールド | 型 | 必須 | 説明 |
label | string | ✅ | ボタンに表示されるテキスト |
utterance | string | ✅ | クリック時に送信されるメッセージ |
設定方法（Chatbot / SpeakAPI）
会話AI 側から返すレスポンスの instructions に suggestedResponses を追加します。
設定例
{
"instructions": {
"suggestedResponses": [
{"label":"はい","utterance":"はい" },
{"label":"いいえ","utterance":"いいえ" },
{"label":"詳しく教えて","utterance":"詳しく教えてください" }
]
}
}表示イメージ
サジェステッドレスポンスは、表示モード（フルビュー / オーバーレイ）と、画面サイズ（一般 / スマホ）によって表示位置や見え方が変わります。
フルビュー
一般サイズ：入力欄（マイク・テキスト入力）の右側に表示
スマホサイズ：画面中央上部に表示
オーバーレイ
一般サイズ：オーバーレイの左側に表示
スマホサイズ：画面中央上部に表示
CSS カスタマイズ（見た目の調整）
サジェステッドレスポンスの見た目は、フロントエンド側のCSSで調整できます。
以下のクラス名がボタン表示部分に付与されます。
dhx-suggested-responses-container: サジェステッドレスポンスを表示するコンテナ
dhx-suggested-response-button: サジェステッドレスポンスのボタン本体
背景・服装に合わせたボタンカスタマイズ例
ダーク背景向け
.dhx-suggested-response-button {
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.dhx-suggested-response-button:hover {
background: rgba(0, 0, 0, 0.55) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}ユニバーサル、アクセント
.dhx-suggested-response-button {
background: rgba(94, 106, 210, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 16px rgba(94, 106, 210, 0.15) !important;
}
.dhx-suggested-response-button:hover {
background: rgba(94, 106, 210, 0.55) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
}動作
- 会話AI がレスポンス内で
instructions.suggestedResponsesを返します。
- フロントエンドが
suggestedResponsesを解析し、ボタンUIとして表示します。
- ユーザーがボタンをクリックすると、対応する
utteranceがユーザー発話として送信されます。
推奨（ベストプラクティス）
- 推奨表示数：3個程度
- 表示数に制限はありませんが、多すぎると UI が崩れたり、選択肢が多いとユーザーが迷いやすくなるため、3個前後が最も使いやすいです。
お役に立ちましたか？
😞
😐
🤩
最終更新日 January 9, 2026