Minhas Compras
Você adicionou a sua lista de compras. O que deseja fazer agora?
Continuar Comprando! Fechar Compra!
Fale Conosco
Down Arrow

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.

5 de dezembro de 2017 às 02:03
39 comentários
41,047
Widget WhatsApp Fixo na Lateral com Mensagens
  • Compartilhe esse Post
  • Compartilhar no Facebook00
  • Compartilhar no Twitter
  • Compartilhar no WhatsApp

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.

Criamos também um gerador de botão para facilitar a criação do botão, este funcionará de forma independente e ainda possibilita a medição de conversão pelo google adwords. Acesse agora mesmo o nosso Gerador de Botão Fixo para WhatsApp

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

 

  • Compartilhe esse Post
  • Compartilhar no Facebook00
  • Compartilhar no Twitter
  • Compartilhar no WhatsApp
Lista VIP
Sobre o autor
Comentários

Deixe um comentário

Enviando Comentário Fechar
Já temos 39 comentários
Isídio Neto

Isídio Neto

5 de junho de 2019 às 13:21

como eu posso habilitar dois numero distinto do whatsapp no mesmo aplicativo, para ser exibido no site?
Enviando Comentário Fechar
Bernardo Albuquerque

Bernardo Albuquerque

29 de maio de 2019 às 13:21

Este widget não está funcionando para WEB WhatsApp. Funciona apenas para mobile. Teste realizado em 29/05/2019
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

30 de maio de 2019 às 11:38

Opa Bernardo,


Então aqui funciona normalmente, qual navegador você utiliza?


Também temos um gerador deste botão feito de forma totalmente independente, caso queira testar: Gerador de Botão Fixo para WhatsApp

Enviando Comentário Fechar
LIDIA PROENCA

LIDIA PROENCA

14 de maio de 2019 às 15:55

PERFEITO! MUUUUITO OBRIGADA
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

14 de maio de 2019 às 20:13

Fico feliz em ter ajudado Lidia =)

Enviando Comentário Fechar
Ricardo Rissoli

Ricardo Rissoli

27 de janeiro de 2019 às 12:00

Só funciona pelo pc, pelo smartfone aparece a mensagem " A conexão com api.whatsapp.com foi recusada.
Como devo fazer?
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

24 de fevereiro de 2019 às 12:56

Estranho Ricardo, pode ser que o seu navegador no celular esteja bloqueando. Infelizmente esse Widget não temos muito controle sobre ele por ser de terceiro.


Mas quem sabe a gente não cria um artigo mostrando como criar um widget próprio, ou até mesmo um gerador, o que acha?


Desta forma vamos conseguir manipular melhor o widget com o link atualizado do WhatsApp, se você ainda não viu, veja em:


Link para WhatsApp

Enviando Comentário Fechar
Natan Souza

Natan Souza

19 de janeiro de 2019 às 14:13

Opa, beleza?

infelizmente não consegui incluir
Ele está dando esse erro no console:
Failed to load resource: net::ERR_FILE_NOT_FOUND static.whatshelp.io/widget-send-button/js/init.js:1
Enviando Comentário Fechar
Jussara Batista

Jussara Batista

18 de outubro de 2018 às 09:18

Já tentei vários formatos. Qndo clico pelo PC dá certo, mas pelo telefone não.
Enviando Comentário Fechar
Jussara Batista

Jussara Batista

17 de outubro de 2018 às 23:43

Olá, configurei o Widget em meu site porém, quando clica nele pelo Smartphone ele some e não direciona para uma conversa no whatsapp. Sabe o que pode estar acontecendo.? Configurei pelo whatshelp.io/widget
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

18 de outubro de 2018 às 03:56

Verifique se está colocando o número no formato que o site pede.
Enviando Comentário Fechar
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
Andre Sousa

Andre Sousa

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