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