16 seguidores Seguir

Colocar botão Whatsapp Home Loja

Respondida

Comentários

27 comentários

  • Geferson Alencar
    Comentário oficial

    Boa noite! Tudo bem?

    Segue o passo para inserir um Widget flutuante no seu site para o cliente clicar e ir direto para WhatsApp Web ou para WhatsApp se tiver no mobile:

     

     

    Insira o seguinte código:

     

    <a href="https://api.whatsapp.com/send?l=pt&amp;phone=5541999999"><img src="https://i.imgur.com/XMsxHpu.png" style="height:80px; position:fixed; bottom: 25px; right: 25px; z-index:100;" data-selector="img"></a>

     

    DICAS:

    1 - Aonde está 5541999999 coloque 55DDDSEUNUMERO, exemplo se seu número é (62) 99842-2342 você colocaria 5562998422342.

    2- Aonde está img src="https://i.imgur.com/XMsxHpu.png" você pode colocar seu botão do WhatsApp personalizado. Só hospedar a imagem do botão e colocar o link. Lembrando que sempre coloque com https:// .

    Depois é só SALVAR e ver como ficou no site. 

    Por conta do cache da loja, as vezes demora um pouco para aparecer no seu navegador. Para agilizar o cache entre em janela anonima ou limpe o cache do seu navegador.

    Sucesso!

    Ações de comentário Permalink
  • Luan Nauê Gonçalves Pires
    1

    Você diz como se fosse um plugin, o cliente clica e abre a conversa na mesma janela né?

    Até onde eu sei não existe uma API para isso.
    Se alguém souber por favor mostre para nós, pois eu também quero!

    Ações de comentário Permalink
  • Julie Sabag
    0

    Em primeiro lugar muito obrigada pela sua dica. Foi sensacional. No computador não está aparecendo apenas no celular. Vc sabe o motivo? 

    Ações de comentário Permalink
  • Geferson Alencar
    1

    Bom dia Julie!

    Pode ser o cache da sua maquina. Da um ?session=qualquercoisa para ver o seu site com cache limpo.

    Exemplo: www.seusite.com.br com session ficaria www.seusite.com.br?session=pioepgosifopsidgfs

    Espero ter ajudado. 

    Ações de comentário Permalink
  • tebori nordeste
    1

    Boa tarde,

    Fiz os passos conforme indicado e deu tudo certo... porém quando tentei alterar a imagem, a nova imagem não aparece apesar do botão do whats estar disponível, mas sem imagem, aparecendo apenas um quadrado transparente. Tentei com várias imagens diferentes... o que pode ser?

     

    Ações de comentário Permalink
  • Renan
    0

    Boa noite pessoal,

    Que bacana a dica. Eu sou iniciante nesse negócio, então me perdoem a falta de base. Eu gostaria de saber como faço para inserir a imagem do ícone do whatsapp. Onde insiro a imagem, tem algum botão na plataforma tray?

    Desde já agradeço a ajuda de todos.

    Renan Santos - @babanellas

    Ações de comentário Permalink
  • Gabriel Nascimento
    0

    alguém consguiu resolver essa questão da imagem pois o meu funcionou mas não conseguir mudar a imagem igual a do tebori nordeste

     

     

    Muito top a dica!!! Valeu

    Ações de comentário Permalink
  • EvolutionStore
    0

    Conosco aqui deu certo.

    Ações de comentário Permalink
  • Marilia Suman Pereira
    0

    Deu certo também!!! Obrigada!! :)

    Ações de comentário Permalink
  • Ulisses Silva
    0

    Olá, para mim apareceu a imagem do Whastapp mas não está flutuante, ficou fixa no final da página...

    Ações de comentário Permalink
  • Renan
    0

    Pessoal, eu havia conseguido inserir a imagem com o link flutuante, tanto mobile quanto desktop. Mas ontem sumiu a imagem do mobile. O botão ainda funciona, mas está uma imagem preta no final dizendo que a imagem não existe ou não está disponível.

    Ações de comentário Permalink
  • Natural Plants
    1

    É provável que o proprietário da imagem do WhatsApp, hospedada no caminho "https://i.imgur.com/XMsxHpu.png", tenha removido a mesma deste local. Consequentemente a imagem não será apresentada nas lojas.

     

    Consulta do link:

    Ações de comentário Permalink
  • Renan
    0

    Gabriel, obrigado pela rápida contribuição!

    Você saberia me dizer como que eu mesmo posso hospedar uma imagem para que isso não aconteça mais?

    Sou leigo no assunto, mas eu mesmo tenho configurado toda a loja, e por hora o orçamento está curto para contratar um programador.

    Desde já fico bastante agradecido.

    Rhenan Maartins

    Ações de comentário Permalink
  • Renan
    0

    Gabriel, 

    Me cadastrei no site imgur.com para fazer a hospedagem da minha própria imagem. Não sei se esse é o caminho mais adequado, mas acho que é a mesma solução referenciada no código que Geferson. 

    Eu achava que tivesse uma forma de hospedar uma imagem diretamente na plataforma da tray.

    Bom, fiz a hospedagem da minha própria imagem e deu certo, está tudo ok agora.

    Valeu pessoal

     

    Ações de comentário Permalink
  • Renan
    2

    Pessoal,

    Esse é o link da imagem que eu criei com fundo transparente. Ela tem o tamanho de 158x158 pixels.

    Estou postando para quem quiser usar, já que eu não tenho pretenção nenhuma de deletar ou troca por outra.

    https://i.imgur.com/grETLq2.png”

    Abraços

    Ações de comentário Permalink
  • Natural Plants
    0

    Boa noite!

    Faça sua própria hospedagem. :)

    1º. - Acesse o site "https://imgur.com" :

    2º. - Clique em "inscrever-se" :

    3º. - Utilize uma das contas apresentadas(Facebook, Twiter, Gmail ou Yahoo) para fazer o cadastro. Se seu navegador limpa o histórico automaticamente, faça o acesso a uma destas contas abaixo que será utilizada, para o acesso ficar gravado no navegador e depois dê continuidade no cadastro do site "imgur".
    Você pode criar seu próprio login conforme print abaixo, se não desejar usar uma das redes socias ou e-mail.

    4º. - Após cadastro, clique no menu lateral esquerdo e no menu "Imagens" :

    4º. - Clique em "Adicionar imagens" :

    4º. - Salve a imagem deste link " https://i.imgur.com/ljTyaXj.png " na sua área de trabalho. Esta é a logo do WhatsApp em formato .PNG .

    5º. - Arraste a imagem da sua área de trabalho até o local indicado no print abaixo, ou "Navegue" até encontrar a imagem na área de trabalho:

    6º. - Após passo acima, a imagem aparecerá no site imgur, conforme abaixo:

    6º. Clique sobre a imagem do WhatsApp(conforme acima), e você terá os vários tipos para compartilhar a imagem(conforme abaixo). Prefira utilizar o "Link direto", conforme especificado no print abaixo:

    Abraços,

    Tenham uma ótima semana!

    Ações de comentário Permalink
  • Marilia Suman Pereira
    0

    Olá pessoal, boa tarde!

    Troquei a imagem pela que o Renan disponibilizou, mas agora ela aparece no rodapé do site...não aparece flutuando. 

    Alguém consegue me ajudar? rsrs Não entendo nada! Ainda bem que achei vcs aqui!! 

    Obrigadaaa

    Ações de comentário Permalink
  • Natural Plants
    0

    Marília, boa noite!

    Tente olhar o código informado logo no início deste atendimento (está especificado abaixo também). Não podem faltar nenhum ponto e vírgula se tiver!

    Insira o seguinte código:

     

    <a href="https://api.whatsapp.com/send?l=pt&amp;phone=5541999999"><img src="https://i.imgur.com/XMsxHpu.png" style="height:80px; position:fixed; bottom: 25px; right: 25px; z-index:100;" data-selector="img"></a>

     

    DICAS:

    1 - Aonde está 5541999999 coloque 55DDDSEUNUMERO, exemplo se seu número é (62) 99842-2342 você colocaria 5562998422342.

    2- Aonde está img src="https://i.imgur.com/XMsxHpu.png" você pode colocar seu botão do WhatsApp personalizado. Só hospedar a imagem do botão e colocar o link. Lembrando que sempre coloque com https:// .

    Depois é só SALVAR e ver como ficou no site. 

    Por conta do cache da loja, as vezes demora um pouco para aparecer no seu navegador. Para agilizar o cache entre em janela anonima ou limpe o cache do seu navegador. "

    Ações de comentário Permalink
  • Marilia Suman Pereira
    1

    Natural Plants, obrigada!!! :)

    Ações de comentário Permalink
  • Mistero Tray
    0

    Olá.

    Fiz o procedimento e deu tudo certo, contudo gostaria de abrir o whatsapp em outra aba e não abrir o whats em cima do site como ocorre com este código, tendo que retornar pela seta do navegador.

    Grato

    Samuel

     

    Ações de comentário Permalink
  • Natural Plants
    0

    Na linha (<a href="https://api.whatsapp.com/send?l=pt&phone=seunumerotelefone">), deve constar mais este parâmetro (target="_blank").

    Ficará da seguinte forma - <a href="https://api.whatsapp.com/send?l=pt&phone=seunumerotelefone" target="_blank">

    Ações de comentário Permalink
  • Paridgi Moda Branca
    0

    Funciona muito bem até o momento. Seria interessante se fosse possível também fazer para o instagram 

    Ações de comentário Permalink
  • Danielle Marqueze de Lima
    0

    Bom dia pessoal!
    Por favor, me ajudem... Já tentei cinco vezes incluir o whatsapp na minha loja, lí todos os comentários e não funciona para mim! :(
    Mudei o link da imagem conforme os comentários, inclui o código para que a página abrisse em uma nova, mas nada funciona! 
    A imagem não aparece e quando clicamos no que seria o ícone, abre o whatsapp e diz que o caminho está errado.


    Ações de comentário Permalink
  • Jonatas Fernando Rusch
    0

    Funcionou, muito instrutivo!!!!

    Se alguém precisar de uma ajuda extra jonatas.rusch@gmail.com

    Abraço

    Ações de comentário Permalink
  • leonardo santana
    0

    Pessoal, e se eu precisar retirar esse botão ou modificar ele? Eu coloquei no site, porém ficou sobreposto com o botão de e-mail. Como fazer?

    Ações de comentário Permalink
  • Jonatas Fernando Rusch
    0

    Se precisar retirar, é só tirar o código. Modificar, aí depende a modificação ( tamanho, posição, etc...). Quanto a sobreposição mudar o valor de "bottom" pode resolver...por exemplo se no código está  bottom: 25px; para colocar mais acima aumentar o valor ( por exemplo bottom: 35px;) e mais abaixo reduzir o valor ( por exemplo bottom: 15px;).

    Ações de comentário Permalink
  • gotty
    0

    Para incluir o botão flutuante, acesse esse site abaixo.
    https://www.escoladeecommerce.com/ferramentas/

    Após, ir na opção:

    - Botão de Chat - Para WhatsApp e Messenger (Criar Botão)

    Escolher a opção Whatsapp e preencher as informações, contato, cor do botão, mensagem, e email.


    Ações de comentário Permalink

Por favor, entrar para comentar.

Adicione um comentário
para adicionar um comentário, faça seu
Desenvolvido por Zendesk