Adicione botão do WebChat + WhatsApp em seu site

Para adicionar o botão do WebChat + WhatsApp em seu site, siga o tutorial abaixo:

É preciso inserir o código uma vez em cada página em que deseja exibir o Webchat + WhatsApp.

PASSO 1 - Adicionar o trecho a seguir no final da tag <head>

<!-- Start Leucotron Buttons Styles --> <style> :root { --leuco-right: 6px; --leuco-bottom: 16px; --leuco-inter-btn: 12px; --leuco-whatsapp-bg: #2CC54E; } #leuco-container { position: fixed; font-size: 1.8rem; right: var(--leuco-right); bottom: var(--leuco-bottom); z-index: 12345; text-align: right; text-align: -webkit-right; } #leuco-container #whatsapp-button, #leuco-container #chat-button { border-radius: 32px; cursor: pointer; width: 64px; height: 64px; padding: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; margin-top: var(--leuco-inter-btn); } #leuco-container #whatsapp-button { background-color: var(--leuco-whatsapp-bg); } #leuco-container #chat-button { cursor: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } #leuco-container #whatsapp-button:active { transform: translateY(2px); opacity: .9; } #leuco-container #whatsapp-button img { height: 100%; width: 100%; vertical-align: baseline; position: relative; } </style> <!-- End Leucotron Buttons Styles -->

 

PASSO 2 - Adicionar o trecho a seguir no início da tag <body>

Alterar número do WhatsApp - Trocar a linha 5 pelo seu número de ativação do WhatsApp.

<!-- Start Leucotron Buttons Html --> <div id="leuco-container" style="display:none"> <div id="whatsapp-button"> <a target="_blank" href="http://wa.me/553534719750"> <img src="https://downloads.leucotron.com.br/atendimento/imagens/whatsapp.png"> </a> </div> <div id="chat-button"> </div> </div> <!-- End Leucotron Buttons Html -->

 

PASSO 3 - Copiar o script Webchat no Conecta

Na Tela Administrativa, acesse a aba de canais e copie o código de ativação conforme imagem a seguir:

Imagem 1 - Código de Ativação
Imagem 2 - Cópia Código de Ativação

PASSO 4 - Adicionar o trecho a seguir ao final da tag <body>

Alterar número do WhatsApp - Substituir as linhas 3 a 15 pelo código copiado de seu Webchat (Passo 3).

<!-- Start WebChat script --> <script type="text/javascript"> (function(s, z, c, h, a, t) { s.webchat = s.webchat || function() { (s.webchat.q = s.webchat.q || []).push(arguments); }; t = z.createElement(c), a = z.getElementsByTagName(c)[0]; t.async = 1; t.src = 'https://demo.conecta.com.vc/webchat/v2/webchat.js'; a.parentNode.insertBefore(t, a); s.webchat('cid', '60ca649528ee2a0011e3e06e'); s.webchat('host', h); })(window, document, 'script', 'https://demo.conecta.com.vc'); </script> <!-- Start WebChat script --> <!-- Start Leucotron Buttons Script --> <script> (function () { // Tempo de espera, em milisigundos, para mostrar botão do whatsapp var waitToShowButtons = 2000; var leucoContainer = document.getElementById("leuco-container"); var onLoad = function () { setTimeout(function () { leucoContainer.style.display = "block" }, waitToShowButtons) } window.addEventListener("load", onLoad); })() </script> <!-- End Leucotron Buttons Script -->

 

Template Demo (exemplo acima)

Para testes em sua máquina, copie o HTML abaixo ou acesse pelo seguinte link: https://downloads.leucotron.com.br/conecta/template_connecta_whatsapp.html

 

DICA BÔNUS: Caso queira adicionar apenas o botão do WhatsApp flutuante, veja um exemplo de código através do link: https://codepen.io/savian/pen/pVLejm .


Voltar para Conecta | Plataformas de Atendimento

Voltar para Tutoriais de Produtos