Seja Parceiro|Seja Afiliado
TimelinesAI Blog

Customer.io: envie mensagens automáticas do WhatsApp usando a API Pública da TimelinesAI

Este fluxo de trabalho do Customer.io: envia mensagens do WhatsApp quando um usuário preenche um formulário web; verifica respostas e segue com mensagens adicionais se nenhuma resposta for recebida. Se uma resposta for recebida, o fluxo de trabalho envia uma mensagem de agradecimento automática. O fluxo se baseia na API Pública da TimelinesAI e no Fluxo de Trabalho Customer.io Journeys. Configurando o Gatilho 1. Abra […]

January 18, 202411 min read
Customer.io: envie mensagens automáticas do WhatsApp usando a API Pública da TimelinesAI

Este fluxo de trabalho do Customer.io: envia mensagens do WhatsApp quando um usuário preenche um formulário web; verifica respostas e segue com mensagens adicionais se nenhuma resposta for recebida. Se uma resposta for recebida, o fluxo de trabalho envia uma mensagem de agradecimento automática. O fluxo se baseia na API Pública da TimelinesAI e no Fluxo de Trabalho Customer.io Journeys.

Configurando o Gatilho

1. Abra sua conta Customer.io > Campanhas
2. Crie uma campanha: atribua o nome desejado, descrição e tags
3. Selecione o gatilho desejado. Neste exemplo, usaremos o gatilho Quando alguém envia um formulário
4. Configure seu formulário. Este fluxo de trabalho requer um formulário com vários campos ocultos. Verifique com o provedor do formulário se esses campos podem ser adicionados. Os nomes dos campos ocultos devem ter os valores listados abaixo e os valores devem ser deixados vazios. Os valores para esses campos serão adicionados automaticamente em etapas posteriores do fluxo de trabalho.

Nomes dos campos ocultos obrigatórios:

  • message_1
  • message_2
  • chatid
  • message1_timestamp
  • message2_timestamp
  • last_message_timestamp
  • last_message_timestamp_2

Campo padrão obrigatório:

  • campo para o número de telefone que o usuário preenche dentro do formulário.

5. Selecione as Configurações desejadas e Objetivo e Saída

6. Salve sua campanha e preencha seu formulário para obter os dados iniciais para as próximas etapas do fluxo de trabalho. Quando o formulário é enviado, um novo contato deve aparecer em Customer.io > Pessoas. O contato criado terá os dados do formulário como atributos. Os campos ocultos resultarão em atributos com xxxxx como valor.

Enviando a primeira mensagem automática do WhatsApp em resposta ao formulário preenchido

O objetivo desta etapa é enviar automaticamente a primeira mensagem do WhatsApp quando o cliente preenche o formulário

1. Reabra sua campanha em Customer.io e navegue até a guia Fluxos de Trabalho.
2. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o após o gatilho). Clique no módulo “Webhooks” recém-colocado para configurá-lo.

3. Configure o módulo:

  • NOME DO WEBHOOK – renomeie o módulo para Enviar primeira mensagem WA
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

4. Adicione uma solicitação:

{
"phone": "YOUR_DATA_HERE",
"whatsapp_account_phone": "+YOUR_WA_SENDER_NUMBER_HERE",
"text": "YOUR_CUSTOM_MESSAGE_HERE"
}

  • YOUR_WA_SENDER_NUMBER_HERE – deve conter seu número de conta WhatsApp em formato internacional
  • YOUR_CUSTOM_MESSAGE_HERE – a mensagem desejada
  • YOUR_DATA_HERE – deve conter o número de telefone que a pessoa inseriu ao preencher seu formulário. Para adicionar dados personalizados, primeiro delete o texto YOUR_DATA_HERE, deixe o cursor entre ” ” e abra os dados de exemplo da barra lateral esquerda > guia Event Data > role para baixo para encontrar o campo do formulário que contém um número de telefone > clique no + ao lado > selecione A mensagem ou ação falhará em um popup > clique em adicionar. Sua solicitação mudará para algo como: “phone”: “{{event.nLJpTuNCaZrs}}”
  • Resposta – mude para a guia Resposta > Configure um atributo > selecione message_1 no menu suspenso Definir > adicione {{response.data.message_uid}} na caixa de solicitação

5. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste no canto superior direito da página. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo:

Obtendo dados sobre o ID de chat da TimelinesAI e o timestamp da mensagem enviada

O objetivo desta etapa é obter o ID de chat e o timestamp da mensagem inicial do WhatsApp. Essas informações são essenciais para determinar se o cliente respondeu à primeira mensagem mais tarde

1. Reabra sua campanha em Customer.io e navegue até a guia Fluxos de Trabalho.
2. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o após o módulo Enviar primeira mensagem WA). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
3. Configure o módulo:

  • NOME DO WEBHOOK – renomeie o módulo para Obter ID de chat e timestamp da primeira mensagem
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

4. Adicione uma solicitação:

  • Tipo: GET
  • URL: https://app.timelines.ai/integrations/api/messages/{{customer.message_1}}
  • Cabeçalho1: nome = Content-Type, valor = application/json
  • Cabeçalho2: nome = Autorização, valor = Bearer XXX. Onde XXX deve ser substituído pelo seu token TimelinesAI de https://app.timelines.ai/integrations/api/
  • Resposta: mude para a guia Resposta > Configure um atributo > selecione chatid no menu suspenso Definir > adicione {{response.data.chat_id}} na caixa de solicitação. Em seguida, clique em Definir outro atributo. Selecione message1_timestamp no menu suspenso Definir > adicione {{response.data.timestamp}} na caixa de solicitação

5. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo
6. Arraste e solte Atraso de Tempo no quadro de fluxo de trabalho (coloque-o após o módulo Obter ID de chat e timestamp da primeira mensagem). Selecione a quantidade de tempo desejada que gostaria que o fluxo aguardasse antes de prosseguir. Exemplo: 1 hora
7. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o após o módulo Atraso de Tempo). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
8. Configure o módulo:

  • NOME DO WEBHOOK – renomeie o módulo para Verificar ID de chat
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

9. Adicione uma solicitação:

10. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo

Resultados intermediários:

Verificando se a primeira mensagem do WhatsApp recebeu uma resposta ou não. Enviando uma mensagem de “Obrigado” se a resposta foi recebida.

  1. Arraste e solte a ramificação Verdadeiro/Falso no quadro de fluxo de trabalho (coloque-a após o módulo Verificar ID de chat).
  • Nome: para evitar confusão, recomendamos dar o seguinte nome a este módulo: VERDADEIRO = sem resposta. O cliente respondeu à primeira mensagem?
  • Condições: selecione lastmessagetimestamp no primeiro menu suspenso; é igual a no segundo menu suspenso; atributo da pessoa atual no terceiro menu suspenso; message1_timestamp no quarto menu suspenso:

Nosso fluxo de trabalho agora se divide em dois ramos: “Verdadeiro” indica que o cliente não respondeu à mensagem inicial do WhatsApp, enquanto “Falso” indica que o cliente respondeu.

É crucial considerar que determinar se um cliente respondeu envolve comparar dois timestamps: o timestamp da mensagem inicial do WhatsApp e o timestamp da última mensagem no chat. Se esses timestamps forem idênticos, indica que nenhuma nova mensagem apareceu no chat, sugerindo diretamente que o usuário não respondeu à primeira mensagem. Por outro lado, se os timestamps não coincidirem, implica que havia novas mensagens no chat após a primeira mensagem do WhatsApp ser enviada. Embora isso sugira fortemente uma resposta, não é uma garantia absoluta, pois é concebível que, dentro do período de espera de uma hora entre a primeira mensagem e o momento atual, você possa ter enviado outra mensagem ao usuário, alterando o timestamp da última mensagem.

Vamos terminar o ramo “Falso” primeiro:

2. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o sob o ramo Falso). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
3. Configure o módulo:

  • NOME DO WEBHOOK – atribua qualquer nome ao módulo. Exemplo: Enviar mensagem de agradecimento
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

4. Adicione uma solicitação:

{
"text": "YOUR_CUSTOM_MESSAGE_HERE"

}

  • YOUR_CUSTOM_MESSAGE_HERE – a mensagem desejada

5. Arraste e solte o módulo Saída no fluxo de trabalho

Enviando a segunda mensagem automática do WhatsApp se nenhuma resposta foi recebida para a primeira

1. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o sob o ramo Verdadeiro). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
2. Configure o módulo:

  • NOME DO WEBHOOK – nomeie o módulo Enviar segunda mensagem WA
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

3. Adicione uma solicitação:

{
"text": "YOUR_CUSTOM_MESSAGE_HERE"

}

  • YOUR_CUSTOM_MESSAGE_HERE – a mensagem desejada
  • Resposta: mude para a guia Resposta > configure um atributo > selecione message_2 no menu suspenso Definir > adicione {{response.data.message_uid}} na caixa de solicitação.

5. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste no canto superior direito da página. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo
6. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o após o módulo Enviar primeira mensagem WA). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
7. Configure o módulo:

  • NOME DO WEBHOOK – renomeie o módulo para Obter timestamp da segunda mensagem
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

Adicione uma solicitação:

9. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo

10. Arraste e solte Atraso de Tempo no quadro de fluxo de trabalho (coloque-o após o módulo Obter timestamp da segunda mensagem). Selecione a quantidade de tempo desejada que gostaria que o fluxo aguardasse antes de prosseguir. Exemplo: 1 hora
11. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o após o módulo Atraso de Tempo). Clique no módulo “Webhooks” recém-colocado para configurá-lo.
12. Configure o módulo:

  • NOME DO WEBHOOK – renomeie o módulo para Verificar ID de chat
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

13. Adicione uma solicitação:

10. Após adicionar a solicitação e a resposta, clique no botão Enviar Teste no canto superior direito da página. Você deve obter o status de resposta 200 OK e a mensagem de sucesso para definir o atributo

Verificando se a segunda mensagem do WhatsApp recebeu uma resposta

1. Arraste e solte a ramificação Verdadeiro/Falso no quadro de fluxo de trabalho (coloque-a após o módulo Verificar ID de chat).

  • Nome: para evitar confusão, recomendamos dar o seguinte nome a este módulo: VERDADEIRO = sem resposta. O cliente respondeu à segunda mensagem?
  • Condições: selecione last_message_timestamp_2 no primeiro menu suspenso; é igual a no segundo menu suspenso; atributo da pessoa atual no terceiro menu suspenso; message2_timestamp no quarto menu suspenso:

Agora nosso fluxo de trabalho se divide em 2 ramos novamente onde “Verdadeiro” = o cliente NÃO respondeu à segunda mensagem do WhatsApp e “Falso” = o cliente respondeu.

2. Arraste e solte Enviar e Receber Dados no quadro de fluxo de trabalho (coloque-o sob o ramo Falso). Quando colocado, ele criará um novo bloco chamado “Webhooks” por padrão.
3. Configure o módulo:

  • NOME DO WEBHOOK – atribua qualquer nome ao módulo. Exemplo: Enviar mensagem de agradecimento
  • COMPORTAMENTO DE ENVIO – selecione enviar automaticamente
  • outras configurações – selecione conforme necessário

4. Adicione uma solicitação:

{
"text": "YOUR_CUSTOM_MESSAGE_HERE"

}

5. Arraste e solte o módulo Saída no fluxo de trabalho
6. Arraste e solte o módulo Saída no fluxo de trabalho sob o ramo Verdadeiro

Resultado final: o usuário preenche o formulário, o fluxo de trabalho envia automaticamente a primeira mensagem do WhatsApp em resposta ao formulário preenchido > verifica se o usuário respondeu à primeira mensagem. Se sim > envia uma mensagem de agradecimento em resposta e sai do fluxo. Se o usuário não respondeu à primeira mensagem: envia a segunda mensagem do WhatsApp > verifica se o usuário respondeu à segunda mensagem. Se sim > envia uma mensagem de agradecimento em resposta e sai do fluxo. Se o usuário não respondeu à segunda mensagem > sai do fluxo. Baixe a imagem do fluxo de trabalho completo aqui: https://storage.crisp.chat/users/helpdesk/website/94268256ba492800/customerio-workflow-sending-wa_k4393j.png