---
title: "Guia rápido para chatbots e mensagens sociais"
slug: "quick-start-social"
updated: 2026-06-12T10:30:57Z
published: 2026-06-12T10:30:57Z
canonical: "docs.xtremepush.com/quick-start-social"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/documentation/docs/pt-br/quick-start-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](/documentation/docs/pt-br/facebook-message-channels) 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.

![747](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/2f9918b-d63d75d-FB-message-both(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A49Z&se=2026-11-04T10%3A28%3A49Z&sr=c&sp=r&sig=HUyPq8pLfgQwjficNpMbhQXNmhuy8AoDNOjNqBNbce0%3D)

Visualização simples de mensagem de texto na tela de bloqueio do iOS.

![1327](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/b6814ca-FB-Messenger_on_Facebook(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A49Z&se=2026-11-04T10%3A28%3A49Z&sr=c&sp=r&sig=HUyPq8pLfgQwjficNpMbhQXNmhuy8AoDNOjNqBNbce0%3D)

Visualização web da mensagem rica do Facebook

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.

> [!NOTE]
> Precisa de um chatbot?
> 
> Converse com seu gerente de conta hoje sobre os serviços de chatbot da Xtremepush ou [entre em contato conosco](/documentation/docs/pt-br/contact-us).
> 
> Se você não for cliente, [por favor, solicite uma demonstração](https://xtremepush.com/request-a-demo/).

## 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.](https://developers.facebook.com/docs/messenger-platform/discovery)

Para este exemplo, vamos trabalhar com o [plugin enviar para o messenger](https://developers.facebook.com/docs/messenger-platform/discovery/send-to-messenger-plugin):

É possível trabalhar com outros plugins como o [plugin de chat de clientes do Facebook](/documentation/docs/pt-br/facebook-customer-chat-plugin).

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](/documentation/docs/pt-br/website-integration).

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.

```javascript
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:

```javascript
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](https://developers.facebook.com/docs/messenger-platform/getting-started/quick-start). 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]:

[![remix button](https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726)](https://glitch.com/edit/#!/remix/curved-garden)

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](https://docs.xtremepush.com/reference/api-tag):

```javascript
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:

```javascript
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.

```javascript
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**](/documentation/docs/pt-br/campaign-setup). Na **aba Conteúdo**, clique em Ações para aplicar o [modelo](/documentation/docs/pt-br/templates) que foi criado anteriormente a partir de **Conteúdo > Templates**:

![1654](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/784a877-Screenshot_2022-10-12_at_14.44.12(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A49Z&se=2026-11-04T10%3A28%3A49Z&sr=c&sp=r&sig=HUyPq8pLfgQwjficNpMbhQXNmhuy8AoDNOjNqBNbce0%3D)

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](/documentation/docs/pt-br/campaign-segment) 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](/documentation/docs/pt-br/set-up-test-user-profiles) .

![2236](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/ddc5905-Screenshot_2022-10-12_at_16.42.01(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A49Z&se=2026-11-04T10%3A28%3A49Z&sr=c&sp=r&sig=HUyPq8pLfgQwjficNpMbhQXNmhuy8AoDNOjNqBNbce0%3D)

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](/documentation/docs/pt-br/quick-start-webhooks#testing-a-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.