O widget Popup de reserva adiciona um botão ao seu site. Ao clicar nele, a sua página de reservas Barberly abre-se num popup no centro do ecrã, pelo que o visitante permanece na página atual enquanto faz a reserva. Pode ser usado em todo o site ou em páginas específicas, como páginas de serviços ou artigos do blogue.
Criar uma nova instância#
- Inicie sessão na sua conta Barberly em portal.barberly.com.
- Aceda a MenuAppsTodos os widgets.
- Clique em Popup de reserva.
- Selecione Criar nova instância.
- Dê um nome à instância, por exemplo "Popup de reserva principal".
Definições#
- Texto do botão
- O texto do botão que abre o popup.
- URL de reserva
- O URL da sua página de reservas Barberly apresentada no popup.
Estilos#
- Cor de fundo
- A cor do botão.
- Cor do texto
- A cor do texto do botão. Escolha uma cor que contraste com o fundo.
- Acolchoamento
- O espaço dentro do botão.
- Raio de fronteira
- O grau de arredondamento dos cantos do botão.
- Peso do tipo de letra
- Normal, negrito, etc.
- Raio de fronteira
- O grau de arredondamento dos cantos do popup.
- Caixa de sombra
- Uma sombra à volta do popup.
Nos dispositivos móveis, o popup adapta-se ao tamanho do ecrã e tem um botão X para o fechar.
Adicionar o popup ao seu site#
A pré-visualização em tempo real mostra o botão e o popup. Clique no botão para confirmar que o popup abre com a sua página de reservas.
- Copie o código da secção Copie este código para o seu sítio Web.
- Cole-o no HTML do seu site, no ponto onde o botão deve aparecer.
- Guarde e publique o seu site.
Código de exemplo:
<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, consulte os guias para WordPress, Wix e Squarespace.
Várias instâncias#
É possível criar mais instâncias do popup, por exemplo com um design diferente para cada secção do site. Repita os passos acima em Popup de reserva. Cada instância tem o seu próprio código de integração.
Atualizar um popup publicado#
Abra a instância em MenuAppsTodos os widgets, faça as alterações e guarde. O popup no seu site é atualizado automaticamente, pelo que não é necessário alterar o código no site.