Blog > Sites e Ecommerce > Como inserir um botão flutuante do WhatsApp na loja integrada?

Como inserir um botão flutuante do WhatsApp na loja integrada?

04/03/2018
Neste tutorial de hoje você poderá inserir um botão flutuante de Whatsapp na sua loja virtual, na plataforma da loja integrada. Assista o vídeo abaixo ou então acompanhe o passo a passo por escrito. Para este tutorial, você não precisa de nenhum conhecimento específico, pois estamos ensinando você do zero. É necessário apenas que você já tenha uma loja na plataforma da loja integrada.
O primeiro passo é acessar o site Iconfinder e encontrar um ícone adequado para sua loja, não esqueça de guardar as dimensões do ícone (recomendamos que você baixe no tamanho 64x64). Após escolhido, faça download da imagem e suba ela na sua plataforma. (Para isso, acesse a engrenagem no canto superior direito, vá em "Upload de arquivos"). Ao subir a imagem você irá obter um link. Guarde esse link para o próximo passo.

O segundo passo é acessar a engrenagem e clicar em "Incluir código HTML", você irá colocar o código no campo "rodapé". O código a ser colocado é o seguinte:

<div class="whatsapp-fixo">
<a href="https://api.whatsapp.com/send?phone=INSIRA SEU NÚMERO DE WHATS AQUI">
<img src="LINK DA IMAGEM" width="LARGURA" height="ALTURA" alt="Fale Conosco pelo WhatsApp"/> 
</a>
</div>

Não esqueça de alterar os campos que estão acima descritos como INSIRA SEU NÚMERO DE WHATS AQUI, LINK DA IMAGEM, LARGURA, ALTURA. Lembre-se que é só digitar. Se algo der errado é bom revisar este passo.
O terceiro passo é você acessar novamente a engrenagem e acessar "Editar CSS", lá você irá colar o seguinte código:

/* WHATSAPP FIXO */
.whatsapp-fixo {
position: fixed;
bottom:10px;
left:10px;
z-index: 999;
}
Após efetuado esses passos, está pronto seu botão.

Possíveis erros ao acompanhar esse tutorial
- Colocar o número de telefone com pontos e traços (ex. +55 (51) 99999-9999);
- Colocar o link da imagem errado;
- Colocar uma imagem muito grande;
- Colocar a imagem nomeada com espaços (ex. "Logo do WhatsApp.png" enquanto o correto seria nomear da seguinte forma "Logo-do-Whatsapp.png");
- Esquecer de salvar o HTML ou o CSS.

Acesse aqui o site para baixar os ícones

Acesse aqui a API do WhatsApp



Confira o vídeo completo:

Comentários

  • Lucas
    - 19/03/2018 11:42:18

    Bom dia! Segui suas instruções e deu certo no mobile porém no desktop não está aparecendo. Tem ideia do que pode ser? abraço

  • Eduardo Leffa
    - 20/03/2018 01:55:27

    Olá Lucas, no seu site vi que seu código não deu no desktop, pois você colocou o código dentro de uma media querie (veja abaixo) Essa media querie @media (max-width:1100px) quer dizer que o .whatsapp-fixo só irá aparecer em telas com resolução menor do que 1100px, ou seja, apenas no mobile. @media (max-width: 1100px) { .whatsapp-fixo { position: fixed; bottom: 10px; left: 10px; z-index: 999; } } Consulte onde você inseriu seu código.

  • Priscila Santos
    - 30/03/2018 20:42:37

    Eduardo deu certo, porém ele ficou lá embaixo, tem como deixar ele tipo quando eu for abaixar a pagina sem precisar ir até o final ele já aparecer?

  • Eduardo Leffa
    - 31/03/2018 14:06:38

    Priscila, se ele não está ficando fixo, revise o código CSS, pois o position:fixed; faz com que apareça embaixo, mas apareça independentemente da rolagem da tela. Se não for isso, tire um print e envie para nós.

  • Priscila Santos
    - 06/04/2018 15:35:26

    Eduardo deu certo ele está flutuando obrigada. Em vez de deixar ele a direita ou esquerda tem como deixar ele no centro no rodapé? tentei mudar de left para center no código, mas nada aconteceu tem alguma configuração diferente?

  • Eduardo Leffa
    - 08/04/2018 16:55:27

    Priscila, É possível sim, porém será um pouco diferente. Você terá que fazer o seguinte: primeiro pegue a largura da imagem, no nosso exemplo é 64, e depois divida por 2, ou seja, vou pegar esse resultado 32, e guardar essa informação. O bottom esse você continua estipulando quanto você quer. (que é a distância entre a imagem e o fim da página) o que vai mudar agora é que você vai colocar o left: 50% e um margin-left negativo com aquele valor que você dividiu. Neste caso ficaria assim: .whatsapp-fixo { position: fixed; bottom:10px; left:50%; margin-left: -32px; z-index: 999; } e com isso ele ficará centralizado na página.

  • Priscila Santos
    - 09/04/2018 02:21:52

    Eduardo muito obrigada...Deu certo ficou do jeito que eu queria..Deus abençoe

  • Bruno
    - 16/04/2018 09:27:54

    Eduardo, excelente vídeo. Muito bem explicado e o mais importante, funciona. Muito obrigado!

  • Cleoci Pinheiro Ribeiro
    - 16/04/2018 15:12:41

    Eduardo Leff: Parabéns, pelo artigo e muito obrigado pelas dicas que tem nos ajudado bastante, não querendo abusar e já abusando pode me dar mais uma dica de como fazer pra abrir o link do whatsapp em uma nova aba? desde já agradeço. firme aí nas publicações.

  • Magno Cavalcante
    - 18/04/2018 10:49:22

    Bom dia! Ótimo artigo. Uma duvida, não seria ruim o cliente sair da Pagina? Não teria nada que faça ele abrir uma janela sem sair?

  • Eduardo Vargas Leffa
    - 18/04/2018 12:15:25

    Cleoci, esta é uma ótima observação. Tem sim como fazer com que abra em uma nova aba. Para isto basta que você coloque junto com a tag "a"  um target="_blank", que deverá ficar assim <a href="" target="_blank"></a> . Mas lembre-se que, pelo celular quando a pessoa clicar no ícone do whats, abrirá o whats, então de qualquer forma a pessoa irá sair do site. 


    Magno, aqui a mesma resposta se aplica à sua pergunta.

  • edvaldo
    - 02/05/2018 02:07:18

    Olá amigo,excelente dica,porem não consegui configurar o icone para abrir em outra janela.

  • Eduardo Vargas Leffa
    - 06/05/2018 20:50:28

    Para que ele abra em outra janela basta que você adicione na tag <a> o seguinte atributo target="_blank", assim você força a abertura em uma nova janela. Ficando assim o link <a href="" target="_blank"></a>. Certo? Espero ter ajudado!

  • alexsander
    - 09/05/2018 02:41:41

    Boa noite Eduardo tudo bem ? adorei seus videos e estou conseguindo montar minha loja graças a vc. mas só estou tendo duas dificuldades. pois já fiz tudo direitinho em relação as categorias e o produto, mas até agora não apareceu nada. nem as categorias... meu site https://usedarlim-com-br.lojaintegrada.com.br/ falta só isso pra eu migrar para o PRO muito obrigado pelo seu profissionalismo

  • Eduardo Vargas Leffa
    - 09/05/2018 19:30:54

    Olá Alexsander, Já apareceu os produtos? Demora um pouco para aparecer, se não aparecer (e os produtos já estiverem marcados como ativos) procure entrar em contato com a Loja Integrada e peça para que eles reindexem sua loja.

  • Amanda
    - 19/05/2018 00:44:24

    O meu não funcionou de jeito nenhum. Segui as orientações direitinho, mas mesmo na hora de incluir o HTML o visual da loja integrada é diferente do seu. Pode me ajudar?

  • Anderson
    - 22/05/2018 22:20:28

    vALEUUU bROTHER.. CONSEGUI criar no meu ...através do seu passo a passo.. da uma passada la e se puder indicar algumas alterações para um melhor desenvolvimento eu te agradeço... https://fusion-world.lojaintegrada.com.br/ obrigado . obrigado... obrigado.... Saindo do wordpress e migrando para loja integrada por facilidade no desenvolvimento..

  • Paulo
    - 25/05/2018 17:49:47

    Boa tarde tudo bem? Eu adoraria saber como eu faço para que ao clicar nesse botão fixo adicionado para que abra uma nova guia no navegador, preservando a guia do site aberta. Valeu!!

  • Gui
    - 06/06/2018 16:22:34

    Olá, como faço para colocar horario de funcionamento????

  • Marco Tulio
    - 21/06/2018 01:32:30

    Ola, o icone ta ficando na pagina WEB la em abaixo, ele nao acompanha a rolagem, ate vi voce ajudando a Priscila com a duvida, mas nao entendi o que é para fazer?!

  • Eduardo Lugli
    - 25/06/2018 13:13:44

    Bom dia, Muito obrigado pela ajuda, já fizemos em nossa loja e deu certo! Gostaria de pedir só mais uma coisa: não queria que ao clicar no botão gerado o cliente saísse do meu site, e sim que fosse aberto uma nova guia. Como podemos fazer isso?

  • luiz
    - 05/07/2018 21:27:43

    ola boa noite...procurei varios tutoriais na internet sobre esse assunto e o seu foi o melhor, porem, eu nao consigo "amarrar" esse codigo html como o css. tenho que criar um arquivo css e deixar na pasta principal do ftp? pode me ajudar por favor?

  • Guilherme
    - 23/07/2018 14:58:21

    Consegui colocar ele para abrir em outra página no computador, mas ele funcionou 5 min e depois parou de funcionar, eu tenho que criar um <a> novo, ou posso colocar dentro do <a href="meu site"></a> ????

  • Eduardo Vargas Leffa
    - 23/07/2018 23:16:10

    Esse problema pode ter ocorrido devido ao tempo de atualização da Loja Integrada. Às vezes mudamos algo, e ele funciona, daqui há pouco para de funcionar. Mas o interessante é você aguardar uns 15 minutos de fato, para que funcione esse seu ajuste. Para que ele abra em uma outra janela, basta que você insira junto do "a" um target="_blank" ficando o código assim: <a href="o link do whats" target="_blank"></a>.


    Espero ter lhe ajudado, caso o contrário entre em contato novamente.

  • Cyro
    - 02/08/2018 15:44:34

    Também não entendi como colocar pra rolar na tela, vi você ajudando a Priscila, mas você fala que pois o position:fixed; faz com que apareça embaixo, mas apareça independentemente da rolagem da tela. Mas aí eu tenho que mudar o nome Fixed por outro? deixar em branco ? Fiquei sem entender essa parte

  • ROBERTO LUIZ DOS SANTOS
    - 05/08/2018 14:07:23

    Parabéns Eduardo, muito obrigado, configurei na minha loja, abraços.

  • DANIEL BIGARDI
    - 11/08/2018 22:17:03

    cara, você mandou muito bem nesse HELP aí... achei incrível... PARABÉNS Vou seguir vocês e curtir as postagens. abraços

  • Eduardo Vargas Leffa
    - 13/08/2018 22:05:03

    Ficamos muito felizes em saber disso Daniel! Seja sempre bem-vindo ao nosso blog!

  • Wesley
    - 06/09/2018 08:14:58

    Boa noite! Eduardo, tudo joia? Parabéns pelo trabalho! Sou novo no LI e estou com dificuldades para colocar alterar o fale conosco, e redes sociais superior. Poderia me ajudar? Agradeço desde já!

  • kamilla
    - 09/09/2018 02:06:53

    Ola!! Uma duvida, fiz esse passo a passo do WhatsApp. quando eu entro pelo safari do celular na minha pagina e clico no icone do whatsapp super funciona. Porem, quando eu entro no meu site pelo safari do note, ele diz q o safari nao reconhece endereco de internet que comecem por "WhatsApp". o que pode estar acontecendo? obrigada!!

  • Ademilson Fagundes
    - 15/09/2018 15:24:53

    Cara... Parabéns! Show de bola.... quem quizer comprovar pode acessar www.lubrificanteintimo.com.br

  • Elivasio
    - 19/09/2018 22:36:39

    Foi o código mais simples, pontual e que funcionou de primeira. Pode conferir aqui em www.resolvemicro.com.br que tá show ed bola.

  • DAVI SANTOS DE ARRUDA
    - 26/09/2018 18:37:49

    Muito bom o vídeo!! Só achei curioso que no firefox tem dado erro no desktop.

  • Eloy
    - 03/10/2018 14:47:03

    O que fazer para incluir esse código quando já tem outro código lá no rodapé para não dar erro?

  • Marcelo
    - 19/10/2018 13:48:17

    Bom dia Eduardo, excelente conteúdo. O meu deu certo, mais o batão não está flutuando, ficou fixo no final da página, será que você poderia me ajudar?

  • Roberto Sant'Oro
    - 31/10/2018 00:49:12

    Sua aula é muito prática! Parabéns e muito obrigado Esse botão deixa praticidade aos clintes!

  • MARCIO BONITÃO
    - 14/11/2018 14:36:37

    Otima dica! mas não consegui fazer ele abrir em outra guia ou janela, sem fechar a da loja. não entendi como usar a TAG, mencionada. vi em outro comentario a mesma duvida mas não entendi. Obrigado

  • KelOnek
    - 06/09/2019 19:10:50

    Doxycycline Generic Online Viagra Pharmacie Forum viagra Achat Tadalafil Suisse Kwikmed Comprar Viagra Cialis Levitra Medicamentos

  • Steveffory
    - 10/09/2019 05:00:31

    Precios Cialis En Andorra viagra online pharmacy Comment Prendre Cytotec Get Cheap Cialis Online

  • Julio
    - 11/09/2019 19:54:01

    Cara, parabens!!!!! deu certo de primeira e ficou top! obg

Deixe seu comentário

Apenas seu nome e comentário ficará público, seu e-mail não será publicado.