WhatsAppカルーセルテンプレート
メディアカードカルーセルテンプレートを使えば、WhatsApp上の1つのマーケティングテンプレートメッセージで複数の商品を紹介することができます。各商品は横スクロール可能なカードとして表示されるため、ユーザーは複数のメッセージに圧倒されることなく、オファーを閲覧、比較、決定することができます。
このフォーマットは、プロモーションや季節のキャンペーンに特に効果的です。
メディアカードカルーセルテンプレートは、WhatsAppマーケティングテンプレートです：
- 単一のメッセージ本文
- 最大10枚の製品メディアカードを水平方向にスクロールできるカルーセル
各カードは商品やオファーを表し、ユーザーを外部の購入ページや情報ページに誘導するようにデザインされています。
カルーセルカードは、マーケティングテンプレートメッセージでのみサポートされており、ユーティリティテンプレートや認証テンプレートでは使用できません。
カルーセルの構成要素
各カルーセルカードには、以下のコンポーネントを含めることができる：
ヘッダー（必須）
製品を表す画像またはビデオアセット。
本文（オプション）
商品名、価格、プロモーションなどの短い説明テキスト。
ボタン（オプション、カード1枚につき2個まで）
サポートされているボタンの種類は以下の通り：
- URLボタン
- 電話番号ボタン
- クイック返信ボタン
カード内でボタンの種類を混在させることができます（例えば、URLボタンとクイック返信ボタンを1つずつ）。
一貫性の要件
1つのカルーセル・テンプレート内のすべてのカードは、同じコンポーネント・セットを使用しなければなりません。
例えば、1枚のカードに本文と2つのボタンが含まれている場合、すべてのカードに本文と2つのボタンが含まれていなければなりません。
WhatsAppカルーセルテンプレートの作成
メディアカードカルーセルは、テンプレート管理APIを使用してマーケティングテンプレートとして作成する必要があります。
各テンプレートは以下のように構成されている：
- A
BODYコンポーネント（メッセージ全体に適用される） - A
CAROUSEL最大10枚のカードを含むコンポーネント - 各カードは同じコンポーネントを定義しなければならない。
商品推薦カルーセル
この例では、3つの商品カードを含むカルーセル・テンプレートを作成します：
- 画像ヘッダー
- ダイナミックプライスパラメーターを持つボディ
- URLボタンとクイック返信ボタン
{
"name": "sample_carousel_template10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "Hi *{{1}}*. Following your preferences, we think those are the *Vonage* products that match best your needs:",
"example": {
"body_text": "[['Pablo']]"
}
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYMX_ceB7hy4UrocTFGovCrheY7VIeEc0Lxc2fAn_SNsWN5icskgixQ1viE8pPoiiQ6S6Smv6RpaWHNb5mJaUQI4Y7zB6L87QvnTNs3NeVmfg:e:1775210982:1767162543555562:100040931896219:ARYyiV3YGhM1uOFNyKw"]
}
},
{
"type": "BODY",
"text": "*Video API*: As low as {{1}} USD per minute per participant. The best option to have full control on your video app and you want to delight your users!",
"example": {
"body_text": "[['0.00395']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Video API Developer Docs",
"url": "https://tokbox.com/developer/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *Video API*!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYfk5Coa-tyuiaGtJIGbbZpadRtRf6_DRGx1eC4COq2TBS9jESnifBwlvBesVPYsJoJG0vlF8DcQ-SAoynD7_V4AKoVcAbO_fS9tVesGgb-Aw:e:1775210995:1767162543555562:100040931896219:ARYPxK9WzQSw_RPhWnI"]
}
},
{
"type": "BODY",
"text": "*Messages API*: As low as {{1}} EUR per minute per participant. With almost every pre-built for you, this option saves you time to go live!",
"example": {
"body_text": "[['0.00475']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Messages API Page",
"url": "https://www.vonage.com/communications-apis/messages/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *Messages API*!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZWziKvjbUO_8_-zr3gi45fXqs_4kI8A24lPhI1QvREJuojcAEspv6iHMjBvAOJ23j2sT8Y11xn1oFNm_vUsQHNwGTlpodB1Q8OxonGUrmFDw:e:1775211007:1767162543555562:100040931896219:ARa3BLIlI4stgYj9Hzo"]
}
},
{
"type": "BODY",
"text": "*In-App Voice*: Build app-to-app, app-to-phone and phone-to-app use cases. app-to-app calls as low as {{1}} EUR per minute per participant.",
"example": {
"body_text": "[['0.0040']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "In-App Voice Developer Docs",
"url": "https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/overview"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *In-App Voice*!"
}
]
}
]
}
]
}
]
}
応答
Status 202 ACCEPTED
{
"id": "1477582267072231",
"status": "PENDING",
"category": "MARKETING"
}
動的URLパラメータによるカルーセル
このテンプレートは、送信時にURLの一部が提供される動的URLボタンを示します。
{
"name": "sample_carousel_dynamic_links10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "Hi *{{1}}*. Below you have some dynamic links:",
"example": {
"body_text": "[['Pablo']]"
}
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYfk5Coa-tyuiaGtJIGbbZpadRtRf6_DRGx1eC4COq2TBS9jESnifBwlvBesVPYsJoJG0vlF8DcQ-SAoynD7_V4AKoVcAbO_fS9tVesGgb-Aw:e:1775210995:1767162543555562:100040931896219:ARYPxK9WzQSw_RPhWnI"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Messages API"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/messages/"
]
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZWziKvjbUO_8_-zr3gi45fXqs_4kI8A24lPhI1QvREJuojcAEspv6iHMjBvAOJ23j2sT8Y11xn1oFNm_vUsQHNwGTlpodB1Q8OxonGUrmFDw:e:1775211007:1767162543555562:100040931896219:ARa3BLIlI4stgYj9Hzo"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Voice Communications"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/voice/"
]
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYMX_ceB7hy4UrocTFGovCrheY7VIeEc0Lxc2fAn_SNsWN5icskgixQ1viE8pPoiiQ6S6Smv6RpaWHNb5mJaUQI4Y7zB6L87QvnTNs3NeVmfg:e:1775210982:1767162543555562:100040931896219:ARYyiV3YGhM1uOFNyKw"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Video API platform"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/video/"
]
}
]
}
]
}
]
}
]
}
応答
Status 202 Accepted
{
"id": "1635112524349526",
"status": "PENDING",
"category": "MARKETING"
}
パラメータなしの情報カルーセル
このテンプレートは、送信時にパラメータを必要とせず、静的な本文とボタンを使用します。
{
"name": "sample_carousel_quick_reply10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "With *Vonage* you can implement any type of Voice application.\n\nGoing from basic SIP trunks to make calls and receive inbound calls in your Vonage virtual numbes, to complex Voice API applications featuring text-to-speech, speech-to-text, conference rooms, etc.\n\nWe also offer the Client SDK by which you can add In-App Voice capabitilities to your web and native apps"
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYvt342aYJNXghr96KCAaJrEjtBQ1V2MK2AGhspduZc0ALIvV_Ti2Ec3Fr09SyJQAlmLb8OEnymiA25n-RzwVA8qUpXrHozR28OHkVhfCz9vA:e:1775215593:1767162543555562:100040931896219:ARYOpAnR6U-6cAGW8YM"]
}
},
{
"type": "BODY",
"text": "*Vonage SIP Trunking*: Make phone calls worldwide via SIP. Rent a virtual number and receive inbound calls too!"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage SIP Trunking Docs",
"url": "https://developer.vonage.com/en/sip/overview"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about SIP Trunking!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYXBRY83hHNm6fcsll3p7zJsxepaZIuAuKM1YYbbkix--aE3w41wTdGMXY_rN8hYA4etKSS-a6xCygPGETN4C3ZBLBywyE93IFa4mx1Za1q7A:e:1775215701:1767162543555562:100040931896219:ARY6_ZRadoHSHQHYUuU"]
}
},
{
"type": "BODY",
"text": "*Voice API Text-to-Speech*: You can convert text to natural-sounding language in a range of languages and voices"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage Voice API TTS Docs",
"url": "https://www.vonage.com/communications-apis/voice/features/tts/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about Voice API Text-to-Speech!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZtdQZsf61x1CHZuzu9hHpxkny9sBr7JDwg92UEPIgjOkUZdC1_ua19bGNzePg5oig83AbYWDX_itrGormlSiqiU8Pz71jUxpPqTrTnHQGB6Q:e:1775215569:1767162543555562:100040931896219:ARb4jYhguGyuCUukgcE"]
}
},
{
"type": "BODY",
"text": "*Voice Quality Engine*: Deliver high quality voice experiences using our reliable global carrier network."
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage Voice Quality Engine Docs",
"url": "https://www.vonage.com/communications-apis/platform/voice-quality/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about Voice Quality Engine!"
}
]
}
]
}
]
}
]
}
応答
Status 202 ACCEPTED
{
"id": "1214481130497745",
"status": "PENDING",
"category": "MARKETING"
}
カルーセル受信時のユーザー体験
ユーザーがカルーセルカードのURLボタンをタップした場合：
- マップされたURLは、デバイスのデフォルト・ウェブ・ブラウザで開く。
- ユーザーがWhatsAppクライアント体験から外れる
購入はWhatsAppの外で行われるからだ：
- 注文に対してWhatsAppのウェブフックがトリガーされない
- 注文の詳細はWhatsAppのAPIでは確認できません。
メディアファイルのアップロード
メディアを含むカルーセル・テンプレートを送信する前に、メディア・ハンドルを取得するためにメディア・ファイルをアップロードする必要があるかもしれません。Media Upload APIを使用してメディアファイルをアップロードし、メディアハンドルを取得します。
メディア・リクエストをアップロードする：
curl --location 'https://api.nexmo.com/v2/whatsapp-manager/media/uploads?file_type=image%2Fjpg' \
--header 'Authorization: Basic xxxxxxxxxxx' \
--form 'mediafile=@"/Users/pcristobaldelrio/Desktop/client-sdk.png"'