O widget Página de reserva incorporada coloca sua página de agendamento completa do Barberly dentro de uma página do seu site, em um iframe. Os clientes fazem todo o agendamento sem serem levados para outro site. Você pode usá-lo em uma página dedicada a agendamentos ou adicioná-lo à página inicial, às páginas de serviços ou à página de contato.
Criar uma nova instância#
- Entre na sua conta Barberly em portal.barberly.com.
- Acesse MenuAppsTodos os widgets.
- Clique em Página de reserva incorporada.
- Selecione Criar nova instância.
- Dê um nome à instância, por exemplo "Página de agendamento principal".
Configurações#
- URL de reserva
- A URL da sua página de agendamento do Barberly.
- Altura
- A altura da página incorporada, por exemplo "100%" para a altura total ou um valor em pixels, como "600px".
Estilos#
- Raio da borda
- O quanto os cantos são arredondados.
- Box Shadow
- Uma sombra ao redor do widget.
A página incorporada se ajusta ao tamanho da tela. No desktop, ela mostra a interface de agendamento completa e, no celular, a interface se adapta à tela menor.
Adicionar a página ao seu site#
A visualização ao vivo mostra como a página incorporada vai ficar. Percorra o fluxo de agendamento para conferir se tudo funciona.
- Copie o código da seção Copie este código em seu site.
- Cole-o no HTML do seu site, no lugar onde a página de agendamento deve aparecer.
- Salve e publique o site.
Exemplo de código:
<div id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="embed_262b1c5d48b64c16a9786cd8ebbbecd3" data-container-id="262b1c5d48b64c16a9786cd8ebbbecd3-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 da página incorporada para diferentes seções do seu site. Repita os passos acima em Página de reserva incorporada. Cada instância tem seu próprio código de integração.
Atualizar uma página incorporada publicada#
Abra a instância em MenuAppsTodos os widgets, faça as alterações e salve. A página incorporada no seu site é atualizada automaticamente, então você não precisa mudar o código do site.
Se a página não aparecer corretamente#
- Confira se o contêiner é largo e alto o suficiente para a interface de agendamento.
- Verifique se há conflitos de CSS com os estilos do seu site.
- Confira se a URL de agendamento está correta.
- Verifique se nenhuma política de segurança de conteúdo (CSP) do seu site bloqueia o iframe.