Criando mensagens interativas Letícia Gonçalves 23 de maio de 2022 18:41 Atualizado Índice: Introdução Mensagem de Lista Botões de Resposta Introdução Este artigo mostrará como criar o arquivo JSON para ambos os tipos de mensagens interativas de uma forma fácil de entender, fornecendo um exemplo para cada caso. Para melhorar a experiência dos usuários que interagem com o Contato Inteligente, dois novos tipos de mensagem podem ser usados no fluxo conversacional como Conteúdo dinâmico, sem a necessidade de aprovação prévia de modelos de mensagens (message templates). Os novos tipos são chamados de mensagens interativas pelo WhatsApp e podem ser: List Messages: permitirá a seleção de um item em uma lista de até 10 opções. Esse tipo de mensagem oferece uma maneira mais simples e consistente para os usuários selecionarem uma opção ao interagir com uma empresa. Reply buttons: permitirá a seleção de uma de até três opções na forma de botões. Esse tipo de mensagem oferece uma maneira mais rápida para os usuários fazerem uma seleção em um menu ao interagir com uma empresa. Os botões de resposta têm a mesma experiência do usuário que os modelos interativos com botões. Veja mais informações na documentação oficial do WhatsApp: clique aqui para acessar Mensagem de Lista O primeiro passo é criar um tipo de conteúdo dinâmico a partir do bloco no construtor. De acordo com a imagem abaixo, no campo 1, defina o valor application/json para o tipo de conteúdo dinâmico, no campo 2 defina o JSON que irá compor o conteúdo e confirme as alterações através do botão Salvar Exemplo de um JSON de Mensagem de Lista: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "list", "header": { "type": "text", "text": "your-header-content" }, "body": { "text": "List Body Message" }, "action": { "button": "Send", "sections": [ { "title": "Section 1", "rows": [ { "id": "ID 1.1", "title": "Title 1.1", "description": "Description 1.1" }, { "id": "ID 1.2", "title": "Title 1.2", "description": "Description 1.2" } ] }, { "title": "Section 2", "rows": [ { "id": "ID 2.1", "title": "Title 2.1", "description": "Description 2.1" }, { "id": "ID 2.2", "title": "Title 2.2", "description": "Description 2.2" } ] } ] } }} É assim que as partes se encaixam: Botões de Resposta A mensagem do tipo quick reply (resposta rápida) está disponível nativamente no Blip. Isso significa que é possível utilizar o componente através do builder e ter a mesma experiência no canal do WhatsApp. Componente do Builder: Exemplo de como o componente é renderizado no WhatsApp: Regras existentes para os botões: Texto: Conteúdo da mensagem Emojis e markdown são suportados Links são suportados Tamanho máximo: 1024 caracteres Botões: É necessário ter pelo menos 1 botão A quantidade de botões é limitada a 3 Texto: Não é permitido texto vazio Deve ser único Emojis são suportados, mas markdown não Tamanho máximo: 20 caracteres Observações: Caso alguma dessas regras não seja respeitada a conversão do componente é feita para texto Para usar esse componente pelo Builder é necessário adicionar uma configuração no Blip da seguinte forma:Engrenagem (Configurações) > Configurações básicas > Clique aqui para acessar as configurações avançadas > Continuar > Adicionar > Confirmar postmaster@wa.gw.msging.netIsReplyButtonEnabledTrue Além disso, de qualquer forma, ainda é possível utilizar o componente através do tipo de mensagem Conteúdo dinâmico. Então, nesse caso, a mensagem do tipo Botão de Resposta teria quatro tipos diferentes de cabeçalhos que você pode usar: texto, documento, vídeo e imagem. É recomendada a utilização da estrutura dos JSON’s abaixo, pois com eles, a mensagem passa a ser apresentada no Blip Desk, como foi enviada ao contato. Essa adequação não invalida a forma como a plataforma já tratava o componente Reply Button anteriormente. Para todos os exemplo no novo formato, o mime type esperado é: application/vnd.lime.document-select+json Exemplos Recomendados: Json - Texto: { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"", "title":"This is a title send from lime", "text":"This is a subtitle send from lime" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1", "text":"text1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"text2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Imagem { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"image/jpeg", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri":"https://s1.static.brasilescola.uol.com.br/be/conteudo/images/imagem-em-lente-convexa.jpg" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Video { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"video/mp4", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri" : "https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Documento { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"document/pdf", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri" : "https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Mesmo tendo o fluxo recomendado, existe o fluxo que utiliza o JSON original que hoje não é mais o recomendado, conforme explicado anteriormente no início deste tópico. Para qualquer um dos tipos abaixo, o mime type esperado para o componente é: application/json Aqui está um exemplo de um botão de resposta de cabeçalho de texto JSON: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "text", "text": "header text" }, "body": { "text": "Button Body Message" }, "action": { "buttons":[ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "Clique aqui" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Não clique" } } ] } }} Um exemplo de um botão de resposta de cabeçalho de documento JSON: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "document", "text": "Boleto", "document": { "link": "https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf", "filename": "some-file-name" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} Um exemplo de JSON de botão de resposta de cabeçalho de vídeo: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "video", "text": "video take", "video": { "link": "http://techslides.com/demos/sample-videos/small.mp4" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} Um exemplo de um botão de resposta de cabeçalho de imagem JSON: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "image", "text": "take image", "image": { "link": "https://sindinfor.org.br/wp-content/uploads/2020/10/take-og-image.png" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} Por fim, é assim que as partes se encaixam: Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃 Artigos relacionados Personalizando suas mensagens interativas Como configurar horário de atendimento Modelos de mensagens (message templates) do WhatsApp Multi Product List + Cart - Vendas WhatsApp Configuração do arquivo de audiência - Envio de notificações em massa
