Fale Conosco (15) 99683-8272

Materiais educativos Login do aluno

Menu principal

Navegue pela agência

Últimas novidades

Está rolando por aqui

Onde nos encontrar?

Rua Lucas de Camargo, 257, Centro
Itapeva - SP 18400-340

WhatsApp: (15) 9 9683-8272

Widget WhatsApp Fixo na Lateral com Mensagens

Coloque agora mesmo um botão do seu WhatsApp no site e ainda exiba mensagens animadas para aumentar a interatividade com seus visitantes.
Widget WhatsApp Fixo na Lateral com Mensagens

Há alguns mêses atrás, o WhatsApp lançou um link para que todos que tem website pudessem linkar o seu número e com um clique começar uma conversa. Até publicamos aqui no blog como colocar um Link para abrir o WhatsApp no seu site e tivemos muitos feedback's positivo do tutorial.

Widget WhatsApp Fixo na Lateral com Mensagens

Pensando nisso, conhecemos um widget muito legal e que pode aumentar bastante a conversão do seu site ou do seu cliente. Trata-se de um widget desenvolvido pela WhatsHelp e com ele dá para criar um widget com até 10 opções de contato. Porém aqui vou ensinar a usar apenas o WhatsApp que no meu caso foi o que mais funcionou legal.

Adicionando um Widget Fixo do WhatsApp no site

O código é curto e objetivo. Antes da tag </body> do seu código, adicione:

<script type="text/javascript">
(function () {
var options = {
whatsapp: "+5515996838272", // Número do WhatsApp
company_logo_url: "//www.webcreative.com.br/themes/webcreative/images/perfil.jpg", // URL com o logo da empresa
greeting_message: "Olá! A primeira mensagem a ser exibida, escreva aqui.", // Texto principal
call_to_action: "Uma mensagem convidando para enviar um whatsapp.", // Chamada para ação
position: "right", // Posição do widget na página 'right' ou 'left'
};
var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>

Simples assim! Agora é só alterar os trechos em laranja para os dados da sua empresa.

Caso não consiga compreender o código acima ou tenha dificuldade em alterar, acesse o site oficial do widget onde você pode personalizar com mais facilidade e também encontrar mais opções de redes sociais.

ACESSAR WHATSHELP

Gostou dessa dica valiosa? deixe um comentário abaixo

 

Deixe um comentário

Enviando Comentário Fechar
Já temos 28 comentários
José Desiderio

José Desiderio

13 de agosto de 2018 às 19:16

Gostei desse Widget, estou com uma dúvida como faço para colocar o rastreio de eventos do Analytics nesse código?
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

17 de agosto de 2018 às 12:27

Opa José, tudo bom?

Então este widget é FREE fornecido pela WhatsHelp.io. Somente na versão paga dele ($2,49/mês) entra essa parte de rastrear eventos no Analytics e mais outros recursos.

Dê uma olhada em: https://whatshelp.io/widget

Ao seu sucesso.
Enviando Comentário Fechar
Eduardo Baruffi

Eduardo Baruffi

2 de agosto de 2018 às 14:34

No mozila não abre da erro Endereço não compreendido
Enviando Comentário Fechar
Felipe Chaves

Felipe Chaves

24 de julho de 2018 às 17:17

É possível abrir a câmera do whatsapp apenas com um link?
Enviando Comentário Fechar
Thiago Simoes

Thiago Simoes

16 de julho de 2018 às 17:39

Olá, como vai? não consegui incluir isso no meu site wordpress, alguma dica? Inclui antes da tag mas sem sucesso, não aparece nada.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

17 de julho de 2018 às 11:12

Opa Thiago, verifica se não deu nenhuma incompatibilidade pelo console, agora se você não entende um pouco de programação, envie o link do teu site aqui, talvez conseguimos te ajudar =)
Enviando Comentário Fechar
Juliana Moraes

Juliana Moraes

4 de julho de 2018 às 13:08

Ao clicar no botão do WhatsApp na loja, aparece a seguinte mensagem " O número de telefone ...... não está no WhatsApp" O que devo fazer?!
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

4 de julho de 2018 às 13:27

Oi Juliana,

Como você está colocando o seu número de telefone?
Enviando Comentário Fechar
Alex Cabral

Alex Cabral

16 de junho de 2018 às 19:19

legal mas não consigo colocar a mensagem já tipo: &text=Olá,%20gostaria%20de%20cadastrar%20o%20meu%20imóvel!
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

16 de junho de 2018 às 22:15

Infelizmente nesse Widget não é possível colocar mensagem pré montadas Alex. Só vai funcionar colocando no formato link mesmo.

Mas quem sabe não montamos um widget com opção de mensagem né =D
Enviando Comentário Fechar
Cosme Daniel

Cosme Daniel

14 de maio de 2018 às 20:05

Só que no meu não está parecendo a caixa de aviso com a logo. O que poderia ser?
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

15 de maio de 2018 às 14:30

Opa moquerido!

Verifica se não está dando alguma incompatibilidade no seu console. Dá uma esvaziada no cachê também pra ver se não resolve.

Abs
Enviando Comentário Fechar
Cosme Daniel

Cosme Daniel

14 de maio de 2018 às 20:01

Obrigado, Ajudou muito. Simples e muito prático.
Enviando Comentário Fechar
Wilton Marles Nogueira

Wilton Marles Nogueira

7 de maio de 2018 às 00:17

Muito bom! Só não estou conseguindo colocar a logo. É necessário colocar o https e tirar o // que está lá? pelo que entendo um pouco de html, o // é para comentários... mas no código tem um // no entre aspas.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

8 de maio de 2018 às 17:38

Opa Wilton, então o // neste caso não vai comentar pois ele está entre as aspas como você disse.


Este formato de link com o //www. no começo é usado para identificar automaticamente se o link é um http ou https entendeu?


Então você pode alterar a partir da parte destacada mesmo =)

Enviando Comentário Fechar
Empreendedor Web

Empreendedor Web

27 de maro de 2018 às 21:33

Obrigado! muito bom
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

8 de maio de 2018 às 18:12

Shoow
Enviando Comentário Fechar
Lázaro Monteiro

Lázaro Monteiro

19 de fevereiro de 2018 às 00:40

Olá, não consegui ativar no meu site do WordPress, usei um plugin de Head e Body pra adicionar o código, não deu certo.

Tem alguma outra forma de fazer funcionar?

Obrigado.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

21 de fevereiro de 2018 às 23:59

Olá Lázaro,

Então eu recomendo que você instale direto no código-fonte do seu tema no WP. O código é bem simples de implementar, não precisa adicionar plugins para isso.
Enviando Comentário Fechar
Luiz Bezerra

Luiz Bezerra

5 de fevereiro de 2018 às 16:34

Este plugin não funciona no Firefox? ou é impressão minha?
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

6 de fevereiro de 2018 às 09:18

Opa Luiz, na verdade o link de WhatsApp para Firefox até agora não é suportado pelo navegador, infelizmente.
Enviando Comentário Fechar
Osmar Queiroz

Osmar Queiroz

6 de dezembro de 2017 às 15:57

Top muito bom.
Enviando Comentário Fechar
João Victor Barreto

João Victor Barreto

6 de dezembro de 2017 às 11:15

Muito obrigado Ebrahim, muito simples e aumenta e muito a conversão.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

6 de dezembro de 2017 às 12:16

Fico feliz em ter ajudado João. Tmj!
Enviando Comentário Fechar
Davson Santos

Davson Santos

5 de dezembro de 2017 às 13:28

Show de bola a dica ....
Enviando Comentário Fechar
Gilberto Martins

Gilberto Martins

5 de dezembro de 2017 às 12:46

show Ebrahim, ótima dica!!
Enviando Comentário Fechar
Willian Souza

Willian Souza

5 de dezembro de 2017 às 11:22

Muito Top essa dica Ebrahim! Valeu!
Enviando Comentário Fechar
Alisson Pereira Santana

Alisson Pereira Santana

5 de dezembro de 2017 às 09:55

Sensacional Ebrahim, parabéns!
Não imaginava que era tão simples, obrigado!
Enviando Comentário Fechar

| Informe seu e-mail abaixo para continuar!