Integre o Slack e o WhatsApp com Low-Code (Parte 1)

Startups e pequenas empresas muitas vezes não dispõem de recursos para soluções completas (e caras) de atendimento ao cliente. No entanto, com AI Studio da Vonage , é possível criar uma solução personalizada e econômica de experiência do cliente, adaptada às suas necessidades. Uma opção é criar uma integração do WhatsApp com o Slack.

Este tutorial em duas partes mostrará como integrar o WhatsApp e o Slack para criar um sistema de atendimento ao cliente eficiente. Neste primeiro artigo, você configurará o projeto e fará sua primeira conexão para enviar mensagens do WhatsApp para o Slack. Na segunda parte, você lidará com a lógica mais avançada para que sua equipe possa responder às dúvidas dos clientes diretamente do Slack.

Resumo: Encontre o código refatorado do servidor no GitHub para acompanhar a configuração do AI Studio e do Slack sem se preocupar com programação em JavaScript.

Preview of Slack-WhatsApp Integration

Visão geral da integração do WhatsApp com o Slack para atendimento ao cliente

No início, meu objetivo era criar um fluxo semelhante ao do famoso comando de barra do Giphy. No entanto, o Slack não permite comandos de barra personalizados em tópicos (o Giphy é um caso especial). Usar um comando de barra em uma resposta normal no canal não associa a resposta a uma conversa específica. Com conversas simultâneas, essa abordagem criaria uma confusão! Para manter as conversas organizadas em threads, implementamos a seguinte solução alternativa:

1. Uma nova mensagem aparece no canal de atendimento ao cliente com o conversation_id de uma nova conversa no WhatsApp.

2. Um membro da equipe clica em um atalho do Slack na mensagem, o que faz com que nosso aplicativo vincule essa conversa ao tópico atual do Slack.

3. O membro da equipe usa o comando de barra /reply, seguido do session_id e da sua resposta.

4. Nosso aplicativo processa a resposta, a envia para o AI Studio e a adiciona como resposta na conversa.

5. Nosso aplicativo também processa as respostas dos clientes e as adiciona ao tópico correto.

6. A conversa continua até que o agente utilize o comando de barra /close_ticket, encerrando a sessão no AI Studio e adicionando uma resposta do tipo “conversa resolvida” no tópico do Slack.

Seguindo essa abordagem, você pode integrar perfeitamente o WhatsApp e o Slack para o atendimento ao cliente, permitindo que sua equipe gerencie as conversas diretamente do Slack, mantendo a estrutura adequada das conversas e o contexto.

Pré-requisitos

• Número virtual da Vonage

• Account no Slack e permissão para instalar aplicativos no seu espaço de trabalho

• Nó

  

Configuração

Como configurar um aplicativo Node com o Express

1. Crie um novo diretório para o seu projeto e acesse-o usando o terminal.

   • mkdir whatsapp-para-slack

   • cd whatsapp-to-slack

2. Inicializar um novo projeto Node.js:

   • npm init -y

3. Instalar dependências

   • npm install express axios body-parser dotenv

4. Crie os arquivos do seu projeto

   • toque server.js .env .gitignore 

   • código .

No arquivo .gitignore, precisaremos adicionar uma única linha para que o git não compartilhe acidentalmente as credenciais do nosso arquivo .env: 

.env

No nosso .env arquivo, precisaremos adicionar nossos valores de segurança tanto do Slack quanto do AI Studio. Vamos preenchê-los nas próximas etapas. Por enquanto, adicione:

// Inside our ENV file 
SLACK_WEBHOOK_URL=""
AI_STUDIO_KEY=""

No arquivo server.js, adicione o seguinte código padrão:

// Import required modules
require('dotenv').config();
const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');

// Create an Express application
const app = express();
const PORT = process.env.PORT || 3000;

// Import our secure ENV variables
const SLACK_WEBHOOK_URL = process.env.SLACK_WEBHOOK_URL;
const AI_STUDIO_KEY = process.env.AI_STUDIO_KEY;

// Middleware to parse JSON requests
app.use(express.json());

// Middleware to parse requests from Slack
const urlencodedParser = bodyParser.urlencoded({ extended: false })

// Global Variables

// Define the /start endpoint
app.post('/start', (req, res) => {
    // Handle POST request to /start
    res.send('Start endpoint reached');
});

// Define the /inbound endpoint
app.post('/inbound', (req, res) => {
    // Handle POST request to /inbound
    res.send('Inbound endpoint reached');
});

// Define the /slack/start endpoint 
app.post('/slack/start', urlencodedParser, function (req, res){
res.send("Begin initiated");
});

// Define the /slack/message endpoint
app.post('/slack/message', urlencodedParser, function (req, res) {
  res.send("Response sent to user")
});

app.post('/slack/end', urlencodedParser, function (req, res) {
res.send("Conversation ended")
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

// We'll add our function declarations below here 

Em nosso modelo padrão, realizamos quatro ações principais:

1. Importar nossas dependências.

   • A Express administra nosso servidor.

   • O Axios nos permite fazer solicitações HTTP. São essas solicitações HTTP que nos permitem enviar e receber informações do Slack e do AI Studio.

   • O bodyParser nos ajuda a analisar ou limpar os dados que recebemos do Slack. 

2. Configurar o servidor, o middleware e as variáveis de ambiente do nosso aplicativo

3. Criar endpoints para cada uma das funcionalidades do nosso aplicativo

4. Iniciar nosso servidor

Como disponibilizar nosso aplicativo através do localtunnel

Nosso aplicativo exige a troca de dados várias vezes entre o AI Studio e o Slack. Vamos usar o localtunnel para expor nosso localhost e criar túneis acessíveis publicamente. No seu terminal, execute o seguinte comando: npx localtunnel --port 3000 Isso criará uma URL de túnel que deve ter uma aparência semelhante a esta:

➜  whatsapp-to-slack npx localtunnel --port 3000
your url is: https://some-parks-beg.loca.lt

A URL que começa com https e termina em loca.lt é a URL do seu túnel. No restante do artigo, sempre que TUNNEL_URL for mencionado, esse valor deve ser utilizado.

Abra uma segunda aba no seu terminal para usar mais tarde. 

Como configurar um aplicativo do Slack

1. Faça login no seu Workspace do Slack e abra suas Applications. 

2. Clique em “Criar um novo aplicativo”. Selecione a opção “Do zero”.

3. Dê um nome ao seu aplicativo e selecione o Espaço de Trabalho onde deseja usá-lo.

4. Clique em “Criar aplicativo”

Ta-da! Agora você já tem seu primeiro aplicativo do Slack! Há mais uma coisa que você precisa fazer. Você precisará ativar os Webhooks de entrada. Depois de ativar os webhooks de entrada, role até o final da página e clique em “Adicionar novo webhook ao workspace”. Será solicitado que você selecione o canal desejado e, em seguida, clique em “Permitir”. Isso o redirecionará para a página de Webhooks de Entrada do seu aplicativo; só que agora, se você rolar até o final da página, verá uma URL de Webhook para o canal desejado. Copie a URL e adicione-a como o valor para o seu SLACK_WEBHOOK_URL no seu arquivo .env. Deve ficar mais ou menos assim:

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/..."

Como criar um chatbot de atendimento para o WhatsApp

Para criar seu agente, siga as instruções disponíveis na documentação do AI Studio aqui. Existem três opções importantes para o nosso agente; selecione:

• Tipo: WhatsApp

• Modelo: Começar do zero

• Evento: Inbound

O fluxo do nosso agente será relativamente simples. Assim que o usuário enviar uma mensagem ao agente, usaremos um nó “Coletar Entrada” para perguntar com o que ele precisa de ajuda. A resposta será armazenada em um parâmetro chamado inquiry. Em seguida, usaremos uma condição para verificar se inquiry é igual a “escalate”. Se for, enviaremos ao usuário uma mensagem dizendo “Aguarde enquanto conectamos você a um agente ao vivo”.

Se a consulta for sobre outro assunto, simularemos todos os outros fluxos possíveis simplesmente enviando a mensagem “Obrigado por utilizar nosso serviço!” (nó “Enviar agradecimento”). O nó “Aguarde, por favor” se conectará a um nó de roteamento para agente ao vivo. Por fim, tanto o nó de roteamento para agente ao vivo quanto o nó “Enviar agradecimento” se conectarão a um nó “Encerrar conversa”.

AI Studio Flow Overview

Como configurar um nó de roteamento do Live Agent

O nó de roteamento de agente ativo é como AI Studio cria sua integração do WhatsApp com o Slack. No nó de roteamento de agente ativo, precisamos fazer três coisas:

1. Insira seu ‘TUNNEL_URL/start’ no campo EP “Iniciar conexão”

2. Insira seu ‘TUNNEL_URL/inbound’ no campo EP de transferência de entrada

3. Selecione inquiry nos Parâmetros de Transferência 

E clique em “Salvar e sair”.

Live Agent Routing Node

Em seguida, precisaremos adicionar sua chave de API do AI Studio ao seu arquivo .env. Você pode encontrar a X-Vgai-Key no canto superior direito da tela do AI Studio. Clique no ícone “usuário” e, em seguida, em “Gerar chave de API”. 

Copie a chave X-Vgai-Key e, em seguida, adicione-a como valor para o seu AI_STUDIO_KEY no seu arquivo .env. Deve ficar mais ou menos assim:

SLACK_WEBHOOK_URL="https://hooks.slack.com/services/..."
AI_STUDIO_KEY="YOUR_KEY_VALUE"

Por fim, você precisará atribuir seu número da Vonage ao agente. Siga as instruções de publicação da documentação.  

Como iniciar uma conversa no Slack usando webhooks de entrada

A primeira ação que precisamos realizar é conectar o AI Studio ao Slack. Usaremos o Endpoint de Início de Conexão do Live Agent e os Webhooks de Entrada do Slack. Já configuramos esses itens durante a instalação, mas agora precisamos adicionar a lógica para conectá-los efetivamente. O Endpoint de Início de Conexão do nosso agente está configurado para enviar uma solicitação ao nosso /start endpoint. Lá, enviaremos duas informações para o Slack: o sessionId e a transcrição da nossa conversa até o momento. Vamos agrupar essas informações no objeto de dados de acordo com o que o Slack espera, com um pouco de formatação. Usaremos a biblioteca axios para enviar todas as nossas solicitações POST. É assim que nosso /start ponto de conexão agora:

app.post('/start', (req, res) => {
  const sessionId = req.body.sessionId;
  const transcription =  handleTranscription(req.body.history.transcription);
  const data = { text: `Session: \`${sessionId}\`\nTranscription:${transcription}`, }
  axios.post(SLACK_WEBHOOK_URL, data)
  res.send('Start endpoint reached');
});

Você vai perceber que chamamos a função handleTranscription. Essa função formata nossa transcrição bruta para que fique com uma aparência agradável no Slack. Você pode adicioná-la ao final do nosso arquivo.

const handleTranscription = (transcription = []) => {
  if (!transcription.length) return null;

  let strTrans = '```';

  for (const message of transcription) {
    for (const key in message) {
      strTrans += `\n${key}: ${message[key]}`;
    }
  }

  strTrans += '```';
  return strTrans;
};

Como testar sua conexão entre o WhatsApp e o Slack

Agora você pode verificar se o seu agente está conectado ao seu canal do Slack! Na segunda aba do terminal, execute seu aplicativo:

node server.js

Sua transcrição apareceu no Slack? Que legal! Como ainda não implementamos uma maneira de encerrar conversas no AI Studio, toda vez que você fizer um teste, precisará encerrar a conversa manualmente. Você pode fazer isso enviando uma solicitação POST para o EP “Stop Connection” usando uma ferramenta como o Postman. Você pode encontrar suas sessões ativas na guia “Relatórios”.

End Conversation with Postman

Além disso, sempre que você quiser testar uma nova alteração no seu aplicativo Node.js, será necessário reiniciar o servidor.

Conclusão

É isso aí para a primeira parte! Em “Integre o Slack e o WhatsApp com Low-Code (Parte 2), você vai concluir a funcionalidade do nosso fluxo de atendimento ao cliente. Você vai aprender a criar atalhos para mensagens no Slack, a criar comandos de barra no Slack e a realizar uma conversa completa de ida e volta entre o WhatsApp e o Slack.

Se você tiver problemas com este tutorial ou tiver dúvidas, não deixe de participar do Comunidade de Desenvolvedores da Vonage no Slack. Você também pode nos seguir no  X, antes conhecido como Twitter para ficar por dentro das últimas notícias para desenvolvedores da Vonage!

Recursos adicionais

• Criação de um agente de voz resiliente: um guia para sistemas de failover

• Como construir uma hierarquia de classificação de intenções 

• Integre o Slack e o SMS por meio do Low-Code AI Studio