Text UI 以外のチャットメッセージ

オペレーターからエンドユーザーに送ることのできるメッセージには、いくつかの種類があり、その種類によって表示の仕方が異なります。

通常のメッセージは Text UI で表示されますが、バッククォートで JSON を囲んだ特殊な記法を用いることで、複雑なメッセージを送信することができます。送信可能な UI は以下の通りです。この記事では Text UI 以外の UI について説明します。

  • Text UI

  • Buttons UI

  • Links UI

  • Confirm Card 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 + "`"});