Envie mensagens pelo WhatsApp a partir do Google Sheets com o AI Studio

É um conceito simples, mas poderoso: recuperar dados da sua Planilha do Google e enviá-los pelo WhatsApp. E, em seguida, extrair alguns dados de uma conversa no WhatsApp e inseri-los automaticamente em uma Planilha do Google. Sua empresa está procurando uma integração rápida e fácil entre o WhatsApp e as Planilhas do Google para melhorar a experiência do cliente? Não precisa procurar mais: este tutorial vai mostrar como fazer isso.

Neste tutorial, você aprenderá a usar a plataforma sem código/com pouco código da Vonage, o AI Studio, para criar um chatbot no WhatsApp que lide com o feedback dos usuários sobre o produto.

Preview of WhatsApp Feedback Flow

Pré-requisitos

• Account de desenvolvedor da Vonage

• Número virtual da Vonage - Alugue um número para o seu agente virtual

• Account do Google Sheets - Cadastre-se no Google

Como criar um banco de dados no Google Sheets

Abrir o Google Sheets e clique em “Planilha em branco”. Dê à sua planilha um título legal, como WhatsApp Product Feedback. Em seguida, nomeie sua primeira planilha como users. 

A users planilha terá 3 cabeçalhos de coluna:

1. phone_number

2. first_name

3. last_name

Adicione um usuário para teste, preenchendo todos os três campos de dados.

• Para phone_number, insira seu próprio número do WhatsApp ou outro número de telefone ao qual você tenha acesso para receber mensagens do WhatsApp para fins de teste. Os números de telefone devem estar no formato internacional, sem nenhum + ou 00. Por exemplo, um número dos EUA seria 15552345678.

Agora adicione uma segunda planilha chamada responses. A responses planilha terá 4 cabeçalhos de coluna:

1. phone_number

2. type

3. feature

4. feedback

Como usar o Google Sheets como uma API REST

Agora você vai transformar sua planilha do Google em uma API REST. Abra a aba “Extensões” e selecione “Apps Script”. O Apps Script permite que você escreva código em aplicativos do Google Workspace, como o Google Sheets ou o Google Docs, para automatizar e ampliar suas funcionalidades. 

Primeiro, dê ao seu novo projeto um título legal, como WhatsApp Product Feedback, e limpe o código na aba em code.gs.

Como criar um endpoint de solicitação GET para o Google Sheets

Você pode adicionar o código a seguir em code.gs:

function json(sheetName, phoneNumber) {
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName(sheetName);
 const data = sheet.getDataRange().getValues();
  // Find the row corresponding to the given phone number
 const headers = data[0];
 const rowIndex = data.findIndex(row => row[headers.indexOf('phone_number')] === phoneNumber);
  // If the phone number is found, return the corresponding entry, otherwise return null
 if (rowIndex !== -1) {
   const rowData = data[rowIndex];
   const jsonData = convertToJson([headers, rowData]);
   return ContentService
          .createTextOutput(JSON.stringify(jsonData))
          .setMimeType(ContentService.MimeType.JSON);
 } else {
   return ContentService
          .createTextOutput(JSON.stringify({error: "Phone number not found."}))
          .setMimeType(ContentService.MimeType.JSON);
 }
}


function doGet(e) {
 const path = e.parameter.path;
 const phoneNumber = e.parameter.phone_number; // Extract phone number from URL parameter
 return json(path, phoneNumber);
}

Mas o que esse código faz? A primeira função cria nossa lógica que irá lidar com o nome de uma planilha, como users, e um phone_number, como seu número do WhatsApp. Em seguida, ela vasculha a planilha ativa para localizar essa planilha específica. Dentro dessa planilha, ela localiza a coluna chamada phone_number e, em seguida, compara cada linha com o phone_number que foi fornecido. Se encontrar uma correspondência, ela pega os dados dessa linha e os converte para JSON. 

A segunda função cria um endpoint GET e extrai os valores dos parâmetros de consulta de path e phone_number. Em seguida, ela envia esses valores de volta para a primeira função e retorna o JSON que recebe.

Como criar um endpoint de solicitação POST para o Google Sheets

Abaixo da sua lógica de solicitação GET, agora você pode adicionar o seguinte:

function doPost(e) {
 // Parse incoming POST data
 const postData = JSON.parse(e.postData.contents);

 // Extract data from the POST request
 const phoneNumber = postData.phone_number;
 const type = postData.type;
 const feature = postData.feature;
 const feedback = postData.feedback;

 // Get the "responses" sheet
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName("responses");

 // Append a new row with the data
 const newRow = [phoneNumber, type, feature, feedback];
 sheet.appendRow(newRow);

 // Return success response
 return ContentService.createTextOutput("Row added successfully.");
}

Isso cria um endpoint POST, que, mais uma vez, extrai as informações enviadas na solicitação. No entanto, aqui os dados são enviados no corpo da solicitação, de modo que e.postData.contents isso é tratado de maneira adequada. Assim que todos os dados tiverem sido extraídos e a responses planilha carregada, uma nova linha é criada no array newRow. Em seguida, ela é adicionada com o appendRow método. Por fim, uma mensagem de resposta clara é enviada para que saibamos, no AI Studio, que nossa operação foi bem-sucedida. 

Agora, você pode implantar seu aplicativo web e torná-lo acessível ao público. Clique em “Implantar”.

Isso abrirá um painel solicitando que você “Selecione um tipo de implantação”. Clique no ícone de configurações e selecione “Aplicativo da Web”. Em “Executar como”, selecione “Você mesmo”. E em “Quem tem acesso”, selecione “Qualquer pessoa”. Continue e clique em “Autorizar acesso” e prossiga para permitir que o Google autorize o acesso ao projeto.

Por fim, você verá um painel “Nova implantação” que inclui uma URL do aplicativo web. Salve essa URL para usar mais tarde. Por fim, clique em “Concluído”.

Como criar um chatbot de atendimento para o WhatsApp

Para criar seu agente sem código/com pouco código, siga as instruções encontradas na documentação do AI Studio. Há três opções importantes para o nosso agente que devem ser selecionadas:

• Tipo: WhatsApp

• Modelo: Começar do zero

• Evento: Inbound

Nosso agente será bastante simples, utilizando apenas 4 tipos diferentes de nós:

1. Nó “Enviar mensagem”: uma única mensagem de texto enviada pelo agente virtual ao usuário.

2. Nó “Coletar Entrada”: o agente virtual fará uma pergunta ao usuário. A entrada do usuário será capturada e armazenada em um valor de parâmetro.

3. Nó condicional: um operador lógico que permite que seu fluxo diferencie entre valores distintos para um parâmetro. Por exemplo, if/else. 

4. Nó de Webhook: Este nó permite que você envie e solicite dados de e para serviços de terceiros, como a API do Google Sheets!

Como criar parâmetros personalizados no AI Studio

Nosso agente low-code utilizará 5 parâmetros personalizados. Crie os parâmetros: feature, feedback, feedback_type, first_name, e last_name. Todos os 5 devem ser da @sys.any mesma entidade.

Custom Parameters in AI Studio

Como criar um fluxo de feedback do usuário do WhatsApp no AI Studio

Nosso fluxo do agente virtual consistirá em cumprimentar nosso usuário pelo nome e, em seguida, coletar o feedback sobre o produto antes de enviar os dados para nossa planilha do Google. Você pode adicionar os seguintes nós, começando pelo Nó Inicial.

1. Recuperar nome de usuário a. Tipo de nó: Nó Webhook b. Método: GET c. URL: A URL do seu aplicativo web da seção anterior d. Corpo: selecione o tipo de corpo a ser Text e. Parâmetros de consulta:

   • Parâmetro de consulta: path

   • Valor: users

   f. Mapeamento de respostas

   • Caminho do objeto: [0][“first_name”], Parâmetro: $first_name

   • Caminho do objeto: [0][“last_name”], Parâmetro: $last_name

GET Request with Response Mapping2. Mensagem de boas-vindas

1. Tipo de nó: Nó de envio de mensagem

2. Tipo de saída: Texto

3. O agente diz: “Ei $first_name $last_name, bem-vindo de volta! Obrigado por nos dar seu feedback 🥰”

3. Tipo de feedback coletado

1. Tipo de nó: Nó de coleta de entrada

2. Parâmetro: feedback_type

3. Mensagem: Botões de resposta

4. Corpo: “Selecione o tipo de feedback” 

Botões:

1. Título do botão: “🐛 Relatar um bug”, Valor do botão: bug

2. Título do botão: “🙋 Solicitação de recurso”, Valor do botão: request

3. Título do botão: “⚡️ Outros”, Valor do botão: other

4. Recurso “Coletar”

1. Tipo de nó: Nó de coleta de entrada

2. Parâmetro: feature

3. Mensagem: Botões de resposta

4. Corpo: “A qual recurso isso se refere?”

5. Botões:

6. Título do botão: “1⃣ Recurso Um”, Valor do botão: one

   • Título do botão: “2⃣ Recurso Dois”, Valor do botão: two

   • Título do botão: “3⃣ Recurso Três”, Valor do botão: three

5. Se o feedback for um bug

1. Tipo de nó: Condição

2. Condição: se tipo = bug

3. Parâmetro: feedback_type

   • Operação: é igual a

   • Valor: bug

Aqui, seu fluxo se ramificará em uma única etapa. Isso ocorre porque queremos permitir que os usuários nos enviem fotos de seus bugs, mas, para todos os outros tipos de feedback, esperamos que eles digitem suas descrições. Portanto, a partir do if type = bug ponto de saída do nó anterior, conecte-o ao nó “Coletar Relatório de Bug”. Quanto ao ponto de saída padrão do nó anterior, conecte-o ao nó “Coletar Feedback”. Os dois nós são os seguintes:

6. Coletar relatórios de falhas

1. Tipo de nó: Nó de coleta de entrada

2. Parâmetro: feedback

3. Mensagem: Texto

4. Corpo: “🐛 Por favor, descreva o bug. 📸 Você também pode enviar uma foto do bug.”

Entrada esperada: Texto e imagem

7. Coletar feedback

1. Tipo de nó: Nó de coleta de entrada

2. Parâmetro: feedback

3. Mensagem: Texto

4. Corpo: “🙌 Por favor, descreva seu feedback”

5. Entrada esperada: apenas texto

8. Enviar para o Google Sheets

1. Tipo de nó: Nó de webhook

2. Método: POST

3. URL: A URL do seu aplicativo web, conforme indicado na seção anterior

4. Corpo: {"phone_number": $SENDER_PHONE_NUMBER, "type": "$feedback_type", "característica": "$feature", "feedback": "$feedback"}

POST Request in AI Studio9. Mensagem de agradecimento

1. Tipo de nó: Nó de envio de mensagem

2. Tipo de saída: Texto

3. O agente diz: “Obrigado pelo feedback valioso 🙏 Tenha um ótimo dia!”

10 Nó “Encerrar conversa”

Agora, seu agente está pronto para enviar mensagens pelo WhatsApp a partir do Google automaticamente!

Como testar seu chatbot do WhatsApp

Agora que seu agente virtual já está todo configurado, você pode abrir o Tester. Certifique-se de adicionar primeiro um valor de teste phone_number clicando no ícone de configurações no canto superior direito. Encontre o SENDER_PHONE_NUMBER parâmetro do sistema e insira o valor da sua users planilha do Google. Para fechar o painel “Parâmetros Iniciais”, clique novamente no ícone de configurações no Tester. Agora você pode clicar no ícone de atualização e iniciar sua conversa de teste.

Que legal é o seu novo agente de feedback sobre produtos, né?! Você já testou adicionar fotos nos relatórios de bugs? Dá uma olhada na planilha do Google Sheets e veja como inserir um URL. Quando você tentar abrir o URL, a imagem enviada ao seu agente virtual deve ser baixada automaticamente. Incrível!

Conclusão

Neste tutorial, você criou uma integração bidirecional entre o WhatsApp e o Google Sheets — enviando mensagens a partir de uma planilha e registrando o feedback dos usuários diretamente nela. E você fez tudo isso usando ferramentas sem código e com pouco código, com o Vonage AI Studio.

O que você fará com seu agente a partir de agora depende de você. Você pode adicionar autenticação à sua API do Google Sheets para proteger dados confidenciais ou melhorar a precisão do seu chatbot ao evitar alucinações com o Knowledge AI.

Procurando outras maneiras de oferecer experiências de mensagens ricas e interativas? O RCS é uma alternativa poderosa ao WhatsApp, oferecendo recursos como respostas sugeridas, carrosséis e fluxos semelhantes aos de aplicativos diretamente dentro dos aplicativos nativos de mensagens.

Seja qual for a sua decisão, queremos saber!