Adicione botão do WebChat + WhatsApp em seu site
Para adicionar o botão do WebChat + WhatsApp em seu site, siga o tutorial abaixo:
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:
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