As mensagens ricas e interativas substituem os pedidos em texto livre por UI estruturada: cartões ricos e carrosséis apresentam multimédia com ações, respostas sugeridas e botões de resposta rápida oferecem escolhas tocáveis, e os seletores de lista apresentam um menu. O RCS (via RBM) e o WhatsApp suportam ambos estes elementos com payloads e limites diferentes, pelo que os remetentes projetam para as restrições mais rigorosas e fornecem alternativas em texto.
Do texto livre à interação estruturada
O valor dos canais ricos face ao SMS não é apenas a multimédia — é a interação estruturada. Em vez de pedir a um cliente que escreva "1 para seguir, 2 para apoio", uma mensagem interativa apresenta elementos tocáveis: cartões que combinam uma imagem, título, descrição e botões; respostas sugeridas que enviam uma resposta predefinida; e seletores que oferecem um menu delimitado. Cada toque devolve um valor legível por máquina (uma cadeia de postback, um ID de botão) em vez de texto livre, pelo que a lógica do remetente ramifica de forma determinística em vez de interpretar linguagem natural. Tanto o RCS Business Messaging como a WhatsApp Business Platform fornecem estes elementos, com nomes, formatos de payload e limites diferentes — pelo que o trabalho de design é exprimir uma interação no vocabulário e nas restrições de cada plataforma.
| Elemento | RCS (RBM) | |
|---|---|---|
| Rich card única | Rich card independente | Cabeçalho multimédia + corpo interativo |
| Conjunto horizontal de cards | Carrossel de rich cards | Lista de produtos / múltiplos produtos (comércio) |
| Seleção rápida que pode ser tocada | Resposta sugerida | Botões de resposta interativos |
| Ação (discar/URL/etc.) | Ação sugerida | URL / botão de chamada para ação |
| Menu de opções | (sugestões) | Mensagem de lista (seletor de lista) |
Cartões ricos e carrosséis
Um cartão rico agrupa um elemento de multimédia (imagem ou vídeo), um título, uma descrição e um conjunto de sugestões numa única mensagem visualmente proeminente — ideal para um resumo de encomenda, um produto ou uma marcação com uma chamada à ação clara. Um carrossel é um conjunto de cartões ricos deslizável na horizontal, usado para apresentar um pequeno catálogo de opções (alguns produtos, uma escolha de horários de marcação) numa única mensagem. No RBM, um cartão rico autónomo transporta uma altura de multimédia, título, descrição e as suas próprias sugestões; um carrossel envolve vários desses cartões com uma largura de cartão. O WhatsApp exprime riqueza comparável através de cabeçalhos de multimédia com corpos interativos e, para comércio, mensagens de produto e de múltiplos produtos. As contagens de cartões, os tamanhos de imagem e os comprimentos de texto são limitados por plataforma, pelo que um carrossel é projetado para o menor dos dois limites.
{
"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" } } }
]
}
}
}
}
}Respostas e ações sugeridas e botões de resposta rápida
O elemento interativo mais simples é uma etiqueta tocável. No RCS estas são sugestões de dois tipos: uma resposta sugerida envia texto predefinido de volta ao agente com os seus dados de postback, e uma ação sugerida executa uma ação do dispositivo — marcar um número, abrir um URL, abrir o mapa, criar um evento de calendário, pedir a localização. O equivalente do WhatsApp para uma mensagem simples são os botões de resposta interativos: até três botões de resposta rápida cujo toque devolve um ID de botão, mais botões de URL e de chamada para ações. Ambas as plataformas limitam o número e o comprimento das etiquetas destas etiquetas (as sugestões do RCS e o limite de três botões do WhatsApp), pelo que uma interação com mais do que algumas escolhas tem de usar um seletor de lista em vez de botões.
{
"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" } }
] }
}
}Seletores de lista para conjuntos de escolhas maiores
Quando há mais opções do que alguns botões conseguem conter, um seletor de lista apresenta um menu deslizável. A mensagem de lista do WhatsApp mostra um botão que abre uma lista de linhas agrupadas em secções, cada linha com um título, descrição opcional e um ID devolvido na seleção — adequada a um menu de serviços, horários ou tópicos de FAQ que ultrapassaria o limite de três botões. O RCS apresenta conjuntos de escolhas maiores através de múltiplas sugestões ou de um carrossel de cartões, em vez de um único widget de lista nativo, pelo que um design transcanal mapeia "escolher uma entre muitas" para uma lista do WhatsApp no WhatsApp e para um carrossel ou conjunto de sugestões no RCS. O resultado da interação é o mesmo em ambos: um único ID selecionado sobre o qual a lógica do remetente atua.
{
"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 e acessibilidade
As mensagens interativas só ajudam se degradarem graciosamente e continuarem utilizáveis por todos. Como o conteúdo rico não é universalmente acessível, cada mensagem interativa deve transportar um corpo de texto significativo, para que continue a fazer sentido quando recorre ao SMS ou é renderizada num cliente que não consegue mostrar o widget — os botões podem desaparecer, mas a mensagem não pode tornar-se sem sentido. Mantenha as etiquetas de botões e de linhas curtas, inequívocas e orientadas à ação ("Seguir", não "Clique aqui"), já que etiquetas longas são truncadas e as vagas falham com os leitores de ecrã. Respeite os limites de cada plataforma (os três botões de resposta do WhatsApp, os limites de linhas de lista; as contagens de sugestões do RCS) em vez de tentar excedê-los. Forneça texto alternativo/descritivo para a multimédia onde a plataforma o suporte, evite depender apenas da cor ou da imagem para transmitir significado, e garanta que qualquer ação que um botão despolete também é alcançável de outra forma — para que a interação seja conveniente e não o único caminho.
| Diretriz | Porquê |
|---|---|
| Inclua sempre um corpo de texto | Resiste ao fallback para SMS e a clientes sem recursos rich |
| Rótulos curtos e focados na ação | Truncamento e clareza para leitores de ecrã |
| Respeite os limites da plataforma | Botões/linhas acima do limite são rejeitados |
| Não confie apenas na cor/imagem | Acessibilidade para baixa visão e fallback |
| Forneça um caminho alternativo para cada ação | A interação é uma questão de conveniência, não a única opção |
Perguntas frequentes
O que é um cartão rico?
Um cartão rico é uma mensagem estruturada que agrupa um elemento de multimédia (imagem ou vídeo), um título, uma descrição e um conjunto de sugestões ou botões tocáveis numa única mensagem proeminente — para um resumo de encomenda, produto ou marcação. O RCS chama-lhe cartão rico autónomo; o WhatsApp alcança riqueza comparável com um cabeçalho de multimédia e um corpo interativo.
O que é um carrossel?
Um carrossel é um conjunto de cartões ricos deslizável na horizontal apresentado numa única mensagem, usado para mostrar um pequeno conjunto de opções, como alguns produtos ou horários de marcação. No RBM envolve vários cartões ricos; o WhatsApp exprime riqueza multi-item semelhante através de mensagens de comércio de produto e de múltiplos produtos. As contagens e os tamanhos de cartões são limitados por plataforma.
Qual é a diferença entre uma resposta sugerida e uma ação sugerida?
No RCS, uma resposta sugerida envia texto predefinido de volta ao agente com dados de postback, pelo que o utilizador escolhe uma resposta enlatada. Uma ação sugerida executa em vez disso uma ação do dispositivo — marcar um número, abrir um URL, abrir o mapa, criar um evento de calendário ou partilhar a localização. Os equivalentes do WhatsApp são os botões de resposta e os botões de URL/chamada.
Quando devo usar um seletor de lista em vez de botões?
Quando há mais escolhas do que alguns botões conseguem conter. O WhatsApp limita os botões de resposta interativos a três, pelo que um menu de serviços, horários ou tópicos deve usar uma mensagem de lista — um botão que abre linhas agrupadas e deslizáveis, cada uma a devolver um ID na seleção. No RCS, a mesma ideia mapeia para múltiplas sugestões ou um carrossel.
Quantos botões pode ter uma mensagem interativa do WhatsApp?
Uma mensagem interativa do WhatsApp suporta até três botões de resposta rápida, cada um a devolver um ID de botão quando tocado. Para mais opções, usa-se uma mensagem de lista (seletor de lista), que apresenta linhas agrupadas por detrás de um único botão. Exceder o limite de botões faz com que a mensagem seja rejeitada, pelo que conjuntos de escolhas maiores têm de usar uma lista.
Como mantenho as mensagens interativas acessíveis?
Inclua sempre um corpo de texto significativo para que a mensagem sobreviva ao fallback para SMS e a clientes não ricos; mantenha as etiquetas curtas e orientadas à ação; respeite os limites de botões e de linhas de cada plataforma; não dependa apenas da cor ou da imagem para transmitir significado; forneça texto alternativo de multimédia onde suportado; e garanta que cada ação de botão também é alcançável de outra forma.
Especificações de origem
Os padrões publicados nos quais esta página se baseia. Abre num novo separador.