Botão Flutuante WhatsApp

Olá Lojistas,

Venho trazer uma opção de botão de whatsapp bem simples, caso estejam precisando e não saibam como fazer.

<a style="background-image:url(URL DA IMAGEM AQUI);width:180px;height:60px;position:fixed;left:20px;z-index:999997;display:block;bottom:20px;background-repeat:no-repeat;" target=_blank href="https://api.whatsapp.com/send?phone=NUMERO DO TELEFONE AQUI"></a>

No caso, é só copiar o código, colar no HTML do site, fazer o upload do arquivo a seguir no seu site, copiar a url, colar no local indicado e alterar o número do telefone.

whatsapp

Você colocou no rodapé ou cabeçalho?

Bom dia!

Adicionei ao rodapé.

Copiei o codigo e colei, mais
fazer o upload do arquivo a seguir no seu site, copiar a url, colar no local indicado e alterar o número do telefone.
Qual arquivo de Upload a seguir? não entendi. Colar no local indicado ? Onde.
Alterar telefone entendi

Boa tarde amigo…

A imagem do whatsapp, clica com o botão direito do mouse, e vai em “Salvar Imagem”…
Depois acessa sua loja, no menu Configurações > Upload de arquivos …
Faz o upload da imagem salva lá. Depois disso o próprio sistema vai gerar um link, só você copiar ele lá, e colar no local indicado no código.

Humm , mui grato agora entendi vou tentar …valeu.

Qualquer dificuldade, fala aqui que a gente tenta te ajudar.

OI Rogerio.
“colar no HTML do site” fiquei confusa. Seria naquela parte em “avançado” ou na pág que abre para escolhermos cabeçalho/rodapé?
se puder me ajudar, fico grata.
Obrigada!

achei bem legal só queria colocar ele um pouco mais para cima pq a imagem ficou cortada

já resolvi colocando height:90px

Oi @Nadia_Christina_C_S ,

Pode ser na parte do rodapé

consegui!

Obrigado Rogerio

eu queria colocar do lado direito do rodapé. Tem como ?

eu alterei o left pelo right mas não deu certo

Para alinhar à direita, use o seguinte código:

<a style="background-image:url(https://cdn.awsli.com.br/1719/1719755/arquivos/whatsapp.png);width:180px;height:60px;position:fixed;right:20px;z-index:999997;display:block;bottom:20px;background-repeat:no-repeat;" target=_blank href="https://api.whatsapp.com/send?phone=5532998047426"></a>

Já testado

Olá Rogério! Tudo bem? Eu consegui colocar o código conforme suas orientações, porém quando clico na imagem para direcionar para o WhatsApp aparece a seguinte mensagem: O número … não está no WhatsApp, sabe o que pode ser? Pois meu WhatsApp está ok!

Olá @sterodri,

Fiz o teste aqui, e pra mim apareceu certinho.

é que precisava colocar o 55 (Brasil) na frente rsrs, mas agora deu certo! Coloquei o meu botão do lado direito! :slight_smile:

Fala, pessoal!

Eu criei um tutorial em vídeo pra adicionar o botão flutuante do Whatsapp:

Tutorial em vídeo:

O passo a passo é bem simples, mostrando como e onde incluir na LI pra não ter erro. Este é o primeiro vídeo do canal, então se puder dar uma força lá eu fico feliz :smiley:

Se precisarem de alguma coisa estou a disposição!


Douglas Medina

Especialista em e-commerce

Whatsapp :zap: Criação de lojas
Instagram :zap: @_douglasmedina
Conteúdo :zap: douglasmedina.com
Curso Online :zap: Personaliza LI

funcionou corretamente, vlw.