Barra lateral de reservas

O widget Barra lateral de reservas adiciona um botão ao seu site. Ao clicar nele, uma barra lateral desliza da borda da tela com sua página de agendamento do Barberly. Para voltar à página, o visitante fecha a barra lateral. Ela ocupa pouco espaço, por isso funciona bem em todas as páginas do site, inclusive em páginas longas, nas quais um botão fixo sai de vista ao rolar.

Criar uma nova instância#

1. Entre na sua conta Barberly em portal.barberly.com.
2. Acesse Menu→Apps→Todos os widgets.
3. Clique em Barra lateral de reservas.
4. Selecione Criar nova instância.
5. Dê um nome à instância, por exemplo "Barra lateral de agendamento principal".

Configurações#

Estilos#

Em telas menores, a barra lateral ocupa uma parte maior da largura da tela, e o botão de fechar continua bem visível.

Adicionar a barra lateral ao seu site#

A visualização ao vivo mostra o botão e a barra lateral. Clique no botão para conferir se a barra lateral desliza com sua página de agendamento.

1. Copie o código da seção Copie este código em seu site.
2. Cole-o no HTML do seu site, no lugar onde o botão deve aparecer.
3. Salve e publique o site.

Exemplo de código:

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

Para os passos em cada plataforma, veja os guias de WordPress, Wix e Squarespace.

Manter o botão em posição fixa#

Para manter o botão visível enquanto o visitante rola a página, adicione isto ao CSS personalizado do seu site:

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

Várias instâncias#

Você pode criar mais instâncias da barra lateral, por exemplo com um design diferente para cada seção do site. Repita os passos acima em Barra lateral de reservas. Cada instância tem seu próprio código de integração.

Atualizar uma barra lateral publicada#

Abra a instância em Menu→Apps→Todos os widgets, faça as alterações e salve. A barra lateral no seu site é atualizada automaticamente, então você não precisa mudar o código do site.