Os cards avançados combinam mídia, texto e sugestões em uma mensagem. Elas se concentram em um único tópico e oferecem ações claras aos usuários.
Um card avançado pode conter o seguinte:
- Mídia (imagem/GIF, vídeo ou arquivo PDF)
- Texto do título
- Texto da descrição
- Respostas e ações sugeridas.
Cada um desses campos é opcional, mas pelo menos um dos campos de 1 a 3 precisa ser incluído no card avançado.
Componentes de Rich Cards
Mídia
Os rich cards podem incluir várias mídias, como imagens, GIFs, vídeos e arquivos PDF. Os Rich Cards são compatíveis com vários formatos de mídia.
Tipos de imagens compatíveis:
- JPEG/JPG
- GIF
- PNG
Tipos de vídeo compatíveis:
- H.263
- M4V
- MP4
- MPEG
- MPEG-4
- WebM
Tipos de arquivo compatíveis (disponíveis apenas na Índia no cliente do Google Mensagens):
Você pode escolher entre três alturas de mídia para um card rich:
| Tipo de mídia | Altura da mídia |
|---|---|
| Mídia curta | 112 DP |
| Mídia média | 168 DP |
| Mídia alta | 264 DP |
DP significa pixels de densidade independente, que são unidades projetadas para fornecer um tamanho físico consistente para elementos da interface em telas com diferentes densidades de pixel.
Se as dimensões da mídia não corresponderem à altura selecionada, o sistema vai aplicar zoom e cortar a mídia automaticamente no centro. Esse corte pode resultar em uma prévia indesejável. Para mostrar a imagem exata que você quer, especifique uma miniatura. Ao clicar na visualização ou miniatura, uma visualização em tela cheia do arquivo de mídia é aberta.
Os arquivos PDF mostram uma imagem de prévia com base na primeira página do arquivo, mesmo que uma miniatura seja fornecida. Ao clicar na imagem de visualização, o arquivo é aberto em um leitor de PDF. Quando uma prévia não está disponível (por exemplo, quando o arquivo está protegido por senha), o arquivo PDF mostra a imagem em miniatura ou um ícone padrão se uma miniatura não for especificada.
Faça upload de mídia especificando um URL ou enviando um arquivo diretamente. Para mais informações, consulte a página Enviar mensagens.
Miniatura
O tamanho máximo de uma miniatura é 100 kB. Para uma experiência ideal, recomendamos que ele tenha 50 kB ou menos. Se você não fornecer uma miniatura, um ícone padrão será mostrado. A miniatura permanece visível durante o download do arquivo, mesmo que ele falhe, e também serve como prévia dos vídeos baixados. Ao tocar na miniatura ou no ícone padrão, uma visualização em tela cheia do arquivo de mídia é aberta.
Texto do título
O título do seu card avançado é como um título que chama a atenção do usuário e dá uma ideia clara sobre o conteúdo da mensagem. Ele precisa ser conciso e informativo. Ele pode ter até 200 caracteres.
Descrição
A descrição do Rich Card inclui informações de suporte essenciais. É aqui que você elabora o título, destaca os principais benefícios e gera conversões com uma call-to-action clara. A descrição pode ter até 2.000 caracteres.
Respostas e ações sugeridas
Cada card avançado pode conter até quatro respostas sugeridas e ações sugeridas. Além disso, você pode adicionar até 11 sugestões abaixo do card em uma lista de ícones, assim como faria em uma mensagem de texto. As respostas e ações sugeridas em uma lista de ícones são uma forma de avançar a conversa. Eles não devem repetir as opções listadas no card avançado e não são ferramentas de seleção para os itens apresentados em um carrossel.
Confira informações detalhadas sobre as sugestões neste artigo.
Respostas sugeridas
As respostas sugeridas ajudam os usuários a interagir com seu agente de maneiras que ele pode responder facilmente. A menos que a interação exija uma resposta livre, use respostas sugeridas. Eles são mais fáceis de processar do que texto livre e permitem que seu agente conduza as conversas por um caminho ideal.
As respostas sugeridas podem ter até 25 caracteres.
Ações sugeridas
As ações sugeridas permitem que um agente se conecte a ações nativas do dispositivo e oferecem uma experiência bem integrada para o usuário. Quando relevantes, as ações sugeridas facilitam a ligação para o suporte ao cliente ou a localização de um lugar no mapa.
Mas não sobrecarregue os usuários com opções. Forneça apenas ações relacionadas à mensagem mais recente e apenas as ações necessárias. Limite o número de ações e respostas sugeridas ao que é útil para o usuário em um determinado contexto.
As ações sugeridas podem ter até 25 caracteres.
Layout do Rich Card
Os cards avançados podem ter um layout vertical ou horizontal.
Rich Cards verticais
Os cards avançados verticais mostram mídia horizontal na parte de cima. A altura mínima de um Rich Card vertical é de 112 DP.
A mídia usada em um card avançado vertical pode ter a seguinte altura:
- Curta: 112 DP
- Média: 168 DP
- Grande: 264 DP
A mídia usada em um card rich vertical pode ter uma proporção de:
- 2:1
- 16:9
- 7:3
Rich Cards horizontais
Os cards avançados horizontais mostram mídia no lado esquerdo ou direito do card.
Um rich card horizontal não tem uma proporção de mídia fixa, mas uma largura fixa de 128 DP. A altura é ajustada à altura dos elementos de texto no card.
Carrosséis de Rich Cards
Você pode enviar um Rich Card independente ou um carrossel deles.
Os carrosséis de rich cards são ideais para mostrar vários itens, como planos de dados ou dispositivos, permitindo que os usuários naveguem e comparem diferentes opções em uma única mensagem. Um carrossel é ideal quando você quer apresentar uma variedade de opções ou permitir a exploração de conteúdo relacionado.
O primeiro item de um carrossel precisa ser a opção ideal, e o motivo precisa ser claro para o usuário. É possível ter até dez cards em um carrossel de cards avançados. Os carrosséis de cards avançados só podem conter cards avançados verticais.
Assim como em uma mensagem de rich card independente, você pode incluir ícones de sugestão abaixo de um carrossel para avançar a conversa. Os chips de sugestão não devem repetir as opções listadas no carrossel e não são ferramentas de seleção para os itens apresentados nele.
Especificações do carrossel
| Especificação | Detalhes |
|---|---|
| Title | Máximo de 200 caracteres |
| Descrição | Máximo de 2.000 caracteres |
| Height | • Carrosséis pequenos: altura máxima de 542 DP • Carrosséis médios: altura máxima de 592 DP Todos os cards em um carrossel serão dimensionados para corresponder à altura do card mais alto. Para detalhes sobre como o conteúdo é ajustado para se adequar a essa altura, consulte Dimensionamento e truncamento de conteúdo. |
| Largura | Escolha uma das seguintes opções: • Pequena: 180 DP (largura fixa) • Média: 296 DP (largura fixa) |
Dimensionamento e truncamento de conteúdo
Se o conteúdo de um carrossel de rich cards não for grande o suficiente para preencher a altura mínima, um espaço em branco extra será adicionado na parte de baixo. Se o conteúdo exceder a altura máxima, ele será truncado na seguinte ordem:
- Descrição reduzida a uma única linha.
- Título, reduzido a uma única linha.
- Sugestões totalmente removidas.
- Descrição removida completamente.
- Título removido completamente.
Para resolver esse problema de corte e permitir que os usuários sempre vejam o conteúdo completo, o RBM oferece uma visualização expansível em tela cheia para cards em um carrossel. Para mais detalhes sobre esse recurso, consulte Visualização em tela cheia para carrosséis.
Visualização em tela cheia para carrosséis
Para evitar que textos ou sugestões se percam no truncamento, o RBM oferece uma visualização em tela cheia para carrosséis de cards avançados. Isso permite que os designers usem todos os limites de texto, sabendo que os usuários podem abrir o card para ver a mensagem completa.
Detalhes importantes para desenvolvedores
- Nenhuma ação é necessária:esse recurso é ativado automaticamente para todos os carrosséis de cards avançados.
- Escopo:se aplica apenas a carrosséis de cards avançados. Os rich cards independentes não são afetados.
- Limites:todos os limites de caracteres e sugestões para títulos (200), descrições (2.000) e sugestões (4) permanecem os mesmos.
Abrir e fechar a visualização em tela cheia
Para abrir:quando o conteúdo de um card é truncado, um botão Mais aparece no final do texto visível. Um usuário pode tocar em qualquer lugar na área de texto do card ou no botão Mais para abrir a visualização em tela cheia.
Para fechar:os usuários podem sair da visualização em tela cheia das seguintes maneiras:
- Toque no botão X no canto superior esquerdo.
- Use o botão "Voltar" do sistema ou a navegação por gestos para voltar.
- Toque em uma sugestão que continue a conversa.
Navegação em tela cheia
A visualização em tela cheia permite a rolagem vertical em um card e o deslizar horizontal entre eles.
- Rolagem vertical:se o texto de um card ainda for maior do que a visualização em tela cheia, a área de texto e mídia poderá ser rolada verticalmente. As sugestões permanecem "flutuando" e sempre visíveis na parte de baixo da tela.
- Deslizar na horizontal:na visualização em tela cheia, os usuários podem deslizar na horizontal para ir para o próximo ou o card anterior no carrossel.
Rolagem vertical
Deslizar horizontalmente
Especificações para visualização em tela cheia
Quando um card é aberto, ele usa um layout padronizado em tela cheia.
| Especificação | Detalhes |
|---|---|
| Altura da mídia | 264 DP A altura da mídia na visualização em tela cheia sempre usa a configuração de mídia alta. |
| Largura da mídia | screenwidth - 32 DP A mídia se expande para preencher a largura da tela com margens de 16 DP em cada lado. As mesmas regras de corte centralizado se aplicam. |
Como as sugestões funcionam na visualização em tela cheia
Quando um usuário toca em uma sugestão na visualização em tela cheia, o comportamento resultante depende do tipo de sugestão:
| Tipo de sugestão | Comportamento |
|---|---|
| Ação de abrir URL | O URL é aberto no navegador padrão ou em uma sobreposição de visualização da Web. Quando o usuário volta para o Google Mensagens, a visualização em tela cheia é restaurada. |
| Ações Ligar, Ver local e Criar um evento na Agenda | O app correspondente será aberto. Ao voltar para o Google Mensagens, a visualização em tela cheia é restaurada. |
| Ação "Compartilhar local" | A visualização em tela cheia é fechada, e o Google Maps é aberto. Depois que o usuário envia a localização, ele volta automaticamente para a visualização padrão da conversa. |
| Resposta sugerida | A visualização em tela cheia é fechada, e a resposta é enviada na visualização padrão do chat, continuando a conversa. |
Limites
Os títulos dos cards avançados são limitados a 200 caracteres, enquanto as descrições podem ter até 2.000 caracteres. Não se esqueça de que caracteres especiais, como emojis ou um conjunto de caracteres multibyte, contam como 2 a 4 caracteres ou mais.
A mídia em um card ou carrossel de cards avançados pode ter as seguintes alturas:
- Curta: 112 DP
- Média: 168 DP
- Grande: 264 DP
Para que todos os elementos (mídia, títulos, descrições e botões) sejam exibidos corretamente no seu carrossel ou card avançado, eles precisam obedecer aos limites de tamanho e caracteres especificados.
O tamanho máximo de um payload de card avançado é de 250 KB.