Como enviar cartões interativos e carrosséis

Este guia explica como enviar cartões avançados e carrosséis usando a Messages API do Vonage. Para obter mais detalhes sobre os diferentes tipos de mensagens e seus componentes, consulte Tipos de cartões avançados e carrosséis.

Enviar Rich Card

Um cartão avançado permite que você envie mensagens visualmente atraentes para usuários do RCS. Os cartões podem incluir um título, texto, mídia (como uma imagem ou vídeo) e até quatro respostas ou ações sugeridas.

Pré-requisitos

Você ativou o envio de mensagens RCS para seu aplicativo. Consulte Introdução ao RCS.
Você já configurou sua marca, seu agente e suas credenciais de API. Consulte Guia do RCS para a criação de marcas e agentes.

Definir os elementos do Rich Card

Cada card O objeto deve incluir:

title - O título do cartão (máximo de 200 caracteres)
text - Uma descrição em texto (máximo de 2.000 caracteres)
media_url - Um URL público da imagem ou do vídeo

Você também pode, se quiser, adicionar:

media_height - SHORT, MEDIUM, ou TALL
media_description - para acessibilidade
thumbnail_url - imagem provisória enquanto a mídia é carregada
suggestions - sugestões interativas de respostas ou ações

Adicionar os parâmetros RCS

Uma mensagem de cartão RCS deve incluir um rcs objeto que especifica:

card_orientation: VERTICAL ou HORIZONTAL
image_alignment: LEFT ou RIGHT (apenas para cartões horizontais)

Envie a mensagem

Use the Messages API POST ponto de extremidade e inclua o rich card no corpo da solicitação.

Aqui está um exemplo de uma mensagem em “rich card” independente:

{
  "to": "447700900000",
  "from": "Vonage",
  "channel": "rcs",
  "message_type": "card",
  "card": {
    "title": "Hello, world!",
    "text": "This is some text to display on the card.",
    "media_url": "https://example.com/image.jpg",
    "media_description": "Image description for accessibility purposes.",
    "media_height": "TALL",
    "thumbnail_url": "https://example.com/thumbnail.jpg",
    "media_force_refresh": false,
    "suggestions": [
      {
        "type": "suggested_reply",
        "text": "Suggestion #1",
        "postback_data": "suggestion_1"
      },
      {
        "type": "suggested_reply",
        "text": "Suggestion #2",
        "postback_data": "suggestion_2"
      }
    ]
  },
  "rcs": {
    "image_alignment": "RIGHT",
    "card_orientation": "VERTICAL"
  }
}

Enviar um carrossel

Um variado carrossel de cartões permite que você combine de 2 a 10 cartões em uma única mensagem. Cada cartão pode ter seu próprio conteúdo multimídia e sugestões.

Cada cartão deve conter:

title - O título do cartão (máximo de 200 caracteres)
text - Descrição em texto (máximo de 2.000 caracteres)
media_url - Um URL público para uma imagem ou vídeo

Parâmetros opcionais (por cartão):

media_height - SHORT, MEDIUM, ou TALL
media_description - para acessibilidade
thumbnail_url - exibido enquanto a mídia é carregada
media_force_refresh - se deve forçar a atualização
suggestions - até 4 sugestões de respostas ou ações

{
 "to": "447700900000",
 "from": "Vonage",
 "channel": "rcs",
 "message_type": "carousel",
 "carousel": {
   "cards": [
     {
       "title": "Card 1",
       "text": "Description for card 1",
       "media_url": "https://example.com/image1.jpg",
       "media_height": "TALL",
       "suggestions": [
         {
           "type": "reply",
           "text": "Yes",
           "postback_data": "suggestion_1"
         }
       ]
     },
     {
       "title": "Card 2",
       "text": "Description for card 2",
       "media_url": "https://example.com/image2.jpg",
       "media_height": "TALL",
       "suggestions": [
         {
           "type": "reply",
           "text": "No",
           "postback_data": "suggestion_2"
         }
       ]
     }
   ]
 },
 "rcs": {
   "card_width": "MEDIUM"
 }
}