Criando mensagens interativas no WhatsApp Blip Help 17 de junho de 2023 01:54 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 até 3 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 Mensagem do tipo menu 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: Caso o payload não esteja habilitado, o texto das opções será replicado para o Id, removendo os espaços e os caracteres especiais. O ID é usado pelo canal, para identificar qual a opção foi selecionada. Caso queira personalizar os valores dos Ids e deixá-los fixos, independente dos textos das opções, deverá: “Set payload”: deverá estar marcada. “Postback mime type”: deve estar configurado com o valor “text/plain” “Postback value”: O valor fornecido será atribuído ao id. Os valores devem ser únicos entre os payloads e entre as opções que não possuem payloads definidos. Exemplo de como o componente é renderizado no WhatsApp: Regras existentes para os botões: 1.Texto do título: Emojis e markdown são suportados Tamanho máximo: 1024 caracteres 2.Botão: título do botão. Valor fixo “Menu” Limite máximo: 20 caracteres 3.Lista de opções: Emojis são suportados Markdown não é suportado Tamanho máximo: 10 opções Deve ser único Tamanho máximo: 24 caracteres Observações: Componentes do tipo menu que forem convertidos para List Message terão apenas 1 seção. Caso alguma dessas regras não seja respeitada a conversão do componente é feita para texto. Para usar esse componente pelo builder é necessário habilitar a configuração referente ao Menu. Na aba de Canais > Configurações, habilite o conversor, conforme imagem abaixo: Além disso, de qualquer forma, ainda é possível utilizar o componente através do tipo de mensagem 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, botão 3. 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" } ] } ] } }} O exemplo será renderizado da seguinte forma: Por fim, é 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: Caso o payload não esteja habilitado, o texto das opções será replicado para o Id, removendo os espaços e os caracteres especiais. O ID é usado pelo canal, para identificar qual a opção foi selecionada. Caso queira personalizar os valores dos Ids e deixá-los fixos, independente dos textos das opções, deverá: “Set payload”: deverá estar marcada. “Postback mime type”: deve estar configurado com o valor “text/plain” “Postback value”: O valor fornecido será atribuído ao id. Os valores devem ser únicos entre os payloads e entre as opções que não possuem payloads definidos. 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 habilitar a configuração referente ao Quick reply. Na aba de Canais > Configurações, habilite o conversor, conforme imagem abaixo: 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 Json - Document 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 blip", "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": "blip image", "image": { "link": "https://sindinfor.org.br/wp-content/uploads/2020/10/blip-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 Configuração do arquivo de audiência - Envio de notificações em massa Multi Product List + Cart - Vendas WhatsApp Dúvidas sobre modelos de mensagens no WhatsApp Como configurar horário de atendimento
