Passar para o conteúdo principal

Como inserir um botão flutuante na minha Landing Page? - Novo Modelador

Como inserir um botão flutuante do WhatsApp nas landing pages do Ramper Marketing, gerando um link personalizado e adicionando o script via bloco HTML.

Escrito por Vinicius Poleti

Quanto mais fácil e rápido o caminho percorrido pelo lead, maior a chance de ele entrar em contato com a sua empresa. Veja como inserir um botão flutuante do WhatsApp nas suas landing pages.

Ferramentas para gerar o link do WhatsApp com mensagem personalizada: Convertte (convertte.com.br/gerador-link-whatsapp) e Nuvemshop (nuvemshop.com.br/ferramentas/gerador-link-whatsapp).

Passo a passo

  1. Acesse o gerador de link (ex.: Convertte) e crie a mensagem personalizada.

  2. Clique em Gerar Link para obter o link de redirecionamento.

  3. Insira o link gerado no lugar de LINK_COM_MENSAGEM_PERSONALIZADA no script abaixo.

<script>
var attWpp = `<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="LINK_COM_MENSAGEM_PERSONALIZADA" 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>`
document.querySelector("body").insertAdjacentHTML("beforeend", attWpp);
</script>

  1. No Ramper Marketing, vá em Geração de Leads > Landing Pages.

  2. Clique em Ações na página desejada e em Editar.

  3. Em conteúdos, arraste o bloco HTML para a landing page (evite colocá-lo como último elemento; prefira abaixo do formulário).

  4. Exclua a linha de texto existente no bloco HTML e cole o script com a mensagem personalizada.

Pronto! Agora você tem um botão flutuante do WhatsApp na sua landing page.

Ainda tem dúvidas?

É só entrar em contato com o nosso time de Suporte pelos canais:

Respondeu à sua pergunta?