Skip to contentSkip to navigationSkip to topbar
Twilio Docs
On this page

twilio/card

The twilio/card content type is a structured template which can be used to send a series of related information. It must include a title and at least one additional field.

In the media field of the template you create, provide the URL of the publicly hosted file.

If you are using a media in the card with a variable, submit a sample path of a publicly hosted image URL in the variable array. The combined URL must contain the file type. The combined URL must resolve to a publicly hosted file.

For example, "media": ["https://twilio-cms-prod.s3.amazonaws.com/{{1}}"] would include a path sample in the variables definition: "variables": {"1": "images/library-logo-resource2x.width-1000.png"}

If you are using a call-to-action URL button in your card, the URL must resolve to a publicly accessible website. If there is a variable, a valid path sample should be included in the variables array. The combined URL should resolve to a publicly accessible website.

For example, "url": ["https://www.twilio.com/{{1}}"] would include a path sample in the variables definition: "variables": {"1": "docs"}

Supported channels

supported-channels page anchor
  • RCS
  • WhatsApp
  • Facebook Messenger

Channel specific information

channel-specific-information page anchor

RCS

rcs page anchor
  • The twilio/card can translate to either an RCS rich card or an RCS chip list, depending on the present components.
    • If media isn't present, it translates to a chip list.
    • If media is present, it translates to a rich card.
      • An RCS rich card can have up to four buttons. If more than four buttons are sent with media, the request will fail.
      • If you need to send more than four buttons with media, you will need to send the media and a chip list as separate messages.
      • Rich card does not support subtitle. If subtitle is present in the content template it will be dropped.

WhatsApp

whatsapp page anchor
  • VOICE_CALL is currently a private beta feature in select regions.
  • If the content template is being sent in session over WhatsApp without approval, only three buttons are allowed.
  • On WhatsApp, a card must be approved as a template before it can be sent. Additional approval steps are required if you use variables with twilio/card. A valid media sample is required if a twilio/card content template is created with media and/or variables and you plan to submit this template to WhatsApp for approval. Static media URLs should resolve to publicly hosted media files. Variable media URLs should include a valid media URL suffix in the variable declaration.
  • Only one type of media can be sent per approved variable WhatsApp card template. WhatsApp classifies approved templates into 1 of 3 types of media headers (Image, Video, Document) based on the sample that was submitted. Once the template has been approved, another type of media header can't be sent using the template.
    • For example, if a template is approved with an image, you can't send a video using that same template.
  • If the template's body starts or ends with a variable or has two variables next to each other, the template won't be approved by WhatsApp without a sample variable. For additional information about variables, see Using Variables with Content API.
  • Update the phone number to a valid phone number in the actions array below when creating your template. This template will fail to send otherwise.
  • WhatsApp footers translate to subtitles in twilio/cards.
  • Template approval is required if multiple buttons are present.
  • Button title can only have 20 characters.

Message preview

message-preview page anchor
card content template preview 1.
card content template preview 2.

Data parameters

data-parameters page anchor
ParameterTypeRequiredVariable supportDescription
titlestringYesYesTitle of card.
Maximum length: 1,024 characters
subtitlestringNoNoSubtitle of card.
Maximum length: 60 characters
mediastring[]NoYesThe URL of the media to send with the message. To learn more about supported and accepted media types that can be referenced, see Accepted Content Types for Media for MMS and Guidance on WhatsApp Media Messages.
actionsarrayYesYesCards can contain buttons which are defined using an actions array.

actions properties

actions-properties page anchor

To learn more about see [common components], see common components.

(information)

Info

Limitations:

  • Only one of the two call options can be on a template:
    • PHONE
    • VOICE_CALL
  • Up to two URL buttons are allowed.
  • Up to five quick reply buttons are allowed.
PropertySupported channelsParameters
QUICK_REPLY
  • RCS
  • WhatsApp
  • Facebook Messenger
  • type: QUICK_REPLY
  • title: Button text of quick reply button. Appears in Body and ButtonText fields in inbound when selected by end user. Variables are supported in session.
    Maximum length: 20 characters
  • id: Not visible to end user. Appears in ButtonPayload fields in inbound when selected by end user. Variables are supported.
URL
  • RCS
  • WhatsApp
  • Facebook Messenger
  • type: URL
  • title: Button text of URL redirect button. Variables aren't supported.
    Maximum length: 25 characters
  • url: URL opened when end user clicks the button. Variables are supported at the end of the URL string.
PHONE_NUMBER
  • RCS
  • WhatsApp
  • Facebook Messenger
  • type: PHONE_NUMBER
  • title: Button text of URL redirect button. Variables aren't supported.
    Maximum length: 25 characters
  • phone: E.164 formatted phone number to call when the recipient taps the button. Variables aren't supported.
VOICE_CALLWhatsApp
  • type: VOICE_CALL
  • title: Button text of VoIP call button. Variables aren't supported.
    Maximum length: 25 characters
  • ttl_minutes: Optional parameter. The lifespan of the button in minutes. After this time expires, the button can't be used to start a call to the business. You can use variables. The default is 10,080 minutes (7 days). The expected value is an integer value between 1 and 43,200 minutes (30 days).
COPY_CODEWhatsApp
  • type: COPY_CODE
  • title: Button text of copy code button. Variables aren't supported.
    Maximum length: 25 characters
  • code: Coupon code that is copied to end user clipboard after clicking button. Variables are supported.

Code examples and responses

code-examples-and-responses page anchor
Create a card templateLink to code sample: Create a card template
1
// Install the C# / .NET helper library from twilio.com/docs/csharp/install

2


3
using System;

4
using Twilio;

5
using Twilio.Rest.Content.V1;

6


7
     TwilioClient.Init(accountSid, authToken);

8


9
    // define the twilio/text type for less rich channels (e.g. SMS)

10
    var twilioText = new TwilioText.Builder();

11
    twilioText.WithBody("Hi {{1}}.  Thanks for contacting Owl Air Support. How can we help?");

12


13
    // define the twilio/card type for more rich channels

14
    var twilioCard = new TwilioCard.Builder();

15
    twilioCard.WithTitle("Owl Air Support");

16
    var cardAction1 = new CardAction.Builder()

17
        .WithType(CardActionType.Url)

18
        .WithUrl("https://www.twilio.com")

19
        .WithTitle("Contact Us")

20
        .Build();

21
    twilioCard.WithActions(new List<CardAction>() { cardAction1 });

22


23
    // define all the content types to be part of the template

24
    var types = new Types.Builder();

25
    types.WithTwilioText(twilioText.Build());

26
    types.WithTwilioCard(twilioCard.Build());

27


28
    // build the create request object

29
    var contentCreateRequest = new ContentCreateRequest.Builder();

30
    contentCreateRequest.WithTypes(types.Build());

31
    contentCreateRequest.WithLanguage("en");

32
    contentCreateRequest.WithFriendlyName("owl_air_card");

33
    contentCreateRequest.WithVariables(new Dictionary<string, string>() { {"1", "John"} });

34
    

35
    // create the twilio template

36
    var contentTemplate = await CreateAsync(contentCreateRequest.Build());

37


38
    Console.WriteLine($"Created Twilio Content Template SID: {contentTemplate.Sid}");

Output

1
{

2
  "account_sid": "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

3
  "date_created": "2022-08-30T09:19:17Z",

4
  "date_updated": "2022-08-30T09:19:17Z",

5
  "friendly_name": "owl_air_card",

6
  "language": "en",

7
  "links": {

8
    "approval_create": "https://content.twilio.com/v1/Content/HXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/ApprovalRequests/whatsapp",

9
    "approval_fetch": "https://content.twilio.com/v1/Content/HXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/ApprovalRequests"

10
  },

11
  "sid": "HXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

12
  "types": {

13
    "twilio/card": {

14
      "actions": [

15
        {

16
          "title": "Order Online",

17
          "type": "URL",

18
          "url": "https://www.owlair.com/"

19
        },

20
        {

21
          "phone_number": "+15551234567",

22
          "title": "Call Us",

23
          "type": "PHONE_NUMBER"

24
        }

25
      ],

26
      "body": null,

27
      "media": null,

28
      "subtitle": "To unsubscribe, reply Stop",

29
      "title": "Congratulations, you have reached Elite status! Add code {{1}} for 10% off."

30
    },

31
    "twilio/text": {

32
      "body": "Congratulations, your account reached Elite status, you are now eligible for 10% off any flight! Just add coupon code {{1}} to check out."

33
    }

34
  },

35
  "url": "https://content.twilio.com/v1/Content/HXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

36
  "variables": {

37
    "1": "coupon_code"

38
  }

39
}