O widget Pop-up de reserva adiciona um botão ao seu site. Ao clicar nele, sua página de agendamento do Barberly abre em um pop-up no centro da tela, e o visitante continua na página atual enquanto agenda. Você pode usá-lo no site inteiro ou em páginas específicas, como páginas de serviços ou posts do blog.
Criar uma nova instância#
- Entre na sua conta Barberly em portal.barberly.com.
- Acesse MenuAppsTodos os widgets.
- Clique em Pop-up de reserva.
- Selecione Criar nova instância.
- Dê um nome à instância, por exemplo "Pop-up de agendamento principal".
Configurações#
- Texto dos botões
- O texto do botão que abre o pop-up.
- URL de reserva
- A URL da sua página de agendamento do Barberly exibida no pop-up.
Estilos#
- Cor de fundo
- A cor do botão.
- Cor do texto
- A cor do texto do botão. Escolha uma que contraste com o fundo.
- Acolchoamento
- O espaço interno do botão.
- Raio da borda
- O quanto os cantos do botão são arredondados.
- Peso da fonte
- Normal, negrito e assim por diante.
- Raio da borda
- O quanto os cantos do pop-up são arredondados.
- Box Shadow
- Uma sombra ao redor do pop-up.
Em dispositivos móveis, o pop-up se ajusta ao tamanho da tela e tem um botão X para fechá-lo.
Adicionar o pop-up ao seu site#
A visualização ao vivo mostra o botão e o pop-up. Clique no botão para conferir se o pop-up abre com sua página de agendamento.
- Copie o código da seção Copie este código em seu site.
- Cole-o no HTML do seu site, no lugar onde o botão deve aparecer.
- Salve e publique o site.
Exemplo de código:
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>Para os passos em cada plataforma, veja os guias de WordPress, Wix e Squarespace.
Várias instâncias#
Você pode criar mais instâncias do pop-up, por exemplo com um design diferente para cada seção do site. Repita os passos acima em Pop-up de reserva. Cada instância tem seu próprio código de integração.
Atualizar um pop-up publicado#
Abra a instância em MenuAppsTodos os widgets, faça as alterações e salve. O pop-up no seu site é atualizado automaticamente, então você não precisa mudar o código do site.