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

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. Em Integrando o Slack e o WhatsApp com Low-Code (Parte 1), você viu como configurar o projeto e estabelecer sua primeira conexão para enviar mensagens do WhatsApp para o Slack. Nesta segunda parte, você vai lidar com a lógica mais avançada para que sua equipe possa responder às consultas 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

Como criar um atalho para uma mensagem no Slack

Na primeira parte, configuramos nosso projeto e iniciamos a conversa no Slack. Agora você deve estar pensando que o próximo passo seria deixar nossos colegas de equipe do Slack responderem, certo? Bem, precisamos primeiro resolver o problema de, de alguma forma, vincular nosso tópico do Slack à nossa conversa no AI Studio, para sabermos como organizar nossas mensagens de ida e volta! Faremos isso criando um atalho de mensagem no Slack. Esse atalho de mensagem fará com que nosso agente “abra um ticket” simplesmente clicando em um botão na nova conversa. Isso enviará uma solicitação ao nosso aplicativo, onde armazenaremos as informações do tópico de conversa em um novo objeto relacionado ao conversation_id.

Como ativar a interatividade do aplicativo Slack

Para criar atalhos, você precisará habilitar a interatividade no seu aplicativo do Slack. Veja abaixo como fazer isso. No campo “URL da solicitação”, adicione seu TUNNEL_URL seguido de /slack/start. Esse será o endpoint em nosso aplicativo para o qual o Slack enviará uma solicitação sempre que o atalho for acionado.

Enable Slack InteractivityEm seguida, clique em “Criar novo atalho” e preencha os campos:

Onde esse atalho deve aparecer: Nas mensagens.

Nome: Abrir um ticket

Breve descrição: Cria uma conversa para uma consulta do cliente

ID do retorno de chamada: begin_response

Como vincular sessões a tópicos do Slack

Agora vamos atualizar nosso aplicativo para usar as informações que recebemos do Slack e vinculá-las às nossas sessões do AI Studio. Primeiro, vamos criar um objeto global chamado SESSIONS. Você pode adicioná-lo logo acima dos nossos endpoints:

const SESSIONS = {};

Dentro dos nossos endpoints, vamos fazer quatro coisas:

1. Processar a resposta recebida do Slack e extrair o thread_ts (carimbo de data/hora) e o session_id

2. Criar uma nova entrada em SESSIONS para a sessão/thread atual

3. Prepare os dados a serem enviados para o Slack, o que inclui formatar nossa mensagem de inicialização para o nosso tópico no Slack

4. Enviando nossa solicitação ao Slack para publicar a mensagem de inicialização no tópico correto

app.post('/slack/start', urlencodedParser, function (req, res){
  const response = JSON.parse(req.body.payload);
  const thread_ts = response.message.ts;
  const session_id = extractSessionId(response.message.text);
  newSession(session_id, thread_ts);
  const data = {
    "thread_ts": thread_ts,
    "text": `Session seen by <@${response.user.id}>`
  }
  axios.post(SLACK_WEBHOOK_URL, data);
  res.send("Begin initiated");
})

Em nosso endpoint, utilizamos duas novas funções. Você pode adicioná-las ao final do seu arquivo, junto com as outras funções. A primeira, chamada extractSessionId procura em nossa carga útil do Slack pelo sessionId:

const extractSessionId = (input) => {
  const sessionIdPattern = /Session: `([0-9a-f\-]{36})`/i;
  const match = input.match(sessionIdPattern);

  if (match && match[1]) {
    return match[1];
  }

  return null;
};

A segunda função newSessioncria uma nova entrada em nossa variável global SESSIONS .

const newSession = (session_id, message_ts) => {
  SESSIONS[session_id] = {
    "session_id" : session_id,
    "thread_ts" : message_ts
  }
}

Como criar um comando de barra no Slack para respostas a mensagens

Agora que nosso agente iniciou a conversa em nosso aplicativo, queremos conectar o Slack ao WhatsApp e permitir que eles respondam aos nossos clientes. Vamos fazer isso criando nosso primeiro comando com barra.

No painel do nosso aplicativo do Slack, abra a aba “Comandos de barra”. Em seguida, clique em “Criar novo comando”. 

Crie o seguinte comando:

Comando: /responder

URL da solicitação: TUNNEL_URL/slack/message

Breve descrição: Responder às consultas recebidas

Dica de uso: [session_id]

E clique em “Salvar”.

Create a Slack Slash CommandAgora precisamos atualizar nosso /slack/message endpoint para processar os dados enviados pelo Slack. Precisamos fazer duas coisas:

1. Copie a mensagem e adicione-a como um comentário no tópico correto no Slack, incluindo alguma formatação

2. Pegue a mensagem e envie-a para a sessão correta no AI Studio

Podemos fazer isso com o código a seguir:

app.post('/slack/message', urlencodedParser, function (req, res) {
  const response = req.body;
  const agentResponse = parseMessage(req.body.text);
  const session_id = agentResponse['sessionId'];
  const message = agentResponse['message'];
  const studio_data = { message_type: 'text', text: message };
  const thread_ts = SESSIONS[session_id].thread_ts;
  const slack_data = {
    "thread_ts": thread_ts,
    "text": `Response sent by <@${response.user_id}> \`\`\`${message}\`\`\``,
  }
  axios.post(`https://studio-api-eu.ai.vonage.com/live-agent/outbound/${session_id}`, studio_data, {
    headers: { 'X-Vgai-Key': AI_STUDIO_KEY }
  })
  axios.post(SLACK_WEBHOOK_URL, slack_data);
  res.send("Response sent to user")
})

Você vai perceber que usamos uma última função chamada parseMessage para limpar nossos dados do Slack. Você pode adicioná-la no final do nosso arquivo:

const parseMessage = (input) => {
  const [sessionId, ...messageParts] = input.split(' ');
  const message = messageParts.join(' ');

  // Check if the first part is a valid session ID format
  const sessionIdPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
  if (sessionIdPattern.test(sessionId)) {
    return { sessionId, message };
  }

  // If the first part is not a valid session ID, treat the entire input as a message
  return { message: input };
};

Agora você pode testar o envio de respostas às mensagens pelo Slack! Não é demais receber essas respostas no WhatsApp?!

Como enviar respostas do WhatsApp para o Slack

Então, agora já temos nosso cenário quase totalmente funcional. Mas falta uma coisa! Precisamos permitir que nosso usuário envie mensagens contínuas para o Slack a fim de responder ao nosso agente humano. Podemos fazer isso atualizando nosso /inbound ponto de extremidade.

Aqui, processamos os dados do AI Studio, extraímos a mensagem e session_id. Usando o session_id , podemos consultar nosso thread_ts. Assim que tivermos o thread_ts, podemos enviar nossa mensagem para o tópico correto com uma solicitação POST para o Slack.

Você pode atualizar seu código da seguinte forma:

app.post('/inbound', (req, res) => {
  const message = req.body.text
  const session_id = req.body.sessionId;
  const thread_ts = SESSIONS[session_id].thread_ts;
  const data = {
    "thread_ts": thread_ts,
    "text": `Customer respsonse: \`\`\`${message}\`\`\``
  }
  axios.post(SLACK_WEBHOOK_URL, data );
  res.send('Inbound endpoint reached');
});

Como criar um comando de barra no Slack para encerrar uma conversa

Você pode pensar: “É isso aí! Pronto!”. Bem, quase! Nosso nó Live Agent não sabe quanto tempo pode durar uma conversa entre o AI Studio e alguma outra interface. Por isso, precisamos informar ao AI Studio quando encerrar a conversa e sair do nó Live Agent Routing. Isso encerrará a integração do Slack com o WhatsApp para o cliente atual.

Vamos criar outro comando com barra, da mesma forma que criamos /reply. Desta vez, vamos criar um comando para /close_ticket. O comando “Fechar ticket” aceitará novamente o session_id para saber qual sessão encerrar. 

Crie o seguinte comando:

Comando: /fechar_tíquete

URL da solicitação: TUNNEL_URL/slack/end

Breve descrição: O problema do cliente foi resolvido

Dica de uso: [session_id]

E clique em “Salvar”.

Slack Slash Command Details

Dentro do nosso /slack/end endpoint, precisamos processar a solicitação do Slack. Na verdade, precisamos fazer apenas três coisas:

1. Aproveite a session_id usando nossa parseMessage função novamente

2. Envie uma solicitação ao endpoint “Stop Connection” no AI Studio para instruí-lo a encerrar a conversa no momento correto session_id

3. Informe ao agente humano no Slack que a conversa foi encerrada, publicando uma mensagem no tópico correto

Para isso, atualize seu /slack/end código para que fique assim:

app.post('/slack/end', urlencodedParser, function (req, res) {
  const agentResponse = parseMessage(req.body.text);
  const session_id = agentResponse['sessionId'];
  const data = {};
  axios.post(`https://studio-api-eu.ai.vonage.com/live-agent/disconnect/${session_id}`, data, {
    headers: { 'X-Vgai-Key': AI_STUDIO_KEY }
  })
  const thread_ts = SESSIONS[session_id].thread_ts;
  const slack_data = {
    "thread_ts": thread_ts,
    "text": `This conversation has been marked as resolved.`,
  }
  axios.post(SLACK_WEBHOOK_URL, slack_data);
  res.send("Conversation ended")
})

Conclusão

E pronto! Você implementou com sucesso uma integração perfeita entre o WhatsApp e o Slack — e vice-versa — para atendimento ao cliente, usando a plataforma low-code AI Studio da Vonage. Reinicie seu servidor Node.js executando o comando `node server.js` no seu terminal e teste o fluxo completo enviando mensagens de um lado para o outro entre o WhatsApp e o Slack no seu celular. Não é incrível?

Como alternativa, você pode encontrar o código refatorado do servidor no GitHub , com instruções de configuração 

Para aprimorar ainda mais esse aplicativo, considere utilizar a robusta API Web do Slack, que permite interatividade com base em reações com emojis. Além disso, você poderia incorporar os agentes de SMS ou de voz do AI Studio, oferecendo aos clientes um canal de comunicação adicional.

Você está usando outras soluções de baixo código ou sem código para engajamento do cliente? Participe da Comunidade de Desenvolvedores da Vonage no Slack ou siga-nos no  X, antes conhecido como Twitter para compartilhar seus projetos empolgantes e suas ideias!

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 

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