Dicas gerais Tutoriais Web Acappella

Whatsapp fixo no seu site Web Acappella

Fala pessoal, como estão?

Hoje vou ensinar a como colocar o ícone no Whatsapp fixo no seu site feito no Web Acappella.

Não é novidade pra ninguém como o Whatsapp se tornou uma ferramenta imprescindível para comunicação dinâmica entre pessoas que se tratando do mundo dos negócios potencializou ainda mais as vendas uma vez que conseguimos interagir com um lead em tempo real. Sem mais delongas, vamos por a mão na massa.

Existem algumas formas de fazer isso, vou ensinar ensinar as duas que acho mais simples.

MÉTODO 1 : GetButton

É uma ferramenta online que permite que você gere botões (isso mesmo, serve para mais app’s além do Whatsapp) para integrar em seu site. Como muitos serviços ele tem a função PRO que é paga, porém é possível colocar o Whatsapp na função grátis sem dificuldades.

Passo 1

Acesse a ferramenta CLICANDO AQUI

Passo 2

Escolha o app do Whatsapp e coloque seu número de telefone como na imagem.

Passo 3

Agora você vai se atentar para as últimas duas opções (A opção de logo e mensagem são para usuários PRO) definindo o lado que deseja que o ícone apareça no site e o CTA (Call to Action).

Passo 4

Agora você vai para o final da página, nessa parte basta inserir seu e-mail e clicar em “Get Button code”

Passo 5

Copie o código gerado.

Passo 6

Vá nas propriedades da página onde deseja que o botão apareça, cole na sessão “código personalizado no <head>” e depois clique em salvar e fechar.

Publique seu site que seu botão irá aparecer.

MÉTODO 2 : Código

Você pode colocar direto pelo código sem utilizar app’s.

Passo 1

Pegue o seguinte código:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://wa.me/55(aqui seu numero com ddd | tudo junto)?text=Adorei%20seu%20artigo" 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>

-Onde está aqui seu numero com ddd | tudo junto você vai colocar seu número com ddd tudo junto. Ex: 11982614621

-Onde está Adorei%20seu%20artigo você coloca o texto que vai como mensagem definida lembrando que sempre que for usar espaço coloque %.

-Onde está background-color:#25d366 você vai colocar a cor do fundo.

-Onde está color:#FFF você vai definir a cor do ícone.

Seu código editado deverá ficar próximo a isso:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>

<a href=”https://wa.me/55(aqui seu numero com ddd | tudo junto)?text=Quero%comprar%o%Wacontrol” 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>

Pegue esse código e siga o passo 6 do método 1 colocando esse código no head da página onde deseja que o mesmo apareça.

Pronto!!! Qualquer dúvida é só deixar nos comentários.

5 Comentários
  1. Guilherme 4 anosatrás
    Responder

    Excelente post. Me ajudou bastante e ajudará muita gente. Parabéns pelo conteúdo.

    • Vinícius Von Dentz 4 anosatrás
      Responder

      Opa Gui, ficamos felizes em ajudar

  2. LUIZ GENTIL A NETO 4 anosatrás
    Responder

    Muito obrigado pela dica!!!
    Excelente!

    • Vinícius Von Dentz 4 anosatrás
      Responder

      Fico feliz em ajudar meu amigo

  3. LUIZ GENTIL A NETO 4 anosatrás
    Responder

    Muito obrigado

Deixe um comentário

Seu endereço de e-mail não será publicado.

você pode gostar