Inserir Botão WhatsApp no canto inferior direito

Boa tarde a todos, gostaria de inserir um botão com o ícone do Whats App em minha loja, no canto inferior direito. Quando clicar no ícone, ele redireciona para o whats app.
O whats app é: 31 9 9436-5903 . É possível fazer isso ?
Exemplo na loja abaixo:

Tente por este código (Já está com seu número)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://wa.me/5531994365903?text=Ola%20estou%20na%20sua%20loja" style="position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
z-index:1000;" target="_blank">
<i style="margin-top:16px" class="fa fa-whatsapp"></i>
</a>

3 curtidas

Obg Carlos, muito obrigado! A Imagem do whats não apareceu, ficou apenas verde. DEve ser porque não tenho a foto na minha midia ne ?

Esse código trás com ele um ícone do Font Awesome, deveria estar completo. Não sei porque do erro :cry: :cry:

Entendi. Inseri ele nesta parte

@team alguém para ajudar ?

Esse código importa novamente o fontawesome, ou seja, é importado duas vezes e dá conflito. Busque uma imagem para whatsapp que te passo os seguintes

1 curtida

Entendi Matheus, vai ser a imagem padrão do whats mesmo.

oi @diogosalvador, tudo bem?

Ali no finalzinho do código que o Carlos enviou tem: fa fa-whatsapp , coloque: fab fa-whatsapp por favor e me retorna por favor se ficou ok.

Aguardo! :+1:t2:

1 curtida

Boa noite thais, inseri e não funcionou:

oi @diogosalvador, conforme o Matheus falou, o problema é que o código do Carlos estava importando o ícone do font awesome e tava dando conflito (porque a gente já usa).

Usa esse código aqui que vai dar certo. Eu testei aqui na minha loja: (Só confere o numero do telefone por favor!)

<a href="https://wa.me/5531994365903?text=Ola%20estou%20na%20sua%20loja" style="position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
z-index:1000;" target="_blank">
<i style="margin-top:16px" class="fab fa-whatsapp"></i>
</a>
2 curtidas

@thais obrigado por corrigir o código que eu havia enviado e desculpas @diogosalvador pelo código com erro :relaxed:

3 curtidas

Muito Obrigado @thais, funcionou perfeitamente.

@Carlos, sem problemas, obg pela ajuda

2 curtidas

Oi @thais
tudo bem?

Por acaso vi esse chamado, consegui colocar o whatsapp, tudo certinho conforme sua orientação.
Mas aproveitando… quando eu fui acrescentar o código, na tela de pré visualização no lado direito, aparece junto do banner, algumas informações destacadas num quadrado rosa, onde tem informações sobre frete, parcelamento…
Mas de fato esse quadrado rosa não aparece na minha loja.
Onde consigo incluir isso? Tornar ele visível? Achei legal.

Bom dia @celly, tudo bem?

Oii

Deu certo!!
Porém ele ficou um pouco embaixo do banner (o banner de imagens tampa uma parte das informações).
É possível colocar essas informações um pouco mais pra baixo?
Porque já fiz os banners de imagens com as medidas corretas que a consultoria disse que deveria ter.

** Só retificando, no celular ficou perfeito…
O que comentei acima é só quando acessa no note.

Inseri aqui e já tem uma pequena distância. O códigoCSS utilizado é:

@media(min-width: 767px) {
  .info-bar {
    margin-top: 1rem;
  }
}

@thais

Coloquei o código que você indicou e outro cliente conseguiu mas aqui não surgiu efeito, o que pode ser?

Obrigado

Bom dia @vaporstore, tudo bem?
Está mostrando lá no canto direito da página. Tem um pequeno delay pra mostrar, é por volta de 1 minuto.

1 curtida