La mensajería enriquecida e interactiva sustituye las indicaciones de texto libre por UI estructurada: las tarjetas enriquecidas y los carruseles presentan contenido multimedia con acciones, las respuestas sugeridas y los botones de respuesta rápida ofrecen opciones tocables, y los selectores de lista presentan un menú. RCS (vía RBM) y WhatsApp los admiten ambos con cargas útiles y límites distintos, así que los remitentes diseñan a las restricciones más estrictas y proporcionan alternativas de texto.
Del texto libre a la interacción estructurada
El valor de los canales enriquecidos frente al SMS no es solo el contenido multimedia: es la interacción estructurada. En vez de pedir a un cliente que escriba "1 para seguimiento, 2 para soporte", un mensaje interactivo presenta elementos tocables: tarjetas que combinan una imagen, título, descripción y botones; respuestas sugeridas que envían una respuesta predefinida; y selectores que ofrecen un menú acotado. Cada toque devuelve un valor legible por máquina (una cadena de postback, un ID de botón) en vez de texto libre, de modo que la lógica del remitente se ramifica de forma determinista en vez de analizar lenguaje natural. Tanto RCS Business Messaging como WhatsApp Business Platform proporcionan estos elementos, con nombres, formas de carga útil y límites distintos, así que el trabajo de diseño es expresar una interacción en el vocabulario y las restricciones de cada plataforma.
| Elemento | RCS (RBM) | |
|---|---|---|
| Tarjeta enriquecida única | Tarjeta enriquecida independiente | Encabezado multimedia + cuerpo interactivo |
| Conjunto horizontal de tarjetas | Carrusel de tarjetas enriquecidas | Listado de productos / multiproducto (comercio) |
| Selección rápida mediante toque | Respuesta sugerida | Botones de respuesta interactivos |
| Acción (marcar/URL/etc.) | Acción sugerida | URL / botón de llamada a la acción |
| Menú de opciones | (sugerencias) | Mensaje de lista (selector de lista) |
Tarjetas enriquecidas y carruseles
Una tarjeta enriquecida agrupa un elemento multimedia (imagen o vídeo), un título, una descripción y un conjunto de sugerencias en un único mensaje visualmente prominente, ideal para un resumen de pedido, un producto o una reserva con una llamada a la acción clara. Un carrusel es un conjunto de tarjetas enriquecidas desplazable horizontalmente, usado para presentar un pequeño catálogo de opciones (unos productos, una elección de franjas de cita) en un único mensaje. En RBM, una tarjeta enriquecida independiente lleva una altura de contenido multimedia, título, descripción y sus propias sugerencias; un carrusel envuelve varias de esas tarjetas con un ancho de tarjeta. WhatsApp expresa una riqueza comparable mediante cabeceras multimedia con cuerpos interactivos y, para el comercio, mensajes de producto y multiproducto. El número de tarjetas, los tamaños de imagen y las longitudes de texto están topados por plataforma, así que un carrusel se diseña al menor de los dos límites.
{
"contentMessage": {
"richCard": {
"standaloneCard": {
"cardOrientation": "VERTICAL",
"cardContent": {
"title": "Order #4021",
"description": "Arriving Friday. Track or change delivery.",
"media": { "height": "MEDIUM",
"contentInfo": { "fileUrl": "https://brand.example/pkg.jpg" } },
"suggestions": [
{ "reply": { "text": "Track", "postbackData": "track_4021" } },
{ "action": { "text": "Reschedule", "postbackData": "resched_4021",
"openUrlAction": { "url": "https://brand.example/r/4021" } } }
]
}
}
}
}
}Respuestas y acciones sugeridas y botones de respuesta rápida
El elemento interactivo más simple es un chip tocable. En RCS estos son sugerencias de dos tipos: una respuesta sugerida envía texto predefinido de vuelta al agente con sus datos de postback, y una acción sugerida realiza una acción del dispositivo —marcar un número, abrir una URL, abrir el mapa, crear un evento de calendario, solicitar ubicación—. El equivalente de WhatsApp para un mensaje plano son los botones de respuesta interactivos: hasta tres botones de respuesta rápida cuyo toque devuelve un ID de botón, más botones de URL y de llamada para las acciones. Ambas plataformas topan el número y la longitud de etiqueta de estos chips (las sugerencias de RCS y el límite de tres botones de WhatsApp), así que una interacción con más de unas pocas opciones debe usar un selector de lista en vez de botones.
{
"messaging_product": "whatsapp",
"to": "15551234567",
"type": "interactive",
"interactive": {
"type": "button",
"body": { "text": "Your order #4021 has shipped. What next?" },
"action": { "buttons": [
{ "type": "reply", "reply": { "id": "track_4021", "title": "Track" } },
{ "type": "reply", "reply": { "id": "resched_4021", "title": "Reschedule" } },
{ "type": "reply", "reply": { "id": "support", "title": "Help" } }
] }
}
}Selectores de lista para conjuntos de opciones mayores
Cuando hay más opciones de las que unos pocos botones pueden contener, un selector de lista presenta un menú desplazable. El mensaje de lista de WhatsApp muestra un botón que abre una lista de filas agrupadas en secciones, cada fila con un título, una descripción opcional y un ID devuelto al seleccionar, apto para un menú de servicios, franjas horarias o temas de FAQ que desbordaría el límite de tres botones. RCS presenta conjuntos de opciones mayores mediante múltiples sugerencias o un carrusel de tarjetas en vez de un único widget de lista nativo, así que un diseño entre canales mapea "elige una de muchas" a una lista de WhatsApp en WhatsApp y a un carrusel o conjunto de sugerencias en RCS. El resultado de la interacción es el mismo en ambos: un único ID seleccionado sobre el que actúa la lógica del remitente.
{
"type": "interactive",
"interactive": {
"type": "list",
"body": { "text": "Choose an appointment time" },
"action": {
"button": "View times",
"sections": [
{ "title": "Friday", "rows": [
{ "id": "fri_0900", "title": "09:00" },
{ "id": "fri_1330", "title": "13:30" } ] },
{ "title": "Saturday", "rows": [
{ "id": "sat_1000", "title": "10:00" } ] }
]
}
}
}Notas de UX y accesibilidad
La mensajería interactiva solo ayuda si se degrada con elegancia y sigue siendo usable para todos. Como el contenido enriquecido no es universalmente alcanzable, todo mensaje interactivo debería llevar un cuerpo de texto significativo para que siga teniendo sentido cuando hace fallback a SMS o se renderiza en un cliente que no puede mostrar el widget: los botones pueden desaparecer, pero el mensaje no debe volverse ininteligible. Mantén las etiquetas de botón y fila cortas, inequívocas y orientadas a la acción ("Seguir", no "Haga clic aquí"), ya que las etiquetas largas se truncan y las vagas fallan con los lectores de pantalla. Respeta los topes de cada plataforma (los tres botones de respuesta de WhatsApp, los límites de filas de lista; el número de sugerencias de RCS) en vez de intentar superarlos. Proporciona texto alt/descriptivo para el contenido multimedia donde la plataforma lo admita, evita depender solo del color o la imagen para transmitir significado, y asegúrate de que cualquier acción que dispare un botón sea también alcanzable de otra forma, para que la interacción sea conveniente, no el único camino.
| Directriz | Por qué |
|---|---|
| Incluya siempre un cuerpo de texto | Sobrevive al respaldo a SMS y a clientes no enriquecidos |
| Etiquetas breves y orientadas a la acción | Truncamiento y claridad para lectores de pantalla |
| Mantenerse dentro de los límites de la plataforma | Los botones/filas que superen el límite serán rechazados |
| No te fíes solo del color/imagen | Accesibilidad para personas con baja visión y sistemas de respaldo |
| Proporcione una ruta alternativa para cada acción | La interacción es una conveniencia, no la única ruta |
Preguntas frecuentes
¿Qué es una tarjeta enriquecida?
Una tarjeta enriquecida es un mensaje estructurado que agrupa un elemento multimedia (imagen o vídeo), un título, una descripción y un conjunto de sugerencias o botones tocables en un único mensaje prominente, para un resumen de pedido, un producto o una reserva. RCS la llama tarjeta enriquecida independiente; WhatsApp logra una riqueza comparable con una cabecera multimedia y un cuerpo interactivo.
¿Qué es un carrusel?
Un carrusel es un conjunto de tarjetas enriquecidas desplazable horizontalmente presentado en un único mensaje, usado para mostrar un pequeño conjunto de opciones como unos productos o franjas de cita. En RBM envuelve varias tarjetas enriquecidas; WhatsApp expresa una riqueza multiartículo similar mediante mensajes de comercio de producto y multiproducto. El número y los tamaños de las tarjetas están topados por plataforma.
¿Cuál es la diferencia entre una respuesta sugerida y una acción sugerida?
En RCS, una respuesta sugerida envía texto predefinido de vuelta al agente con datos de postback, de modo que el usuario elige una respuesta enlatada. Una acción sugerida realiza en cambio una acción del dispositivo: marcar un número, abrir una URL, abrir el mapa, crear un evento de calendario o compartir ubicación. Los equivalentes de WhatsApp son los botones de respuesta y los botones de URL/llamada.
¿Cuándo debería usar un selector de lista en vez de botones?
Cuando hay más opciones de las que unos pocos botones pueden contener. WhatsApp topa los botones de respuesta interactivos en tres, así que un menú de servicios, franjas horarias o temas debería usar un mensaje de lista: un botón que abre filas agrupadas y desplazables, cada una devolviendo un ID al seleccionar. En RCS, la misma idea se mapea a múltiples sugerencias o a un carrusel.
¿Cuántos botones puede tener un mensaje interactivo de WhatsApp?
Un mensaje interactivo de WhatsApp admite hasta tres botones de respuesta rápida, cada uno devolviendo un ID de botón al tocarlo. Para más opciones se usa un mensaje de lista (selector de lista), que presenta filas agrupadas tras un único botón. Superar el límite de botones provoca que el mensaje se rechace, así que los conjuntos de opciones mayores deben usar una lista.
¿Cómo mantengo accesibles los mensajes interactivos?
Incluye siempre un cuerpo de texto significativo para que el mensaje sobreviva al fallback a SMS y a clientes no enriquecidos; mantén las etiquetas cortas y orientadas a la acción; respeta los topes de botones y filas de cada plataforma; no dependas solo del color o la imagen para transmitir significado; proporciona texto alt del contenido multimedia donde se admita; y asegúrate de que toda acción de botón sea también alcanzable de otra forma.
Especificaciones de la fuente
Las normas publicadas en las que se basa esta página. Se abre en una pestaña nueva.