メインコンテンツまでスキップ

Button

Button は操作ボタン付きのカードを送るための message template です。

基本的な使い方​

Button はチャット画面にカードとして表示され、見出し、説明文、操作ボタンを含みます。ボタンをタップするとその動作が実行されます。

Template の構造​

JSON​

{
  "type": "BUTTON",
  "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
  "imageAspectRatio": "rectangle",
  "imageSize": "cover",
  "imageBackgroundColor": "#FFFFFF",
  "title": "商品のご紹介",
  "text": "複数の機能を備えた良質な商品です。",
  "buttons": [
    {
      "label": "すぐ購入する",
      "action": {
        "type": "uri",
        "uri": "https://shop.example.com/buy"
      }
    }
  ],
  "defaultAction": {
    "type": "uri",
    "uri": "https://shop.example.com/product"
  }
}

各項目​

type（必須）​

message template の種類で、常に "BUTTON" です。

thumbnailImageUrl（任意）​

カード上部に表示するサムネイル画像の URL です。

imageAspectRatio（任意）​

画像の縦横比です。

  • "rectangle": 1.51:1
  • "square": 1:1

imageSize（任意）​

画像の拡縮のしかたです。

  • "cover": 領域を覆います。切り取られる場合があります
  • "contain": 画像全体を表示します。余白が出る場合があります

imageBackgroundColor（任意）​

画像の背景色です。"#FFFFFF" のような 16 進数のカラーコードで指定します。

title（必須）​

カードの見出しです。

text（必須）​

カードの説明文です。

buttons（必須）​

操作ボタンの配列です。各ボタンはラベルと動作を持ちます。

defaultAction（任意）​

カード本体（見出し、本文、画像の領域）をタップしたときの既定の動作です。詳しくは Action Object のドキュメントを参照してください。

quickReplies（任意）​

クイックリプライのボタンの配列です。詳しくは Quick Replies を参照してください。

使用例​

Push Message からボタン付きカードを送る手順です。

  1. Template 項目のドロップダウンで Expression を選びます。
  2. エディターに次の JavaScript を入力します。

基本のボタン付きカード​

(() => {
  return {
    type: 'BUTTON',
    title: 'サポートメニュー',
    text: 'どのサービスをご希望ですか。',
    buttons: [
      {
        label: '注文の照会',
        action: {
          type: 'MESSAGE',
          text: '注文を照会したい',
        },
      },
      {
        label: '技術サポート',
        action: {
          type: 'MESSAGE',
          text: '技術サポートが必要です',
        },
      },
    ],
  };
})()