チャットメッセージをカスタマイズする
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 10 months ago