twiliotwilio-api

Twilio Carousel Template with Dynamics content on actions


I'm trying to implement a Carousel Template in Twilio for WhatsApp using the Content API. The implementation works well until I include Twilio variables like {{1}} in the actions of a card. Below is a JSON example of my approach:

{
    "friendly_name": "carousel_template",
    "language": "en",
    "types": {
        "twilio/carousel": {
            "body": "Here are some Items that may interest you!",
            "cards": [
                {
                    "title": "{{1}}",
                    "body": "{{2}}",
                    "media": "{{3}}",
                    "actions": [
                        {
                            "type": "QUICK_REPLY",
                            "title": "{{4}}",
                            "id": "{{5}}"
                        },
                        {
                            "type": "URL",
                            "title": "{{6}}",
                            "url": "{{7}}"
                        }
                    ]
                },
                {
                    "title": "{{8}}",
                    "body": "{{9}}",
                    "media": "{{10}}",
                    "actions": [
                        {
                            "type": "QUICK_REPLY",
                            "title": "{{11}}",
                            "id": "{{12}}"
                        },
                        {
                            "type": "URL",
                            "title": "{{13}}",
                            "url": "{{14}}"
                        }
                    ]
                }
            ]
        }
    }
}

When I attempt to create the template via the API, I encounter the following errors:

  1. Button Title text cannot contain emojis or the following characters: [_*~{}\n]
  2. Invalid URL, does not use HTTPS or HTTP protocol

These errors suggest that using Twilio variables in this context might not be feasible. Has anyone successfully implemented a similar setup, or can anyone help me identify the issue?


Solution

  • While I was unable to set the action title to a variable, I successfully solved the issue with the URL for me. It turns out that using a base URL looking something like https://www.baseurl.com/{{1}} works perfectly fine. This method enabled me to partially make a dynamic URL.

    To make sure the template is approved by WhatsApp, it's recommended to add example variables in your JSON:

    {
        "friendly_name": "carousel_template",
        "language": "en",
        "variables": {
            "1": "additional/url/filename.jpg",
            "2": "additional/url",
            "3": "additional/url/filename.jpg",
            "4": "additional/url"
        },
        "types": {
            "twilio/carousel": {
                "body": "Here are some Items that may interest you!",
                "cards": [
                    {
                        "title": "some title",
                        "body": "some body",
                        "media": "https://www.baseurl.com/{{1}}",
                        "actions": [
                            {
                                "type": "URL",
                                "title": "Check out on our webpage",
                                "url": "https://www.baseurl.com/{{2}}"
                            }
                        ]
                    },
                    {
                        "title": "some title",
                        "body": "some body",
                        "media": "https://www.baseurl.com/{{3}}",
                        "actions": [
                            {
                                "type": "URL",
                                "title": "Check out on our webpage",
                                "url": "https://www.baseurl.com/{{4}}"
                            }
                        ]
                    }
                ]
            }
        }
    }