Objetivo #
Ensinar como adicionar e configurar um botão flutuante no website utilizando o recurso nativo da plataforma, garantindo funcionamento correto tanto no desktop quanto no mobile.
Público-alvo #
Usuários iniciantes a intermediários que desejam adicionar um botão fixo na tela, como WhatsApp ou contato rápido.
Visão geral #
O construtor possui um recurso nativo de botão flutuante. Esse botão fica fixo na tela e se ajusta automaticamente ao tamanho do dispositivo do visitante.
Ele pode ser configurado com:
- link ou número de contato
- mensagem (opcional)
- posição na tela
- tamanho
- opacidade
- sombra
- efeito de entrada
- tag para integração com scripts
Após configurado e salvo, o botão funciona automaticamente tanto no desktop quanto no mobile.
Passo a passo #
1. Acessar os elementos do construtor #
Dentro do construtor da página:
a) clique em Adicionar elementos
b) no menu lateral direito, role até encontrar Botão flutuante
2. Selecionar o botão flutuante #
Escolha um dos modelos disponíveis clicando e arrastando o escolhido para cima de algum painel do seu website.
Exemplo comum: botão de WhatsApp.
3. Abrir as configurações #
Clique com o botão direito do mouse sobre o botão inserido.
Isso abrirá o painel de configurações.
4. Configurar o link ou número #
Se for WhatsApp:
- insira o número seguindo o formato indicado na URL de exemplo
Esse passo é essencial para o funcionamento correto do botão.
5. Ativar mensagem opcional #
Você pode habilitar um texto ao lado do botão.
Exemplo:
Nos mande uma mensagem
Esse texto pode ser personalizado conforme sua necessidade.
6. Definir posição do botão #
Escolha onde o botão ficará:
- lado esquerdo
- lado direito
7. Ajustar tamanho #
Na opção de tamanho, defina a dimensão do botão.
Isso impacta diretamente na visibilidade e usabilidade.
8. Ajustar opacidade #
Você pode controlar o nível de transparência do botão.
Use isso para deixar o botão mais discreto ou mais chamativo.
9. Configurar sombra e efeito de entrada #
Você pode personalizar:
- sombra do botão
- animação de entrada
Esses ajustes melhoram o impacto visual na página.
10. Configurar tag (opcional) #
É possível adicionar uma tag ao botão.
Essa tag pode ser vinculada a scripts JavaScript nas configurações da página, caso você precise de integrações avançadas.
11. Salvar #
Clique em Salvar.
O botão ficará ativo na página.
Como o botão funciona no desktop e mobile #
O botão flutuante é automático em termos de posicionamento.
Isso significa que:
- ele se ajusta à posição definida
- ele se adapta ao tamanho da tela
- ele funciona tanto no desktop quanto no mobile sem configuração extra
Dicas práticas #
a) Prefira o botão flutuante padrão para garantir responsividade automática
b) Revise sempre o número ou link configurado
c) Evite tamanhos muito grandes que possam atrapalhar a navegação
d) Teste em desktop e mobile antes de publicar
FAQ #
O botão funciona no celular automaticamente?
Sim. Ele se adapta automaticamente ao tamanho da tela.
Posso escolher onde ele aparece?
Sim. É possível definir esquerda ou direita.
Posso mudar o tamanho?
Sim. Existe uma configuração específica para isso.
Posso colocar mensagem ao lado do botão?
Sim. Essa opção pode ser ativada e personalizada.
Posso integrar com scripts?
Sim. Utilizando a configuração de tag.
Troubleshooting #
O botão não aparece na página
Verifique se clicou em salvar após configurar
Confirme se o botão foi realmente adicionado à página
O botão não abre o WhatsApp corretamente
Revise o número inserido e o formato da URL
O botão está em posição errada
Verifique se o lado selecionado é o correto
Teste em diferentes tamanhos de tela
O botão está muito grande ou pequeno
Ajuste a configuração de tamanho até atingir o equilíbrio ideal
Resumo #
O botão flutuante padrão é a forma mais simples e eficiente de adicionar um botão fixo no seu website.
Ele já vem preparado para funcionar corretamente em desktop e mobile, com ajuste automático de posicionamento e tamanho da tela.
Se configurado corretamente, não exige nenhuma adaptação adicional.
