ボタン

    ボタンを表示するコンポーネントです。ユーザーがボタンをタップすると、指定したアクションが実行されます。

    API の種類

    サーバー API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request Content

    パラメータ タイプ 必須 説明
    type string Y "button"
    action string Y ボタンをタップした時に実行されるアクション。Action Objectを指定します。
    flex number N 親要素内における、このコンポーネントの幅または高さの比率。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの幅と高さ」を参照してください。
    margin string N 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ。詳しくは『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの margin プロパティ」を参照してください。
    position string N offsetTop, offsetBottom, offsetStart, offsetEndの基準。以下のいずれかの値を指定します。

    relative : 直前のボックスを基準とします。
    absolute : 親要素の左上を基準とします。

    デフォルト値は relative です。 詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetTop string N 上側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetBottom string N 下側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetStart string N 左側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetEnd string N 右側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    height string N ボタンの高さ。 sm または md に指定できます。デフォルト値は md です。
    style string N ボタンの表示形式。以下のいずれかの値を指定します。

    primary : 濃色のボタン向けのスタイル
    secondary : 淡色のボタン向けのスタイル
    link : HTMLリンクのスタイル

    デフォルト値は link です。
    color string N styleプロパティが link の場合には文字の色。
    styleプロパティが primary または secondary の場合には背景色を指定します。
    16進数カラーコードで設定します。
    gravity string N 垂直方向の配置方法。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「垂直方向の配置」を参照してください。

    Request Example

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "spacing": "md",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "action": {
              "type": "uri",
              "label": "Primary style button",
              "uri": "http://worksmobile.com"
            }
          },
          {
            "type": "button",
            "style": "secondary",
            "action": {
              "type": "uri",
              "label": "Secondary style button",
              "uri": "http://worksmobile.com"
            }
          },
          {
            "type": "button",
            "style": "link",
            "action": {
              "type": "uri",
              "label": "Link style button",
              "uri": "http://worksmobile.com"
            }
          }
        ]
      }
    }