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

Introdução

As pequenas e médias empresas muitas vezes não dispõem de recursos para soluções completas (e caras) de atendimento ao cliente. No entanto, com a plataforma low-code AI Studio da Vonage, você pode criar uma solução personalizada e econômica de experiência do cliente, adaptada às suas necessidades.

Este tutorial vai mostrar como integrar SMS e Slack para criar um sistema de atendimento ao cliente eficiente. Ao conectar o SMS ao Slack e o Slack ao SMS, você permite que sua equipe responda às dúvidas dos clientes diretamente pelo Slack.

Com a equipe que você já tem, é possível se comunicar com os clientes por SMS, chamada de Voice (telefone) ou WhatsApp e responder diretamente pelo Slack. E o melhor de tudo? Você só paga pelo que usar! Essa solução poderosa é especialmente vantajosa para startups que já utilizam o Slack para a comunicação entre a equipe.

Saiba como conectar o SMS ao Slack para ter um plano de contingência no atendimento ao cliente em tempo real. Se seus clientes não receberem uma resposta satisfatória do agente virtual, a conversa será transferida de forma integrada para o Slack, onde qualquer membro da equipe poderá ajudar!

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

Visão geral da integração do SMS 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 para essa integração de SMS com o Slack. No entanto, comandos de barra personalizados não são permitidos nas conversas pelo Slack (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 por SMS.

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 /reply comando de barra seguido do session_id e 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 /close_ticket comando de barra, encerrando a sessão no AI Studio e adicionando uma resposta “conversa resolvida” no tópico do Slack.

Seguindo essa abordagem, você pode integrar perfeitamente o SMS e o Slack para o atendimento ao cliente, permitindo que sua equipe gerencie as conversas diretamente no 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 pelo terminal.

mkdir sms-to-slack
cd sms-to-slack

2. Inicialize um novo projeto Node.js e instale as dependências

npm init -y
npm install express axios body-parser dotenv

3. Crie os arquivos do seu projeto

touch server.js .env .gitignore 

4. Abra o projeto no editor de código de sua preferência.

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 arquivo .env, precisaremos adicionar nossos valores de segurança do Slack e do AI Studio. Vamos preenchê-los nas próximas etapas. Por enquanto, adicione:

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 })

// 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. As solicitações HTTP nos permitem transmitir informações entre o Slack e o 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. Inicie 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 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 ficar mais ou menos assim:

➜  sms-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ê precisa 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 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 insira-a como valor para a variável 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 para SMS recebidos

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: SMS

• Modelo: Começar do zero

• Evento: Inbound

O fluxo do nosso agente será relativamente simples.

1. Assim que o usuário enviar uma mensagem ao agente, usaremos um nó “Collect Input” para perguntar em que ele precisa de ajuda. A resposta será armazenada em um parâmetro chamado inquiry.

2. Então, vamos usar um nó condicional para verificar se inquiry é igual a “escalonar”.

3. Se for esse o caso, enviaremos ao usuário uma mensagem dizendo: “Aguarde enquanto conectamos você a um atendente”. Se a consulta for de outra natureza, simularemos todos os outros fluxos possíveis simplesmente enviando a mensagem “Obrigado por utilizar nosso serviço!” (nó “Enviar agradecimento”).

4. O nó “Por favor, aguarde” se conectará a um Nó de roteamento do Live Agent.

5. Por fim, o Nó de Roteamento do Live Agent e Nó de Envio de Agradecimento se conectarão a um Nó de Encerramento da Conversação.

Overview of AI Studio SMS Agent

Como configurar um nó de roteamento do Live Agent

No nó de roteamento do Live Agent, 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 a consulta nos Parâmetros de transferência 

E clique em “Salvar e sair”.

Example of Live Agent Routing Node in AI Studio

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

Copie a chave X-Vgai-Key e adicione-a agora como valor para a variável AI_STUDIO_KEY no seu arquivo .env. Deve ficar mais ou menos assim:

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 criar é conectar o AI Studio ao Slack. Usaremos o “Start Connection Endpoint” do Live Agent e os “Incoming Webhooks” do Slack. Já configuramos esses recursos durante a instalação, mas agora precisamos adicionar a lógica para conectá-los de fato.

O endpoint “Start Connection” 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 final agora se parece:

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 SMS e o Slack

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

node server.js

A 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. Para isso, envie 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”.

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

Como criar um atalho para uma mensagem no Slack

Agora que já iniciamos nossa conversa no Slack, você pode pensar que o próximo passo seria deixar que nossos colegas de equipe do Slack respondessem, certo? Bem, precisamos primeiro resolver o problema de, de alguma forma, vincular nossa conversa no Slack à conversa no AI Studio, para que saibamos como organizar as mensagens que trocamos!

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 histórico da 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”, você deve inserir o 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 interactivity in your Slack App

Em seguida, clique em “Criar novo atalho” e preencha os campos:

Nome: Abrir um ticket

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

ID do retorno de chamada: begin_response

Create Slack Shortcut

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 que recebemos do Slack e extrair thread_ts (carimbo de data/hora) e 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 , que pesquisa nossa carga útil no 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 permitir que ele realmente responda 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 a consultas recebidas Dica de uso: [session_id]

E clique em “Salvar”.

Create Slack Slash Command

Agora 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 utilizamos uma última função chamada parseMessage para limpar nossos dados do Slack. Você pode adicioná-la ao 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 isso por SMS?!

Como enviar respostas por SMS para o Slack

Então, agora já temos nosso cenário quase totalmente funcional. Mas falta uma coisa! Precisamos permitir que nossos usuários enviem mensagens contínuas para o Slack a fim de responder aos nossos agentes humanos. 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) => {
  // console.log("inbound endpoint", req.body)
  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! Acabou!”. 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.

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

Crie o seguinte comando:

Comando: /close_ticket 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”. 

Dentro do nosso /slack/end endpoint, precisamos processar a solicitação do Slack. 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 SMS e 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 SMS do seu celular e o Slack. Não é incrível?

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 do WhatsApp 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!

A integração do SMS com o Slack para atendimento ao cliente é apenas um exemplo de como plataformas low-code, como o AI Studio, podem otimizar processos de negócios e melhorar a experiência do cliente. Explore mais possibilidades e mantenha-se atualizado com as últimas novidades nas áreas de low-code e no-code.

Recursos adicionais

• Aumentando o ROI do chatbot: desvio de solicitações para agentes humanos

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

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

• A nova fronteira das oportunidades para freelancers: agentes de IA conversacionais