fbpx
15jan, 2018
15Comentários

Instalando o chat do Messenger no seu site ou blog

Recentemente o Facebook disponibilizou o Bate-bapo do Messenger, no qual possibilita o uso em seu site ou blog transformando um contato mais próximo com seus clientes e parceiros. Se você  gostou desta ideia, então não deixe de conferir nosso tutorial de como instalar ele. Vamos lá.

Passo 1 – Para colocar o chat do Messenger em seu site primeiro teremos que saber o ID de sua página no Facebook.
Para isso abra sua página do Facebook >> Clique no item Sobre >> Localize o ID como mostrado abaixo:

Passo 2 – Você deve adicionar o seu domínio que irá ter o chat a lista branca de autorizado em sua página no Facebook. Para isso novamente esteja em sua página >> Clique em Configurações (canto superior direito) >> Plataforma do Messenger  >> Adicione seu domínio na lista como mostrado abaixo:

Passo 3 – O próximo passo é criar um app Facebook, para isso vá até o developer.facebook.com se não tiver uma conta será necessário se registrar e aceitar os termos do Facebook. Depois clique em Adicionar um novo aplicativo >> Dê um nome ao app, coloque o e-mail e clique em Criar um número de identificação do aplicativo.

Após criar, na página do App. No canto superior esquerdo terá um ID, é o numero do App que acabamos de criar, pegue este ID e anote-o.

Passo 4 – Vamos editar o código do chat Messenger com as devidas informações com o seguinte:

Localize a linha 4 e mude o YOUR-APP-ID pelo ID que anotou no passo 3

Localize a linha 19 e coloque no lugar de YOUR-PAGE-ID pelo numero ID da sua pagina que fizemos lá no passo 1, ainda na linha 19 é opcional se desejar que o chat inicie aberto mude onde está: false para true

Passo 5 – Coloque o código HTML no site ou blog, aconselhamos o uso do Google Tag Manager para isso, você poderá criar um nova etiqueta HTML personalizada >> depois colar o código >> Selecionar o acionar como ALL (se quiser em todas as páginas) >> Clique em Guardar e Publicar, ou poderá insera este código edite o código antes da tag </body> de seu website.

Caso queira seguir a documentação do Chat Messenger, não deixe de ver o seguinte link: Facebook Delevopers

Pronto, seu chat foi instalado com sucesso. Até a próxima e esperamos que este tutorial tenha sido util, caso tenha gostado compartilhe com seus amigos.


Existem 15 Comentários

  • Osvaldo Schaukoski Junior

    17 jan, 2018

    Acho que o seu código está quebrado, as aspas e aspas duplas não são as corretas para código.

    • Caio Zanzarini

      18 jan, 2018

      Agradecemos pela informação, o erro estava no bloco de código que o tema do WordPress formatou, inserirmos agora em formato código.

  • Osvaldo Schaukoski Junior

    17 jan, 2018

    Consegui habilitar no meu site http://www.schauk.com

    Obrigado!

  • Tárcio Leal

    16 mar, 2018

    Boa tarde!

    Segui os seus passos, realizei pelo tagmanager, publiquei, porem não obtive sucesso
    O que pode ter acontecido?

    http://www.lefs.com.br

    • Caio Zanzarini

      17 mar, 2018

      Olá Tárcio, acessamos seu site e conseguimos ver o uso do chat normalmente.

  • ISRAEL VILLA VERDE

    23 ago, 2018

    Fiz todos os passos e não aparece o botão.
    http://www.itaperuna.guiadasuacidade.com.br/

  • ISRAEL VILLA VERDE

    23 ago, 2018

    Fiz o passo a passo e não deu certo.
    Site no blogger:
    http://www.itaperuna.guiadasuacidade.com.br/

  • Diego

    10 fev, 2019

    Pelo que sei não está mais funcionando esses códigos, pois tentei muitos e os que estavam funcionando parou todos. Está funcionando ainda isso?

    • Caio Zanzarini

      10 fev, 2019

      Sim esta funcionando!
      Houve alterações na API do Facebook, mas o código acima já foi atualizado. Nosso site utiliza-se deste mesmo código.

  • Fabio Silva

    15 fev, 2019

    como colocar messenger do facebook no blogger?

  • Fabian

    11 jun, 2019

    OLá, me perdi no PASSO 4….pois não esta nao explicado onde e como abro este codigo do messenger para fazer as alterações….parei no PASSO 3 anotando o numero gerado e agora, o que devo fazer?

    • Caio Zanzarini

      20 jun, 2019

      É preciso pegar o código gerado como no exemplo https://prnt.sc/o4e82l
      Com o ID em mãos, edite o código fonte de seu site inserindo os códigos antes da tag alterando este código pelos IDs obtidos no passo 1 e 3. YOUR-APP-ID e YOUR-PAGE-ID

  • Maik

    29 jul, 2019

    Gostaria de deixar o ícone do messenger no lado esquerdo em minha pagina

    • Gabriel Benato

      05 set, 2019

      Bom dia Maik,
      Na documentação do próprio Facebook não oferecer opção de mudar a posição como segue um trecho “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.” O senhor pode estar verificando a mudança junto a seu desenvolvedor com a ajuda de plugins JS.
      Segue o link da documentação direto do Facebook https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Comentar

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Precisa de um plano de hospedagem para seu site?