Há um tempo atrás publicamos aqui no blog um Widget WhatsApp Fixo na Lateral com Mensagens no qual tem sem funcionamento até o presente momento, porém gerou muita dúvida de como personalizar esse botão, pré definir uma mensagem ao abrir a conversa ou então como fazer para medir as conversões de cliques no Adwords e como naquele artigo nós usamos a api do WhatsHelp não era possível fazer tais personalizações.

Pois então agora chegou a hora! Desenvolveremos todos esses recursos em um super widget e neste artigo você vai aprender a implementar e personalizar da maneira que quiser o seu funcionamento.

Mas antes quero dizer que criamos também um Gerador de Botão Fixo para WhatsApp Inteligente onde você poderá gerar todo o código deste tutorial de forma simples e intuitiva =)

Bom, vamos lá?

Como funciona o Botão para WhatsApp

A primeira coisa que você precisa entender é que para funcionar as interações do botão, usamos o jQuery para manipular tudo e setar os cookies (sim vamos trabalhar com cookies).

O Widget tem opção para exibir duas mensagens aos usuários e eu as nomeei como Mensagem Primária e Secundária.

Basicamente ao instalar o widget em seu site, no primeiro acesso de um usuário, será exibido para ele a Mensagem Primária exibindo a logo do seu negócio com uma frase (exemplo na imagem abaixo)

Crie seu próprio Widget para WhatsApp

Esta mensagem será exibida apenas no primeiro carregamento do site, já que neste momento já setamos o cookie para que ele não seja exibido em todos os carregamento e assim atrapalhando a navegação do usuário pelo seu site.

Por padrão eu deixei um cookie de 30 dias, ou seja, se o usuário voltar no seu site após 30 dias, a Mensagem Primária irá aparecer novamente e assim recomeça o ciclo. Mas não se preocupe, você pode controlar em quantos dias o cookie irá expirar =)

E a Mensagem Secundária ficará como na imagem abaixo (claro você pode personalizar sua mensagem)

Crie seu próprio Botão Fixo com Mensagens para WhatsApp

Criando Botão Fixo com Mensagens para WhatsApp em seu Site

Esta forma que vamos ensinar você vai separar todos os arquivos, serve para você que já tem experiência com código e quer aplicar em um site php. Se você não entende de programação ou quer economizar tempo, por favor acesse: Gerador de Botão Fixo para WhatsApp Inteligente.

Sem mais delongas, vamos ao código.

1. Crie uma pasta e chame-a de whatsapp

Após criar a pasta, crie os seguintes arquivos nela:

  • whatsapp.php (opcional)
  • whatsapp.css
  • whatsapp.js
  • whatsapp.svg
  • cookie.js

Agora efetue o download desta imagem e cole na pasta.

2. Em whatsapp.css cole:

/* 
Created on : 24/02/2019, 13:27:07
Author : ebrahimpleite
*/
.wc_whatsapp_app{
position: fixed;
bottom: 30px;
z-index: 9999999999; /*Força o widget ficar acima de qualquer elemento*/
display: flex;
align-items: center;
}
.wc_whatsapp_app.left{
left: 15px;
}
.wc_whatsapp_app.right{
right: 15px;
}
.wc_whatsapp{
width: 50px;
height: 50px;
display: block;
border-radius: 50%;
background: #25d366;
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
.wc_whatsapp:hover,
.wc_whatsapp:focus{
box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.wc_whatsapp::before{
content: "";
display: block;
background: url(whatsapp.svg) top center no-repeat;
height: 35px;
margin-top: 6px;
}
.wc_whatsapp p{
font-family: 'Arial', sans-serif;
}
.wc_whatsapp_secondary,
.wc_whatsapp_primary{
display: none;
}
.wc_whatsapp_secondary{
max-width: 300px;
}
.wc_whatsapp_secondary p{
margin-left: 15px;
border: 1px solid #e2e2e2;
padding: 5px 10px;
border-radius: 5px;
position: relative;
color: #000;
font-size: 14px;
background: #fff;
}
.wc_whatsapp_secondary p::before{
top: 20px;
left: -9px;
content: '';
position: absolute;
background: white;
border-bottom: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
left: -5px;
top: 50%;
margin-top: -4px;
width: 8px;
height: 8px;
z-index: 1;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.wc_whatsapp_primary{
border-radius: 5px;
border: 1px solid #eaeaea;
background: #fff;
padding: 10px;
bottom: 70px;
align-items: center;
max-width: 350px;
box-shadow: 7px 7px 15px 8px rgba(0,0,0,0.17);
position: absolute;
width: 350px;
}
.wc_whatsapp_primary img{
width: 50px;
border-radius: 5px;
margin-left: 10px;
}
.wc_whatsapp_primary p{
margin: 20px;
border: 1px solid #e2e2e2;
padding: 10px;
border-radius: 5px;
position: relative;
color: #000;
font-size: 14px;
}
.wc_whatsapp_primary p::before{
top: 20px;
left: -9px;
content: '';
position: absolute;
background: white;
border-bottom: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
left: -5px;
top: 50%;
margin-top: -4px;
width: 8px;
height: 8px;
z-index: 1;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.wc_whatsapp_primary .close{
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
}
.wc_whatsapp_primary .close:hover,
.wc_whatsapp_primary .close:focus{
color: #f00;
}

Veja como você pode alterar a cor de fundo do botão:

  • Procure por #25d366 e altere para o código da cor que deseja

3. Em whatsapp.svg cole:

<svg aria-hidden="true" focusable="false" data-prefix="icon" data-icon="whatsapp" class="svg-inline" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>

4. Em whatsapp.js cole:

/* 
Created on : 24/02/2019, 13:27:07
Author : ebrahimpleite
*/
$(document).ready(function () {
var cookieMessagePrimary = $.cookie("wc_whatsapp_primary");
if (cookieMessagePrimary !== '1') {
$.cookie("wc_whatsapp_primary", 1, {expires: 30}); //Mensagem Principal volta exibir após de 30 dias
setTimeout(showMessagePrimary, 4000);
} else {
//se tiver no mobile, a mensagem primária não exibe
if (screen.width > 550) {
setTimeout(showMessageSecondary, 4000);
}
}
//esconde mensagem secundária ao clicar
$('.wc_whatsapp_secondary').click(function () {
$(this).fadeOut(400);
});
//esconde mensagem primária ao clicar
$('.wc_whatsapp_primary').click(function () {
$(this).fadeOut(400);
});
//controla botão de fechar da mensagem primária
$('.wc_whatsapp_primary .close').click(function () {
$('.wc_whatsapp_primary').fadeOut(400);
return false;
});
//esconde mensagem secundária ao passar o mouse no botão
$('.wc_whatsapp').hover(function () {
$('.wc_whatsapp_secondary').fadeOut(400);
});
//função para exibir mensagem secundária
function showMessageSecondary() {
$('.wc_whatsapp_secondary').fadeIn(400);
}
//função para exibir mensagem primária
function showMessagePrimary() {
$('.wc_whatsapp_primary').fadeIn(400).css("display", "flex");
}
});

Deixamos tudo comentado o script que controla as interações do botão, acreditamos que você não terá dificuldades de editar da sua maneira, mas qualquer coisa só deixar um comentário, ok?

5. Em cookie.js cole:

/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2006, 2014 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD (Register as an anonymous module)
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var pluses = /\+/g;

function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}

function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}

function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}

function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}

try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}

function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}

var config = $.cookie = function (key, value, options) {

// Write

if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
}

return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// Read

var result = key ? undefined : {},
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
cookies = document.cookie ? document.cookie.split('; ') : [],
i = 0,
l = cookies.length;

for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('=');

if (key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}

// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}

return result;
};

config.defaults = {};

$.removeCookie = function (key, options) {
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};

}));

6. Se você optou por criar o whatsapp.php, cole nele:

<link rel="stylesheet" href="whatsapp.css"/>
<script
src="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script> <!-- remova se você já tiver o jquery sendo carregado em sua página -->
<script src="cookie.js"></script>
<script src="whatsapp.js"></script>
<div class="wc_whatsapp_app left">
<a href="https://wa.me/5511990909090" target="_blank" class="wc_whatsapp">
<span class="wc_whatsapp_primary">
<span class="close">x</span>
<img src="ENDERECO_DO_LOGOTIPO"/>
<p>Olá! Solicite por aqui também o Orçamento e Prazo.</p>
</span>
</a>
<a href="https://wa.me/5511990909090" target="_blank" class="wc_whatsapp_secondary">
<p>Orçamento e Prazo? Pergunte aqui.</p>
</a
</div>

Agora para usar, vá até o index.php do seu site e dê um require no whatsapp, exemplo:

<?php require __DIR__ . '/whatsapp/whatsapp.php'; ?>

Claro que você tem que respeitar os diretórios que você criou. Mas caso você não queira utilizar desta forma, você não precisa criar o arquivo whatsapp.php, basta ir na sua index.php ou index.html, enfim, no código fonte onde quer instalar o botão, procure por </body> e acima dele cole o código passado neste passo.

Importante! altere os trechos destacado no código para os seus dados, confira:

  • ENDERECO_DO_LOGOTIPO é a uma url para uma imagem de preferência 100x100 ou maior (sendo quadrada) do logotipo da empresa.
  • 11990909090 é o DDD seguido do número do WhatsApp que quer utilizar, não use traços ou espaços.
  • Para deixar uma mensagem pré definida ao abrir a conversa no whats, altere o link para: https://wa.me/5511990909090?text=Mensagem%20PréDefinida

Fazendo tudo isso, salve, faça os testes, personalize e seja feliz =)

Medir conversões (cliques) no botão pelo Google Adwords

Então você precisa medir as conversões de clique neste botão? Não tem problema! nós te ajudamos.

1. Crie uma nova Conversão no Adwords do tipo Website na categoria Lead.

Ps. Lembrando que eu to considerando que você já tem a Tag global do Adwords instalada em seu site.

2. Será gerado um Snippet de evento, escolha o método Clique e copie o código gerado

Com o código em mãos, volte até ao whatsapp.php se você optou por cria-lo ou no arquivo que você copiou o código do passo 6 e cole ele imediatamente acima de <link rel="stylesheet" href="whatsapp.css"/>.

Agora nos dois links <a> do código, adicione: onclick="goog_report_conversion ('https://wa.me/5511990909090')"  e não esqueça de alterar novamente o número.

Pronto, agora você está mensurando os cliques para o Adwords, boas conversões!

Fez todo o processo e não funcionou? Tente utilizar o nosso Gerador de Botão Fixo para WhatsApp Inteligente!