Skip to main content

Carousel - Dynamic Content

  • Updated

Index

  1. Product Carousel
  2. Media Carousel
  3. Comparison: Carousel in Templates vs. Flow

 

Product Carousel

Product carousels consist of a set of 2 to 10 product cards integrated into the WABA. It is built as follows:

{
    "interactive": {
        "action": {
            "cards": [
                {
                    "action": {
                        "catalog_id": "123456789",
                        "product_retailer_id": "abc123xyz"
                    },
                    "card_index": 0,
                    "type": "product"
                },
                {
                    "action": {
                        "catalog_id": "123456789",
                        "product_retailer_id": "def456uvw"
                    },
                    "card_index": 1,
                    "type": "product"
                }
            ]
        },
        "body": {
            "text": "Check out our featured products!"
        },
        "type": "carousel"
    },
    "recipient_type": "individual",
    "type": "interactive"
}

Where:

card_index Card position in the carousel (from 0 to 9). Mandatory completion.
action.catalog_id The identifier of the catalog registered in your WABA.
action.product_retailer_id The seller identifier.
body.text Text that will appear above the carousel, with a limit of 1024 characters. Message bubble.

References

Media Carousel

The media carousel is composed of a set of 2 to 10 cards, each containing an image or video and an action button. Its structure is defined as follows:

{
    "interactive": {
        "action": {
            "cards": [
                {
                    "action": {
                        "name": "cta_url",
                        "parameters": {
                            "display_text": "Shop now",
                            "url": "https://shop.example.com/deal1"
                        }
                    },
                    "body": {
                        "text": "Exclusive deal #1"
                    },
                    "card_index": 0,
                    "header": {
                        "image": {
                            "link": "https://example.com/image1.png"
                        },
                        "type": "image"
                    },
                    "type": "cta_url"
                },
                {
                    "action": {
                        "name": "cta_url",
                        "parameters": {
                            "display_text": "Shop now",
                            "url": "https://shop.example.com/deal2"
                        }
                    },
                    "body": {
                        "text": "Exclusive deal #2"
                    },
                    "card_index": 1,
                    "header": {
                        "image": {
                            "link": "https://example.com/image2.png"
                        },
                        "type": "image"
                    },
                    "type": "cta_url"
                }
            ]
        },
        "body": {
            "text": "Check out our latest offers!"
        },
        "type": "carousel"
    },
    "recipient_type": "individual",
    "type": "interactive"
}

Where:

cards.action.paramteres.display_text Defines the text that will be displayed on the action button.
cards.action.paramteres.url Button redirection link.
cards.body.text Text displayed on the card, limited to 1024 characters.
card_index Card position in the carousel (from 0 to 9). Mandatory completion.
header.image.link URL of the card image.
body.text Text that will appear above the carousel, with a limit of 1024 characters. Message bubble.

References:

 

Comparison: Carousel in Templates vs. Flow

The carousel template for active messages is more complete than the version provided by Meta for conversation flows.

While the active messages templates allows multiple buttons (links, texts, or phone), the flow carousel supports only a single button, which must be a link type. Additionally, the flow carousel is not compatible with Meta variables.

Feature Carousel (Active Message) Carousel (Flow)
Qty. of Buttons Multiple Only 1
Button Types Link, Text, or Phone Link Only (URL)
Meta Variables Compatible Not compatible

References:

 

For more information, check out the discussion on this topic in our community or the videos on our channel.😃

Related articles