> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🔘 Como configurar o botão de ação flutuante como Calendly para reservas de nomeação > ℹ️ **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**