Criando mensagens interativas Victoria Alves 8 de abril de 2022 19:14 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 Botão de Resposta tem 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. Regras existentes para os botões: A quantidade de botões é limitada a 3. O Título é obrigatório e deve ser único. O Texto do botão não é obrigatório, mas se for preenchido, deve ser único. 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
