Guia rápido para chatbots e mensagens sociais

É possível se conectar com clientes por meio de aplicativos de mensagens sociais como o Facebook e também integrar chatbots.

Ativar o canal do webhook

O canal webhooks é necessário para permitir mensagens sociais. Se você não conhece esse canal, confira nosso guia rápido de webhooks. Depois, você vai precisar de uma conta, credenciais e documentação da API para o serviço pelo qual deseja enviar mensagens. Você pode construir seu canal de mensagens sociais usando um modelo de webhook, mapeado para a API de um provedor de mensagens sociais. Na próxima seção, detalhamos exemplos de canais de mensagens sociais construídos com diferentes provedores.

Crie um canal de mensagens no Facebook

Documentamos o Facebook Messenger como um provedor de mensagens sociais de exemplo que pode ser integrado à plataforma Xtremepush.

Você pode ver tanto uma mensagem de texto simples quanto um exemplo de mensagem rica com imagens e CTAs nos exemplos abaixo.

Se quiser usar outro provedor, pode simplesmente construir um modelo de canal baseado na API desse provedor para enviar mensagens, semelhante aos exemplos acima. Se precisar de ajuda para se integrar ao seu provedor de serviço, por favor, entre em contato com seu gerente de conta.

Depois que seu canal estiver configurado, agora você precisa optar por alguns usuários. O processo para isso varia conforme o provedor, mas, em geral, você precisará incorporar um plug-in social no seu site ou no seu app para poder aderir aos usuários, além de capturar os dados de opt e enviá-los para o Xtremepush. Idealmente, seu messenger deveria ser alimentado por um chatbot que automatizasse conversas e forneça uma experiência intuitiva. Isso permite um único ponto de integração para o Xtremepush mesmo que você distribua seu chatbot em vários canais de mensagens.

Adicione um plug-in de mensagens sociais

Usaremos novamente o Messenger do Facebook como exemplo para usuários que optam por aderir. Revise a documentação do Facebook Messenger para incorporar um plug-in e optar pelos usuários. Você pode encontrar esses documentos na seção de descoberta e reengajamento.

Para este exemplo, vamos trabalhar com o plugin enviar para o messenger:

É possível trabalhar com outros plugins como o plugin de chat de clientes do Facebook.

Siga a documentação do Facebook Messenger para incorporar o plugin enviar para messenger no seu site e permitir que usuários aceitem as mensagens. Como pré-requisito, você também precisará ter o SDK do Xtremepush no seu site. Veja detalhes sobre como implantar nosso web SDK aqui.

Você precisará modificar o código de embed do plugin para permitir a sincronização dos usuários que aderiram ao Xtremepush. Para poder conectar o usuário ao Xtremepush e permitir que você envie mensagens pelo Facebook Messenger via seu canal de Facebook, você precisa pegar o ID do Xtremepush e definir o atributo do data-ref plugin igual ao ID do Xtremepush.

Veja o trecho a seguir, onde usamos um método Xtremepush SDK para obter o ID. Definir esse atributo é fundamental, pois uma vez definido, significa que o ID Xtremepush estará disponível no seu chatbot quando o usuário optar.

var fbPluginElements = document.querySelectorAll(".fb-send-to-messenger[page_id='XXXXXXXXXXX']");
 if (fbPluginElements) {
 for (i = 0; i < fbPluginElements.length; i++) {
 fbPluginElements[i].setAttribute('data-ref', xtremepush('get','device_info').id );
 }
 }

Uma vez que o ID do usuário é enviado para o seu chatbot como parte do opt-in, você pode facilmente sincronizar seu usuário com o chatbot. O exemplo completo de JavaScript associado ao SDK do Facebook e ao envio para o messenger opt-in está abaixo:

window.fbMessengerPlugins = window.fbMessengerPlugins || {
  init: function() {
    FB.init({
      appId: "XXXXXXXXXXXXXXXX",
      xfbml: true,
      version: "v2.10"
    });

    FB.Event.subscribe('send_to_messenger', function(e) {
      // callback for events triggered by the plugin
      console.log("send_to_messenger event");
      console.log(e);

      if (e.event == 'rendered') {
        console.log("Plugin was rendered");
      } else if (e.event == 'opt_in') {
        var checkboxState = e.state;
        console.log("Checkbox state: " + checkboxState);
        if (checkboxState == 'checked') {
          window.confirmOptIn();
        } else if (checkboxState == 'unchecked') {}
        console.log(FB.getUserID());
      } else if (e.event == 'not_you') {
        console.log("User clicked 'not you'");
      } else if (e.event == 'hidden') {
        console.log("Plugin was hidden");
      }
    });
  },
  callable: []
};
window.fbMessengerPlugins.callable.push(function() {


  var fbPluginElements = document.querySelectorAll(".fb-send-to-messenger[page_id='XXXXXXXXXXXXXXXX']");
  if (fbPluginElements) {
    for (i = 0; i < fbPluginElements.length; i++) {
      fbPluginElements[i].setAttribute('data-ref', xtremepush('get', 'device_info').id);
    }
  }
});
window.fbAsyncInit = window.fbAsyncInit || function() {
  window.fbMessengerPlugins.callable.forEach(function(item) {
    item();
  });
  window.fbMessengerPlugins.init();
};
setTimeout(function() {
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}, 0);

Integre o Xtremepush ao seu chatbot para que os usuários possam aderir

Criamos um bot de exemplo para demonstrar como você pode integrar o Xtremepush com seu bot. Este bot é baseado no bot de exemplo do guia rápido do Facebook Messenger. Você verá nos documentos do Facebook que uma opção é remixar o bot de exemplo do Facebook Messenger no Glitch. Isso significa que você não precisa de um servidor para implantar seu bot de exemplo, pois o Glitch fornecerá uma URL pública servida via HTTPS para seu bot. Modificamos o exemplo do Facebook para incluir uma integração com o Xtremepush. Para criar sua própria versão deste bot no Glitch, faça o seguinte:

• Abra nosso [projeto inicial de webhook sobre Glitch]:

Isso permitirá configurar o bot demo padrão do Facebook conforme a documentação deles, mas com o Xtremepush integrado de fábrica. O bot modificado tem a seguinte alteração para suportar integração com o Xtremepush.

Além de definir a credencial necessária para conectar seu bot ao Facebook Messenger no .env arquivo, você precisa:

• Configure XP_ACCESS_TOKEN no .env arquivo usando o token do app nas Configurações do App > Configurações Gerais do seu projeto.

O bot integrado ao Xtremepush usa o ID repassado do opt-in para enviar um fb_messenger_id para a plataforma Xtremepush. Este é o ID usado para direcionar os destinatários ao criar canais, conforme descrito na seção 2 acima.

Em , bot.js há uma função simples de envolvimento ao redor do método externo da API Xtremepush para sincronizar atributos:

function sendXPAttribute(xpID, attributeText, attributeValue) {
  var postData = { 
    apptoken: process.env.XP_ACCESS_TOKEN ,
    device_id: xpID,
    tag: attributeText,
    value: attributeValue
  };

  callXPPostDataAPI(postData);
}


function callXPPostDataAPI(jsonData) {
  request({
    uri: 'https://external-api.xtremepush.com/api/external/hit/tag',
    method: 'POST',
    json: jsonData

  }, function (error, response, body) {
    if (!error && response.statusCode == 200) {
      console.log("Successfully registered recipient with xtremepush");
    } else {
      console.error("Unable to register.");
      console.error(response);
      console.error(error);
    }
  });  
}

Isso pode usar o ID Xtremepush para direcionar uma atualização de atributo para um usuário, e é usado dessa forma em um método no bot que pode inicializar um usuário no Xtremepush após um evento de opt-in. Neste exemplo, também usamos a API do grafo do Facebook para recuperar alguns parâmetros adicionais de usuário e sincronizamos esses com o Xtremepush junto com o ID do messenger:

function initialiseProfile(PSID, xpID) {
  request({
    uri: 'https://graph.facebook.com/v2.6/' + PSID,
    qs: { access_token: process.env.PAGE_ACCESS_TOKEN },
    method: 'GET',
    json: {"fields":"first_name, profile_pic, gender, is_payment_enabled"}  

  }, function (error, response, body) {
    if (!error && response.statusCode == 200) {
      var first_name = body.first_name;
      var last_name = body.last_name;
      var gender = body.gender;
      var profile_pic = body.profile_pic;
      
      sendXPAttribute(xpID, "fb_messenger_id", PSID); 
      sendXPAttribute(xpID, "first_name", first_name); 
      setTimeout(function() {sendXPAttribute(xpID, "last_name", last_name)},10000);
      setTimeout(function() {sendXPAttribute(xpID, "gender", gender)},20000);
      setTimeout(function() {sendXPAttribute(xpID, "profile_pic", profile_pic)},30000);
      
      sendTextMessage(PSID, first_name + ", thanks for opting into to receive updates from xtremepush we'll send you news and product updates." );     
      typingToggle(PSID, "typing_on");  
      setTimeout(function() {sendGenericMessage(PSID)},10000);  
      setTimeout(function() {sendTextMessage(PSID, "They'll look something like this")},20000);  
      setTimeout(function() {typingToggle(PSID, "typing_off")}, 30000);  
    
      } else {
      sendXPAttribute(xpID, "fb_messenger_id", PSID); 
      sendTextMessage(PSID, "Thanks for opting into to receive updates from xtremepush we'll send you news and product updates.");  
      typingToggle(PSID, "typing_on");  
      setTimeout(function() {sendGenericMessage(PSID)},10000);  
      setTimeout(function() {sendTextMessage(PSID, "They'll look something like this")},20000);  
      setTimeout(function() {typingToggle(PSID, "typing_off")}, 30000);  
        
      console.error("Unable to retrieve data.");
      console.error(response);
      console.error(error); 
    }
  });  
}

O método usado para inicializar um usuário é chamado do método que gerencia eventos de opt-in; o ID Xtremepush está disponível, pois foi passado conforme descrito na seção anterior.

function receivedOptin(event) {
  var pageID = event.recipient.id;
  var timeOfMessage = event.timestamp;
  var optin = event.optin;
  var userRef = optin.user_ref;
  var xpID = optin.ref;
  var PSID = event.sender.id;
  
  if (event.sender){
  console.log("Received optin for xtremepush user %d and page %d at %d with message:", 
    xpID, pageID, timeOfMessage);
  console.log(JSON.stringify(optin));
    
  initialiseProfile(PSID, xpID);  
  }
  else {
  
  console.log("Received optin for user %d and page %d at %d with message:", 
    xpID, pageID, timeOfMessage);
  console.log(JSON.stringify(optin));
  sendOptinMessage(userRef, "Thanks for opting into to receive updates from xtremepush", xpID)
  sendXPAttribute(xpID, "fb_user_ref", userRef); 
}

Depois de integrar seu bot e conseguir capturar alguns IDs de usuário do Social Messenger, agora está pronto para testar o envio de mensagens.

Testar mensagens sociais

Para testar mensagens sociais, crie sua campanha navegando até Campanhas > Criar Campanha > Etapa única > Baseada em Tempo > Criar Campanha > selecione Webhook na aba Configuração. Na aba Conteúdo, clique em Ações para aplicar o modelo que foi criado anteriormente a partir de Conteúdo > Templates:

Você pode mirar usuário(s) de teste. Por exemplo, para um canal do Facebook Messenger como abaixo, você pode direcionar seu próprio Facebook Messenger com base em um segmento que atende seu usuário, caso você saiba seu ID. Detalhes sobre como enviar usuários de teste com os atributos necessários e direcionar eles podem ser encontrados em nosso guia de usuários de teste de conjunto .

Faça um teste e você deve receber sua mensagem de teste no Facebook Messenger. Se você tiver algum erro, solucione conforme descrito no guia do webhook. Seu canal de mensageiro pode ser adicionado como um canal complementar a uma campanha que também inclua uma notificação ou outro canal de comunicação. Um caso comum de uso é usar o canal do messenger como um canal de reserva para usuários que não optaram por receber outras notificações. Além disso, o canal de mensageiro pode ser acionado assim como outros canais; Um caso de uso para isso são campanhas de cesta ou outros tipos de recuperação de entrega.