Transforme uma resposta simples em algo que as pessoas possam tocar
Mensagens ricas são componentes interativos que você insere em uma mensagem com um shortcode. A pessoa com quem você está falando vê um card, um conjunto de botões ou um pequeno formulário, preenche e sua resposta é salva na conversa.
Digitar uma lista de opções e esperar que alguém responda com as palavras certas gera trabalho para ambos. Mensagens ricas dão a elas algo para clicar, o que é útil para escolhas, cards de produtos, detalhes de contato, tabelas de preços e vídeos.
Passo a passo
Escreva uma mensagem e adicione um shortcode
Mensagens ricas são inseridas com shortcodes no editor de texto do painel. Digite ou cole o shortcode desejado, por exemplo [buttons options="A,B,C"], e envie a mensagem normalmente. A pessoa do outro lado vê o componente renderizado em vez do texto do shortcode.
Preencha os parâmetros
Cada shortcode aceita seus próprios parâmetros. Um card de produto fica assim: [card image="URL" header="TÍTULO" description="..." link="URL" link-text="Comprar" extra="$599" target="_blank"], enquanto um vídeo é [video type="youtube" id="ID_DO_VÍDEO" height="350"] e aceita youtube ou vimeo.
Adicione os parâmetros globais se precisar
Toda mensagem rica também aceita id, title, message, success e settings. Use title e message para introduzir o componente, e success para o que é exibido depois que a pessoa respondeu.
Escape caracteres problemáticos
Vírgulas, dois-pontos e aspas têm significado dentro de um shortcode, então escape-os no seu texto com uma barra invertida: \, para vírgula, \: para dois-pontos e \" para aspas. Pular isso é o motivo mais comum de uma mensagem rica ser renderizada em pedaços.
Traduza o texto se você atende mais de um idioma
O texto original de uma mensagem rica deve estar em inglês. Adicione a string em inglês e sua tradução em Configurações > Traduções > Front End.
Crie um personalizado quando os shortcodes não cobrirem o que precisa.
Mensagens ricas estáticas feitas com seu próprio HTML são criadas em Configurações > Diversos. Classes úteis são sb-rich-btn sb-btn para um botão de link, sb-rich-btn sb-btn-text para um link de texto e sb-image para permitir que as pessoas ampliem uma imagem ao clicar.
Referência de configurações
| Configuração | O que faz |
|---|---|
| [card] | Um card no estilo de produto com imagem, cabeçalho, descrição, preço ou texto extra e um botão de link. |
| [slider] e [slider-images] | Um conjunto de cards deslizáveis, com até 10 slides, ou um slider simples de imagens escrito como [slider-images images="URL,URL,URL"]. |
| [chips] | Pequenas opções em chips que podem ser tocadas, escritas como [chips options="A,B,C"]. |
| [buttons] | Um conjunto de botões de resposta, escritos como [buttons options="A,B,C"]. |
| [select] | Uma lista suspensa de opções, escrita como [select options="A,B,C"]. |
| [inputs] | Um pequeno formulário com campos de texto e um botão de envio, escrito como [inputs values="A,B,C" button="Enviar agora"]. |
| [email] | Coleta dados de contato, por exemplo [email name="true" last-name="true" phone="true" phone-required="false" placeholder=""]. |
| [timetable] | Exibe seus horários de funcionamento como um componente dentro da mensagem. |
| [articles] | Exibe artigos na mensagem, escritos como [articles link="..."]. |
| [list] e [list-image] | Uma lista simples, numerada, de duas colunas ou com imagens, por exemplo [list values="A,B,- C,- D,E" numeric="true"] ou [list-image values="URL:A,URL:B"]. |
| [table] | Uma tabela de dados, escrita como [table header="A,B,C" values="A:B:C,A:B:C"]. |
| [button], [image] e [share] | Um botão de link único, uma imagem via [image url="..."], ou ícones de compartilhamento social via [share fb="" tw="" li="" pi="" wa=""]. |
Informações úteis
HTML puro é bloqueado em mensagens normais
Por segurança, HTML puro e JavaScript não são permitidos em mensagens comuns. Se precisar de sua própria marcação, crie uma mensagem rica personalizada em Configurações > Diversos.
Itens de lista aninhados precisam de um traço
Em [list], prefixe uma entrada com um traço e um espaço para torná-la um item interno, como em [list values="A,B,- C,- D,E"]. Para uma lista de duas colunas com títulos, use dois pontos: [list values="A:X,B:Y,C:Z"].
Botões podem abrir um artigo
Um botão é escrito como [button link="..." name="Clique aqui" target="_blank" style="link"]. Para abrir um de seus artigos, use #article-ID como valor do link.
Exigir dados de contato em aplicativos de mensagens
Adicione required-messaging-apps="true" ao shortcode [email] para exigir também o e-mail ou telefone nos aplicativos de mensagens.
Formatação e links no editor
O editor entende *negrito*, __itálico__, ~tachado~, `código` e ```bloco de código```. Links são convertidos automaticamente; para dar um nome a um link, adicione #sb-exemplo a ele, com espaços escritos como travessões duplos.
Quebras de linha não são a tecla Enter
Pressionar Enter envia a mensagem. Use SHIFT+ENTER ou CTRL+ENTER para adicionar uma quebra de linha dentro dela.
Perguntas frequentes
Onde digito uma mensagem rica?
O que acontece com o que alguém seleciona ou digita?
Meu cartão quebrou no meio de uma frase. Por quê?
Quantos slides um slider pode conter?
As mensagens ricas podem aparecer em outros idiomas?
E se eu precisar de um componente que você não oferece?
Pronto para acabar com o caos?
Unifique suas mensagens, automatize as perguntas repetitivas e transforme conversas em receita — começando hoje.
Começar agora