Product Card Carousel Templates

Product card carousel templates allow you to send a single text message accompanied by a set of up to 10 product cards in a horizontally scrollable view:

When a WhatsApp user taps the View button, they can view more information about the product, add the product to a shopping cart, and place an order, all without leaving the WhatsApp client experience. If instead you prefer to send the user to your website when they click the button, see Media Card Carousel Templates.

Product Cards

Carousel templates support up to 10 product cards, composed of message body text, a product image, product title, product price, and a single View button or URL button. All cards defined on a template must have the same components.

View Buttons

When a WhatsApp user taps the button, the product details view appears, displaying product information pulled from your product catalog.

Users can then add the product to a cart and place an order.

When a user submits the cart, a webhook will be triggered describing the order, and an order confirmation message will appear in the message thread.

Users who have placed an order can see the contents of the order by tapping the View details button.

URL Buttons

Instead of View buttons you may wish to use URL buttons. When a WhatsApp user taps a URL button to buy a product, the URL mapped to the button is loaded in the device's default web browser, which takes the user out of the WhatsApp client experience. This can be useful if, for example, you wish to load the product in your mobile checkout page where users can add promo codes and find related products.

WIth URL button flows, since order placement happens outside of the WhatsApp client, webhooks describing the order are not triggered.

Catalogs

To use product card carousel templates, you must have an ecommerce product catalog, with inventory, connected to your WhatsApp Business Account. See the Cloud API Commerce guide to learn more about connecting a catalog to your account.

Webhooks

If you send a carousel template composed of product cards that use a View button, when a customer adds one or more products to their cart and submits an order, we will send you a webhook that describes the order.

Creating Product Card Carousel Templates

Use the POST /<WHATSAPP_BUSINESS_ACCOUNT_ID>/message_templates endpoint to create a product card carousel template.

Request Syntax

POST /<WHATSAPP_BUSINESS_ACCOUNT_ID>/message_templates

Post Body

It is only necessary to define two product cards upon template creation. An approved template with two product cards can be used to send up to 10 cards in a template message.

{
  "name": "<TEMPLATE_NAME>",
  "language": "<TEMPLATE_LANGUAGE>",
  "category": "marketing",
  "components": [
    {
      "type": "body",
      "text": "<MESSAGE_BODY_TEXT>",
      "example": {
        "body_text": [
          [
            "<MESSAGE_BODY_TEXT_VARIABLE_EXAMPLE>",
            "<MESSAGE_BODY_TEXT_VARIABLE_EXAMPLE>"
          ]
        ]
      }
    },
    {
      "type": "carousel",
      "cards": [

        /* First product card */
        {
          "components": [
            {
              "type": "header",
              "format": "product"
            },

            /* Supports 1 button only, can be either an SPM button or URL button */
            {
              "type": "buttons",
              "buttons": [

                /* SPM button */
                {
                  "type": "spm",
                  "text": "View"
                }

                /* URL button */
                {
                  "type": "url",
                  "text": "<URL_BUTTON_LABEL_TEXT>",
                  "url": "<URL_BUTTON_URL>",
                  "example": [
                    "<URL_BUTTON_URL_VARIABLE_EXAMPLE>"
                  ]
                }

              ]
            }
          ]
        },
     
        /* Second product card would follow, using same structure as
           first card. It is only necessary to define two cards. */

      ]
    }
  ]
}

Post Body Parameters

Example Request

This example request creates a product card carousel template with a message body that uses a single variable and two product cards. Once approved, it can be used to send up to 10 product cards in a template message.

curl 'https://graph.facebook.com/v21.0/161311403722088/message_templates' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer EAAJB...' \
-d '
{
  "name": "carousel_template_product_cards_v1",
  "language": "en_US",
  "category": "marketing",
  "components": [
    {
      "type": "body",
      "text": "Rare succulents for sale! {{1}}, add these unique plants to your collection. All three of these rare succulents are available for purchase on our website, and they come with a 100% satisfaction guarantee. Whether you're a seasoned succulent enthusiast or just starting your plant collection, these rare succulents are sure to impress. Shop now and add some unique and beautiful plants to your collection!",
      "example": {
        "body_text": "Pablo"
      }
    },
    {
      "type": "carousel",
      "cards": [
        {
          "components": [
            {
              "type": "header",
              "format": "product"
            },
            {
              "type": "buttons",
              "buttons": [
                {
                  "type": "spm",
                  "text": "View"
                }
              ]
            }
          ]
        },
        {
          "components": [
            {
              "type": "header",
              "format": "product"
            },
            {
              "type": "buttons",
              "buttons": [
                {
                  "type": "spm",
                  "text": "View"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}'

Sending Product Card Carousel Templates

Once your catalog template is approved, you can use the Cloud API to send it in a template message.