チャットメッセージをカスタマイズする
Text UI 以外のチャットメッセージ
オペレーターからエンドユーザーに送ることのできるメッセージには、いくつかの種類があり、その種類によって表示の仕方が異なります。
通常のメッセージは Text UI で表示されますが、バッククォートで JSON を囲んだ特殊な記法を用いることで、複雑なメッセージを送信することができます。送信可能な UI は以下の通りです。この記事では Text UI 以外の UI について説明します。
- Text UI
- Buttons UI
- Links UI
- Confirm Card UI
各 UI の詳細な仕様はリファレンスをご確認ください。
📘
Text UI 以外のメッセージの用途
一般的には、Chat Bot サーバーとの連携時に使用されることが多いです。
例えば、Bot がエンドユーザーに選択肢を提示し、その選択に応じて複数リンクをレコメンドするなどのユースケースが考えられます。ただし、オペレーターが直接 Text UI 以外の表示形式でメッセージを送信することも可能です。
Buttons UI
- 画像 + タイトル + テキスト + 複数ボタンを提示します
- ボタンクリック時の挙動は下記2通りのいずれか、または両方を設定できます
- 任意イベントの発行
- 任意メッセージの送信
設定例
// メッセージ内容を定義var buttonsMessage = { type: "buttons", title: "お困りですか？", text: "サポートサイトの記事を検索するか、オペレーターのサポートを受けましょう", image: { src: "https://img-cf.karte.io/image/5c24545c3db59c0951d6986f::shutterstock_712414813.jpg" }, buttons: [ { text: "検索したい", value: "search", action: { event: { event_name: "seach_request", field_name: "result" }, message: { text: "検索したい", type: "tag" } } }, { text: "サポートを受けたい", value: "support", action: { event: { event_name: "support_request", field_name: "result" }, message: { text: "サポートを受けたい", type: "tag" } } } ]}// JSON化var buttonsMessageJson = JSON.stringify(buttonsMessage);// JSONをバッククォートで囲んで、textとして送信chat.send({text: "`" + buttonsMessageJson + "`"});Links UI
- 複数リンクを提示します
記述例
// メッセージ内容を定義var linksMessage = { type: "links", links: [ { title: "PLAID公式サイト", url: "https://plaid.co.jp/", same_tab: true }, { title: "KARTE公式サイト", url: "https://karte.io/", same_tab: false } ]}// JSON化var linksMessageJson = JSON.stringify(linksMessage);// JSONをバッククォートで囲んで、textとして送信chat.send({text: "`" + linksMessageJson + "`"});Confirm Card UI
- テキスト + 横並びボタン2つを含むカード型メッセージを提示します
- ボタンクリック時の挙動は下記2通りのいずれか、または両方を指定できます
- 任意イベントの発行
- 任意メッセージの送信
記述例
// メッセージ内容を定義var confirmCardMessage = { type: "confirm-card", title: "質問を終了しますか？", buttons: [ { text: "質問を続ける", value: "continue", action: { event: { "event_name": "refuse_finish_conversation_request", "field_name": "result" } } }, { text: "会話を終了", value: "finish", action: { event: { event_name: "accept_finish_conversation_request", field_name: "result" } }, type: "primary" } ]}// JSON化var confirmCardMessageJson = JSON.stringify(confirmCardMessage);// JSONをバッククォートで囲んで、textとして送信chat.send({text: "`" + confirmCardMessageJson + "`"});Updated over 1 year ago