Blogger: Como integrar e configurar o JivoChat passo a passo

---

@CanalQb que Youtube 

---

---

Blogger - Usando JivoChat

---

O JivoChat é uma solução popular para chat ao vivo que permite aumentar o engajamento e melhorar o atendimento ao cliente em seu blog ou site. A seguir, veja como integrá-lo ao Blogger de forma simples e eficiente.

Passo 1: Crie sua conta no JivoChat

Primeiro, acesse o site oficial do JivoChat e crie uma conta gratuita ou escolha um plano conforme sua necessidade. Ao concluir o cadastro, você terá acesso ao código de incorporação (embed code) que será usado para integrar o chat ao seu blog.

Passo 2: Acesse o painel do Blogger

No painel do Blogger, selecione o blog onde deseja inserir o chat ao vivo e clique em Layout no menu lateral esquerdo.

Passo 3: Adicione o gadget HTML/JavaScript

Escolha a área do layout onde o chat deve aparecer (geralmente na barra lateral ou rodapé) e clique em Adicionar um gadget. Na lista de opções, selecione HTML/JavaScript.

Passo 4: Cole o código de incorporação do JivoChat

No campo de conteúdo do gadget, cole o código fornecido pelo JivoChat e salve. O chat estará ativo no seu blog após a atualização da página.

Exemplo de código de incorporação do JivoChat

Este é um exemplo simplificado do código JavaScript que o JivoChat fornece para a incorporação:

<!-- Código de incorporação do JivoChat -->
<script>
(function(){
  var widget_id = 'SEU-ID-DO-SITE-AQUI';
  var d=document; var w=window;
  function l(){
    var s = document.createElement('script'); 
    s.type = 'text/javascript'; s.async = true;
    s.src = '//code.jivosite.com/script/widget/' + widget_id;
    var ss = document.getElementsByTagName('script')[0];
    ss.parentNode.insertBefore(s, ss);
  }
  if(d.readyState == 'complete'){ l(); } 
  else { if(w.attachEvent){ w.attachEvent('onload', l); } 
  else { w.addEventListener('load', l, false); }}
})();
</script>

Personalização para integração com WhatsApp

Você pode também configurar o JivoChat para enviar notificações ou abrir conversas via WhatsApp com seus visitantes. Veja um exemplo do script para capturar mensagens enviadas e criar um link para WhatsApp:

document.addEventListener('jivo_onMessageSent', function(event) {
  var message = event.message.text;
  if (event.sender === 'client') {
    var whatsappMessage = encodeURIComponent("Mensagem do visitante do blog: " + message);
    var whatsappLink = "https://api.whatsapp.com/send?phone=5511977058071&text=" + whatsappMessage;
    var link = document.createElement('a');
    link.setAttribute('href', whatsappLink);
    link.setAttribute('target', '_blank');
    link.innerText = 'Responder via WhatsApp';
    event.message.addReply(link);
  }
});

Importante: Substitua SEU-ID-DO-SITE-AQUI pelo seu ID do JivoChat e o número de telefone no link WhatsApp pelo seu próprio, no formato internacional com DDI e DDD.

Considerações finais

A integração do JivoChat com Blogger é uma maneira prática e eficiente de melhorar o suporte e interação com seu público. Sempre teste a funcionalidade após a instalação e monitore o desempenho do chat para garantir que está funcionando corretamente.

Vídeo tutorial