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
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.
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.
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:
<a href="https://api.whatsapp.com/send?phone=SEU_NUMERO&text=SUA_MENSAGEM"
target="_blank"
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>
📌 Importante: O código está otimizado para ser compatível com todos os navegadores modernos e deve funcionar bem em dispositivos móveis e desktops.Marque a opção 'Inserir Tag no Body do HTML' e clique no ícone de fechar (X) para voltar à tela anterior.
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.
📌 Observação: 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
@keyframesdo 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ê!