Como adicionar um botão flutuante

A GDigital 2.0 CHEGOU! Quer saber como adicionar um botão flutante na sua página? Vem com a GDigital!

Dentro da edição da sua página, você vai selecionar o Componente HTML:



Você vai colocar este componente na sua página e irá inserir o código logo após.

Para o botão flutuante do WhatsApp você pode utilizar este código abaixo:

Código botão na direita:

<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>

Botão do lado esquerdo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://wa.me/5514997315105?text=Adorei%20seu%20artigo" style="position:fixed;width:60px;height:60px;bottom:40px;left: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>

Basta inseri-lo no campo HTML e Salvar:



Sempre coloque seu número no campo solicitado.

Prontinho seu botão flutuante foi instalado na sua página. 😃

Atualizado em: 18/07/2024