Plugin de bate-papo com o cliente (beta)

O plugin de bate-papo com o cliente da plataforma do Messenger permite integrar sua experiência do Messenger diretamente no seu site. Isso permite que seus clientes interajam com sua empresa a qualquer momento com a mesma experiência personalizada e avançada que eles têm no Messenger.

O plugin de bate-papo com o cliente carrega automaticamente o histórico do bate-papo recente entre a pessoa e a sua empresa. Isso significa que as interações recentes com sua empresa no messenger.com, no aplicativo Messenger ou no plugin de bate-papo com o cliente no seu site ficarão visíveis. Isso ajuda a criar uma experiência única para os clientes e permite que você continue a conversa mesmo depois que o cliente sai da sua página da Web. Não é necessário capturar as informações dos clientes para acompanhar, basta usar a mesma conversa no Messenger.

Conteúdo

Suporte de recursos

Suporte do navegador

O plugin de bate-papo do cliente é compatível com todos os navegadores móveis e de desktop, exceto os navegadores no aplicativo do Messenger.

Suporte de modelo e tipo de mensagem

Atualmente, o plugin de bate-papo com o cliente oferece suporte aos seguintes tipos de mensagem e modelos de mensagem estruturada:

Recurso com suporte

Mensagem de texto

Sim

Vídeo/imagem/áudio/GIF

Sim

Modelo de botão/genérico

Sim (suportado em tipos limitados de botão)

Postback

Botão URL

Botão Chamar

Botão Comprar

Botão Compartilhar

Botão Entrar

Botão Sair

Botão de jogo

Modelo de Open Graph/mídia/lista

Não

Respostas rápidas

Sim (suportado em tipos limitados de resposta rápida)

Resposta rápida de texto

Resposta rápida de número de telefone de usuário

Resposta rápida de email de usuário

Resposta rápida de localização

Menu persistente

Sim

Ações do remetente

Sim

Como incluir o SDK

Para usar o plugin de bate-papo com o cliente, você deve incluir uma versão do SDK do JavaScript para Facebook que contenha o SDK do Bate-papo com Clientes na página em que o plugin será exibido.

Para obter instruções sobre como incluir o SDK, consulte SDK do Bate-papo com Clientes.

Localização e internacionalização

Para obter vantagens da internacionalização, incluindo a tradução automática de idiomas, você precisa configurar a localidade do SDK para a mesma do seu site. Especificamente, você precisa alterar en_US para um código de localidade com suporte ao iniciar o SDK.

Para mais informações, consulte Localização com Plugins Sociais e SDK do JavaScript.

Controles dinâmicos do plugin

Nós também fornecemos APIs que permitem que você controle de modo dinâmico determinados comportamentos do plugin, como abrir e fechar o diálogo.

Para obter mais informações, consulte o SDK do Bate-papo com Clientes.

Como configurar o plugin

Para incluir o plugin de bate-papo com o cliente em sua página da Web, você pode usar a ferramenta de configuração ou configurar seguindo as etapas do desenvolvedor.

Opção 1: como usar a ferramenta de configuração

Para administradores da Página, a plataforma do Messenger também fornece uma ferramenta de configuração fácil para personalizar o plug-in de bate-papo com o cliente. Para usar a ferramenta de configuração, faça o seguinte:

  1. Acesse Configurações da Página > Plataforma do Messenger
  2. Na seção "Plugin de bate-papo com o cliente", clique no botão "Configurar".

A ferramenta de configuração fornece uma interface do usuário simples para personalizar a mensagem de saudação, a cor do tema, o tempo de resposta exibido e a configuração dos domínios da lista de liberação do plugin.

No final, a ferramenta de configuração gera automaticamente os trechos de código que você poderá copiar/colar para incluir o plugin de bate-papo com o cliente em sua página da web.

Opção 2: configurar seguindo as etapas do desenvolvedor

Para incluir o plugin de bate-papo com o cliente em sua página da Web, faça o seguinte:

  1. Inclua o domínio do seu site na lista de liberação

    Por motivos de segurança, o plugin será gerado somente quando for carregado em um domínio que você tiver incluído na lista de liberação. Consulte a whitelisted_domainsreferência para saber mais sobre como incluir seu domínio na lista de liberação programaticamente.

    Nome do domínio e HTTPS obrigatórios

    Os domínios devem atender aos seguintes requisitos para serem incluídos na lista de liberação:

    • Exibidos com HTTPS

    • Use um nome de domínio totalmente qualificado, como https://www.messenger.com/. Não há suporte para endereços IP e localhost em listas de liberação.

    As empresas cuja experiência do Messenger é fornecida por um provedor de serviços não terão acesso ao gerador de token da página nas configurações do aplicativo, uma vez que elas não possuem o aplicativo do Facebook. Nesse caso, você pode adicionar ou remover domínios da lista de liberação por meio das configurações da Página. Para inserir um domínio na lista de liberação, faça o seguinte:

    1. Clique em Configurações no alto da Página
    2. Clique em Plataforma do Messenger à esquerda
    3. Edite os domínios da lista de liberação da sua página na seção Domínios da lista de liberação
  2. Inclua o plugin na sua página da Web

    Para adicionar o plugin à sua página da web, inclua um div com os seguintes atributos no HTML:
    <div class="fb-customerchat"
     page_id="<PAGE_ID>">
    </div>

    Por padrão, o diálogo de saudação será exibido no desktop e em dispositivos móveis. Para personalizar o comportamento do diálogo de saudação, você pode usar os atributos greeting_dialog_display e "greeting_dialog_delay".

    Posicionamento recomendado

    Recomendamos não alterar a posição padrão do plugin de bate-papo com o cliente no canto inferior direito da sua página.

    Para obter uma lista completa dos atributos, confira a Referência do plugin de bate-papo com o cliente.

  3. Opcional. Controle o evento messaging_postbacks para novas conversas

    Se uma nova conversa for iniciada por meio do plugin, e seu bot tiver configurado o botão Começar, enviaremos um evento de webhook messaging_postbacks ao seu webhook quando o usuário clicar no botão Começar.

    Se o atributo ref for definido na inclusão do plugin de bate-papo com o cliente, ele será incluído no evento de postback.

  4. Opcional. Controle o evento messaging_referrals para conversas existentes

    Para conversas existentes, se o atributo ref estiver definido na inclusão do plugin de bate-papo com o cliente, um evento de webhook messaging_referrals será enviado para o seu webhook quando a conversa for continuada por meio do plugin.

    O ref pode ser qualquer cadeia de caracteres e pode ser usado para vários fins. Por exemplo, você pode usá-lo para verificar quais clientes entraram em contato com sua empresa por meio do plugin.

    Exemplo de evento de webhook de referência

    {
        "object": "page",
        "entry": [
            {
                "id": "<PAGE_ID>",
                "time": 1559598385735,
                "messaging": [
                    {
                        "recipient": {
                            "id": "<PAGE_ID>"
                        },
                        "timestamp": 1559598385735,
                        "sender": {
                            "id": "<USER_PSID>"
                        },
                        "referral": {
                            "ref": "<DEVELOPER_DEFINED_REFERRAL>",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                            "referer_uri": "<REFERRAL_URI>"
                        }
                    }
                ]
            }
        ]
    }

Como personalizar o plugin

O plugin de bate-papo com o cliente tem suporte para as seguintes personalizações. Todas as personalizações são definidas como um atributo quando o plugin é incluído na sua página da web:

Atributo Descrição

theme_color

Opcional. A cor para usar como um tema para o plugin, incluindo a cor do plano de fundo do ícone do plugin de bate-papo com o cliente e a cor do plano de fundo de qualquer mensagem enviada pelos usuários. É compatível com qualquer código de cor hexadecimal precedido por um símbolo de número (por exemplo, #0084FF), exceto branco. Recomendamos que você escolha uma cor que tenha um alto contraste com o branco.

logged_in_greeting

Opcional. O texto de saudação que será exibido se o usuário estiver conectado com o Facebook. Máximo de 80 caracteres.

logged_out_greeting

Opcional. O texto de saudação que será exibido se o usuário não estiver conectado com o Facebook. Máximo de 80 caracteres.

greeting_dialog_display

Opcional. Define como o diálogo de saudação será exibido. Os valores a seguir têm suporte:


  • show: o diálogo de saudação é exibido e permanece aberto no desktop e em plataformas móveis depois do tempo em segundos definido pelo atributo greeting_dialog_delay.
  • hide: o diálogo de saudação ficará oculto até que o usuário clique no plugin no desktop e em plataformas móveis.
  • fade: o diálogo de saudação é exibido brevemente depois do tempo em segundos definido pelo atributo greeting_dialog_delay e, em seguida, desaparece e fica oculto no desktop.

A configuração do plugin é definida para o padrão show no desktop e em dispositivos móveis. Confira a seção Comportamento de armazenamento em cache a seguir para saber mais.

greeting_dialog_delay

Opcional. Define o tempo de atraso em segundos antes da exibição do diálogo de saudação depois do carregamento do plugin. Isso pode ser usado para personalizar quando você deseja que o diálogo seja exibido.

minimized

Aviso de obsolescência

Este atributo está obsoleto. Use o greeting_dialog_display para personalizar o plugin. O atributo greeting_dialog_delay terá prevalência sobre o atributo minimized.

Opcional.

  • true Quando definido como verdadeiro, ele terá o mesmo efeito da configuração greeting_dialog_delay = "desaparecer".
  • false Quando definido como falso, ele terá o mesmo efeito da configuração greeting_dialog_delay = "exibir".

ref

Opcional. Você poderá passar um parâmetro ref opcional se desejar incluir contexto adicional para ser passado de volta para o evento de webhook. Ele pode ser usado para muitas finalidades, como rastrear em qual página o usuário iniciou a conversa, direcionar o usuário para um conteúdo ou recursos específicos disponíveis dentro do bot, ou associar um usuário do Messenger a uma sessão ou conta no site.

Como desativar o menu persistente

Poderá haver casos em que seja preferível desativar o menu persistente de seu bot no plugin de bate-papo com o cliente. Para fazer isso, adicione "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"] quando definir seu menu persistente:

Exemplo de carga da API do Perfil do Messenger

{
  "persistent_menu":[
    {
      "locale":"default",
      "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
      "composer_input_disabled": false,      
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }
      ]
    }
  ]
}

Login do usuário

Se o usuário estiver conectado à conta do Facebook, poderá começar a conversar com seu bot imediatamente. Se ele não estiver conectado, uma mensagem de boas-vindas padrão será exibida e ele será solicitado a entrar ou a criar uma nova conta do Facebook.

Páginas que utilizam restrições de país/idade

Se sua Página tiver restrições de país ou idade definidas nas configurações da Página, o plugin de bate-papo com o cliente não será exibido aos usuários que não estiverem conectados à conta do Facebook quando visitarem seu site.

Comportamento de armazenamento em cache

O estado do diálogo de saudação é armazenado em cache no navegador e persiste mesmo quando o navegador é fechado e aberto novamente. O plugin sempre voltará para o último estado em que o usuário manteve o plugin com base no cache do navegador (com a exceção dos navegadores Safari 12).

Por padrão, para cada nova solicitação do plugin, o diálogo de saudação será exibido no desktop e em dispositivos móveis. Os usuários podem clicar no botão Fechar para minimizar o diálogo, ou você pode substituir o padrão de solicitação por suas próprias preferências de exibição.

Como detectar a origem da mensagem

Em alguns casos, poderá ser necessário determinar se um usuário está entrando em contato com sua empresa usando o plugin de bate-papo com o cliente. Para habilitar isso, a Plataforma do Messenger incluirá a propriedade "source": "customer_chat_plugin" na carga de todas as mensagens enviadas do plugin.

Exemplo de evento de webhook de mensagens

{
    "object": "page",
    "entry": [
        {
            "id": "<PAGE_ID>",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "<USER_PSID>"
                    },
                    "recipient": {
                        "id": "<PAGE_ID>"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

Plugin do Wordpress

Para facilitar a integração do plugin de bate-papo do cliente nos sites do Wordpress, oferecemos o plugin oficial de bate-papo do cliente do Messenger para Wordpress em wordpress.org.

Dicas de resolução de problemas

Se você estiver com problemas para que o plugin renderize corretamente, experimente as dicas abaixo:

  • Se você vir um erro de console como "Recusa em exibir *** em uma estrutura porque um anterior viola a seguinte diretriz da Política de Segurança de Conteúdo: ***", verifique se o domínio da página em que o plugin está sendo processado foi liberado. Certifique-se de não ter definido o cabeçalho Referrer-Policy como no-referrer.
  • O complemento do Contêiner do Facebook para Firefox impede que o plugin apareça. Remova o complemento se desejar que o plugin seja renderizado.
  • Os navegadores privados do Firefox (versão 63 e superior) e os navegadores móveis do Firefox bloqueiam o rastreamento de conteúdo por padrão, o que impede a renderização do plugin. Desative o bloqueio de conteúdo (clique no escudo cinza na barra de pesquisa) para ver o renderizador do plugin.