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

9 curtidas

Você colocou no rodapé ou cabeçalho?

1 curtida

Bom dia!

Adicionei ao rodapé.

1 curtida

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

1 curtida

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.

1 curtida

Humm , mui grato agora entendi vou tentar …valeu.

1 curtida

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!

1 curtida

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

1 curtida

já resolvi colocando height:90px

2 curtidas

Oi @Nadia_Christina_C_S ,

Pode ser na parte do rodapé

1 curtida

consegui!

Obrigado Rogerio

1 curtida

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

3 curtidas

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.

2 curtidas

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

3 curtidas

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

1 curtida

funcionou corretamente, vlw.

1 curtida