リッチカードとカルーセルの送り方

このガイドでは、Vonage Messages APIを使用してリッチカードとカルーセルを送信する方法を説明します。さまざまなタイプのメッセージとそのコンポーネントの詳細については、以下を参照してください。 リッチカードとカルーセルの種類.

リッチカードを送る

リッチカードを使用すると、RCSユーザーに視覚的に魅力的なメッセージを送信できます。カードには、タイトル、テキスト、メディア（画像や動画など）、最大4つの返信候補やアクションを含めることができます。

前提条件

リッチカードの要素を定義する

それぞれ card オブジェクトが含まれていなければならない：

  • title - カードのタイトル（200文字以内）
  • text - 説明文（2000文字以内）
  • media_url - 画像またはビデオの公開URL

オプションで追加することもできる：

  • media_height - SHORT, MEDIUMあるいは TALL
  • media_description - アクセシビリティ
  • thumbnail_url - メディア読み込み中のプレースホルダ画像
  • suggestions - インタラクティブな返信やアクションの提案

RCSパラメータの追加

RCSカード・メッセージには rcs オブジェクトを指定する：

  • card_orientation: VERTICAL または HORIZONTAL
  • image_alignment: LEFT または RIGHT (横長カードのみ）

メッセージを送る

Messages APIを使う POST エンドポイントにリッチカードをリクエストボディに含める。

単体のリッチカードメッセージの例です：

{
  "to": "447700900000",
  "from": "Vonage",
  "channel": "rcs",
  "message_type": "card",
  "card": {
    "title": "Hello, world!",
    "text": "This is some text to display on the card.",
    "media_url": "https://example.com/image.jpg",
    "media_description": "Image description for accessibility purposes.",
    "media_height": "TALL",
    "thumbnail_url": "https://example.com/thumbnail.jpg",
    "media_force_refresh": false,
    "suggestions": [
      {
        "type": "suggested_reply",
        "text": "Suggestion #1",
        "postback_data": "suggestion_1"
      },
      {
        "type": "suggested_reply",
        "text": "Suggestion #2",
        "postback_data": "suggestion_2"
      }
    ]
  },
  "rcs": {
    "image_alignment": "RIGHT",
    "card_orientation": "VERTICAL"
  }
}

カルーセルを送る

リッチカードカルーセルでは、2～10枚のカードを1つのメッセージにまとめることができます。各カードは独自のメディアと提案を持つことができます。

各カードには、以下の内容が含まれていなければならない：

  • title - カードのタイトル（200文字以内）
  • text - テキスト説明（最大2000文字）
  • media_url - 画像またはビデオの公開URL

オプションのパラメータ（カード1枚につき）：

  • media_height - SHORT, MEDIUMあるいは TALL
  • media_description - アクセシビリティ
  • thumbnail_url - メディアのロード中に表示される
  • media_force_refresh - 強制リフレッシュするかどうか
  • suggestions - 4つまでの返信またはアクションの提案
{
 "to": "447700900000",
 "from": "Vonage",
 "channel": "rcs",
 "message_type": "carousel",
 "carousel": {
   "cards": [
     {
       "title": "Card 1",
       "text": "Description for card 1",
       "media_url": "https://example.com/image1.jpg",
       "media_height": "TALL",
       "suggestions": [
         {
           "type": "reply",
           "text": "Yes",
           "postback_data": "suggestion_1"
         }
       ]
     },
     {
       "title": "Card 2",
       "text": "Description for card 2",
       "media_url": "https://example.com/image2.jpg",
       "media_height": "TALL",
       "suggestions": [
         {
           "type": "reply",
           "text": "No",
           "postback_data": "suggestion_2"
         }
       ]
     }
   ]
 },
 "rcs": {
   "card_width": "MEDIUM"
 }
}

詳細情報