Cards deslizáveis tipo carrossel
Empilhe vários cards de mídia atrás de um único cabeçalho para o contato deslizar entre opções. Cada card leva sua própria imagem ou vídeo e seus próprios botões, te dando um mini-catálogo dentro da conversa.
Resumo
O comando #Carousel monta um grupo de cards deslizável horizontalmente. O
cabeçalho define uma capa (imagem ou vídeo) e um título. Depois do cabeçalho, cada card é um
bloco #ButtonMix separado por exatamente cinco barras
(/////). Os cards podem misturar botões de avaliação, copiar código, chamada e URL.
O carrossel está em BETA e não funciona no Android. Use onde tem certeza de que o contato está no iOS, ou use uma sequência de mensagens com botões de imagem como fallback.
Anatomia do carrossel
- Um cabeçalho declarado com
#Carousel, seguido de separadores triple pipe|||, um título, um subtítulo e uma referência de mídia. - Um ou mais cards, cada um um bloco
#ButtonMix. - Cinco barras (
/////) entre cada par de cards depois do primeiro.
Exemplo completo
Um carrossel de quatro cards com capa em vídeo e quatro tipos diferentes:
#Carousel|||Título|||Subtítulo|||video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4||| #ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|button*Bom*id_good/button*Ruim*id_bad/button*Péssimo*id_terrible /////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|copy*Copiar código*000011 /////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|call*Ligar agora*id_call /////#ButtonMix|Título|Subtítulo|video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|url*Visitar site*https%3A%2F%2Fwww.google.com/url*Contato*https%3A%2F%2Fwww.facebook.comCards explicados
Cabeçalho (capa do carrossel)
#Carousel|||Título|||Subtítulo|||video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|||Card 1, botões de avaliação
#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|button*Bom*id_good/button*Ruim*id_bad/button*Péssimo*id_terribleCard 2, botão copiar código
/////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|copy*Copiar código*000011Card 3, botão de chamada
/////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|call*Ligar agora*id_callCard 4, botões de URL sobre vídeo
/////#ButtonMix|Título|Subtítulo|video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|url*Visitar site*https%3A%2F%2Fwww.google.com/url*Contato*https%3A%2F%2Fwww.facebook.comResultado
- O contato vê um balão único com a capa e desliza horizontalmente pelos quatro cards.
- Cada card se comporta conforme o tipo de botão:
- Botões de imagem: registra o ID tocado.
- Botão copiar código: copia o valor e mostra um toast.
- Botão de chamada: abre o discador.
- Botão de URL: abre o link codificado.
- Seu CRM registra cada resposta. No HighLevel o ID volta para a conversa e os workflows ramificam nele.
Notas importantes
- O carrossel está em BETA e não funciona no Android. Sempre teste no dispositivo alvo antes de escalar.
- Imagens precisam ser .jpg. Vídeos .mp4. O limite de tamanho vem do seu CRM, normalmente 5 MB por arquivo.
- Use exatamente cinco barras
/////entre os cards a partir do segundo. - Cada ID de botão precisa ser único e estável em todo o carrossel, não só dentro de um card.
- Mantenha os rótulos curtos, o viewport do carrossel é estreito.
- Os botões de URL exigem links URL-encoded colados como texto puro.
Solução de problemas
O carrossel mostra só o primeiro card
O separador está errado. Cards depois do primeiro devem começar com exatamente cinco
barras (/////). Quatro ou seis quebram o parser.
Os botões de URL abrem um link quebrado
O link não foi URL-encoded. Converta https://...?q=oi mundo para
https%3A%2F%2F...%3Fq%3Doi%20mundo antes de colar.
Carrosséis também funcionam como menus de resposta: combine com gatilhos de tags para que o card escolhido aplique automaticamente uma tag no contato dentro do seu CRM.