ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

Quer que os clientes possam reservar de qualquer lugar da sua loja — não apenas a página do produto? Um botão de ação flutuante funciona como o widget Calendly: um pequeno botão "Reservar Agora" permanece fixo no canto de cada página, pronto para abrir o seu modo de reserva com um clique.

Hoppy Appointments permite adicionar este botão por serviço, personalizar o seu texto e cores e escolher onde aparece na tela.

Este guia leva-o a montá-lo.

⚠️ Antes de começar

Antes de configurar o botão de ação flutuante, certifique-se de ter:

• A Hoppy Appointments app instalado no seu Shopify guardar
• Pelo menos um serviço ativo já criado
• A Hoppy Appointments app incorporar habilitado em seu tema

💡 O botão flutuante só aparece em páginas onde o aplicativo embed está ativo. Se você ainda não ativou a incorporação, vá para Shopify Admin → Loja online → Temas → Personalizar → App Incorpora e ligar o Hoppy Appointments incorporar.

🛠️ Passo 1 — Abra a Página Geral do Serviço

O botão de ação flutuante está configurado por serviço, dentro do Geral tab — não a página Desenho.

1. Abrir o Hoppy Appointments app
2. Ir para Serviços
3. Clique no serviço ao qual deseja adicionar o botão
4. Clique na Geral aba
5. Rolar para baixo para o Botão de ação flutuante cartão

🛠️ Passo 2 — Habilitar o botão de ação flutuante

Dentro da Botão de ação flutuante carta:

1. Ligar o Activar o botão flutuante comutar

Uma vez activados, os campos de configuração aparecem por baixo da opção.

🛠️ Passo 3 — Configurar o Botão

Configure o botão para corresponder ao estilo e fluxo de reserva da sua loja.

Texto do Botão

Insira o rótulo que os clientes verão no botão. O texto padrão é Livro Agora, mas você pode usar qualquer coisa que se encaixe em sua marca — por exemplo:

• Reserve uma Chamada
• Agendar a Nomeação
• Reserve um Ponto

Posição

Escolha onde o botão aparece na tela:

• Baixo- Direita — aparece no canto inferior direito
• Baixo- Esquerda — aparece no canto inferior esquerdo
• Centro inferior — aparece centrado no fundo

Cor de Fundo

Escolha a cor de fundo do botão. O padrão é preto.

Cor do Texto

Escolha a cor do rótulo do botão. O padrão é branco.

💡 Escolha cores com forte contraste para que o botão é fácil de ler contra o fundo da sua loja.

💾 Passo 4 — Salvar e Antevisão

1. Clique Gravar no topo da página de serviço
2. Aguarde a mensagem de confirmação
3. Visite sua loja e verifique diferentes páginas — casa, produto, coleção, carrinho, etc.

O botão deve permanecer fixo no canto escolhido e abrir o modal de reserva quando clicado.

⚠️ Notas Importantes

• Configuração por serviço — cada serviço tem o seu próprio botão flutuante. Configure-o separadamente para cada serviço em que deseja exibi-lo.
• Aparece em todas as páginas — uma vez activado, o botão mostra em cada página onde o Hoppy Appointments app embed está ativo. Não existem regras de visibilidade específicas da página.
• Vários serviços = vários botões — se activar o botão flutuante para vários serviços, cada um fará o seu próprio botão. Para uma experiência mais limpa, habilite-o apenas no serviço que mais deseja promover.
• Abre o modo de reserva — clicar no botão abre o fluxo de reserva para esse serviço diretamente, sem sair da página atual.
• As traduções requerem Configuração Avançada — se quiser que o texto do botão mude por idioma, habilite Usar a Configuração Avançada sobre o serviço e definir a tradução sob Configurações → Traduções → Traduções de serviço. Veja o guia de tradução para detalhes.

🐞 Resolução de Problemas

O botão não está aparecendo na minha loja

1. Certifique-se Activar o botão flutuante está ligado para o serviço
2. Certifique-se de clicar Gravar
3. Confirmar Hoppy Appointments app embed está habilitado no seu tema
4. Limpar o cache do seu navegador ou testar em uma janela desconhecida
5. Verifique se o serviço está ativo e devidamente conectado a um produto

O texto do botão está errado ou não traduzido

• Se Usar a Configuração Avançada está desligado, o botão usa o texto do Texto do Botão Campo directamente.
• Se Usar a Configuração Avançada está ligado, o texto do botão é puxado de Configurações → Traduções → Traduções de serviço → Rótulo de botão flutuante.

A cor do botão não parece certo

Use os coletores de cores no cartão FAB para o estilo básico. Para mudanças visuais mais avançadas, você pode .futureblink-fab classe com CSS personalizado. Consulte o guia CSS personalizado para detalhes.

🎉 Resultado Final

Uma vez configurado:

✅ Um botão flutuante "Reservar Agora" aparece em cada página da sua loja
✅ Os clientes podem começar a reservar em qualquer lugar sem navegar para uma página de produto
✅ O botão abre o modo de reserva do seu serviço instantaneamente
✅ O texto, posição e cores correspondem à sua marca

📚 Artigos relacionados

• Reservas de Nomeação — Opções de Design e Estilhamento
• Como definir CSS personalizado para o aplicativo reservas de nomeação
• Reservas de nomeação — Tradução
• Como configurar serviços de reserva de nomeação

Actualizado em: 10/09/2026