Como Inserir um Botão Flutuante de WhatsApp em Suas Páginas na Rockty

Introdução

Não perca mais vendas e contatos de visitantes interessados em seus produtos ou serviços. Inserir um botão flutuante de WhatsApp em suas páginas na Rockty facilita o contato direto com seus clientes, aumentando as chances de conversão. Neste tutorial, você aprenderá como adicionar esse recurso usando o elemento 'Script'.

Passo a Passo para Adicionar o Botão Flutuante de WhatsApp

1. Adicionar o Elemento 'Script' na Página

Para começar, adicione o elemento 'Script' em sua página. Você pode encontrá-lo no final da lista de elementos dentro do construtor de páginas da Rockty.

💡 Dica: Se precisar de mais detalhes sobre como adicionar o elemento 'Script', confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.

2. Inserir o Código do Botão Flutuante

Após adicionar o elemento 'Script', uma mensagem aparecerá no topo da tela indicando que sua página possui um script (barra cinza com texto verde neon). Clique no texto verde para abrir a janela de edição de código.

3. Cole o código abaixo na janela de edição, alterando o texto "SEU_NUMERO" pelo número do seu WhatsApp e "SUA_MENSAGEM" pela mensagem desejada:

📌 O número deve estar no formato internacional (DDI+DDD+Número), sem espaços, parênteses ou traços. Exemplo: 5511999998888

📌 A mensagem pode ser inserida com espaços, pontuações e acentuações. Exemplo: Olá, gostaria de mais informações!

<a href="https://api.whatsapp.com/send?phone=SEU_NUMERO&text=SUA_MENSAGEM" 
   target="_blank" 
   id="whatsapp-button" 
   style="position: fixed; 
          bottom: 20px; 
          right: 20px; 
          width: 60px; 
          height: 60px; 
          z-index: 9999; 
          background-color: #25D366; 
          border-radius: 50%; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
          animation: pulse 1.5s infinite;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 
         alt="WhatsApp" 
         style="width: 70%; height: 70%;">
</a>

<style>
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
</style>

✅ O código está otimizado para ser compatível com todos os navegadores modernos e deve funcionar bem em dispositivos móveis e desktops.

4. Marque a opção 'Inserir Tag no Body do HTML' e clique no ícone de fechar (X) para voltar à tela anterior.

5. Publicar a Página para Visualizar o Botão

É importante notar que o botão flutuante não será visível no construtor de páginas da Rockty, apenas na página publicada. Para visualizar o botão, publique a página e acesse a versão publicada.

📝 Nota: A imagem abaixo mostra o botão flutuante aplicado na página após sua publicação:

Conclusão

Adicionar um botão flutuante de WhatsApp em suas páginas da Rockty é um recurso simples que pode aumentar significativamente o engajamento dos visitantes, facilitando o contato direto e rápido com sua equipe. Siga os passos acima para configurar o seu botão e otimize suas páginas para conversões.

Dicas Adicionais

Personalize a Mensagem: Utilize uma mensagem de boas-vindas personalizada para causar uma boa impressão e encorajar os visitantes a iniciar uma conversa.
Verifique o Número de Telefone: Certifique-se de que o número do WhatsApp está correto e incluído no formato internacional para evitar erros de comunicação.
Personalização do Código: O código do botão flutuante pode ser ajustado para alterar o tamanho, a cor, o tipo de animação, ou a posição na página. Para modificar a animação, basta alterar as propriedades da animação dentro da seção @keyframes do CSS. Caso precise de ajuda com personalizações específicas, entre em contato com o suporte da Rockty.
Verificação na Página Publicada: Lembre-se de que o botão flutuante só será visível na versão publicada da página. Portanto, após inserir o código, publique sua página para verificar se o botão aparece corretamente e se está funcionando conforme esperado.
Saiba Mais Sobre o Elemento Script: Se você quiser aprender mais sobre como funciona o elemento Script na Rockty, consulte o tutorial específico neste link. Esse recurso é fundamental para a inserção de códigos personalizados, como o do botão flutuante de WhatsApp.

Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!