Cómo enviar tarjetas enriquecidas y carruseles

Esta guía explica cómo enviar tarjetas enriquecidas y carruseles usando la API de Messages API de Vonage. Para obtener más detalles sobre los diferentes tipos de mensajes y sus componentes, consulta Tipos de tarjetas enriquecidas y carruseles.

Enviar Rich Card

Una tarjeta enriquecida te permite enviar mensajes visualmente atractivos a los usuarios de RCS. Las tarjetas pueden incluir un título, texto, medios (como una imagen o un vídeo) y hasta cuatro respuestas o acciones sugeridas.

Requisitos previos

Tienes la mensajería RCS habilitada para tu aplicación. Ver Primeros pasos con RCS.
Ya tienes configurada tu marca, agente y credenciales API. Consulte Guía del constructor de marcas y agentes de RCS.

Definir los elementos de la tarjeta enriquecida

Cada card debe incluir:

title - Título de la tarjeta (máximo 200 caracteres)
text - Una descripción de texto (máx. 2000 caracteres)
media_url - Una URL pública de la imagen o el vídeo

También puedes añadir opcionalmente:

media_height - SHORT, MEDIUMo TALL
media_description - para la accesibilidad
thumbnail_url - imagen de marcador de posición mientras se cargan los medios de comunicación
suggestions - respuestas o acciones interactivas sugeridas

Añadir los parámetros RCS

Un mensaje de tarjeta RCS debe incluir un rcs especificando:

card_orientation: VERTICAL o HORIZONTAL
image_alignment: LEFT o RIGHT (sólo para tarjetas horizontales)

Enviar el mensaje

Utilizar la API Messages POST e incluya la tarjeta enriquecida en el cuerpo de la solicitud.

He aquí un ejemplo de mensaje de tarjeta enriquecida independiente:

{
  "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 un carrusel

Un rico carrusel de tarjetas te permite combinar de 2 a 10 tarjetas en un solo mensaje. Cada tarjeta puede tener sus propios medios y sugerencias.

Cada tarjeta debe incluir:

title - Título de la tarjeta (máximo 200 caracteres)
text - Descripción del texto (máx. 2000 caracteres)
media_url - URL pública de una imagen o vídeo

Parámetros opcionales (por tarjeta):

media_height - SHORT, MEDIUMo TALL
media_description - para la accesibilidad
thumbnail_url - se muestra mientras se carga el medio
media_force_refresh - si se debe forzar la actualización
suggestions - hasta 4 respuestas o acciones sugeridas

{
 "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"
 }
}