Barra lateral de reservas

O widget Barra lateral de reservas adiciona um botão ao seu site. Ao clicar nele, desliza a partir da margem do ecrã uma barra lateral com a sua página de reservas Barberly. Os visitantes fecham a barra lateral para voltar à página. Ocupa pouco espaço, pelo que é adequada para todas as páginas do site, incluindo páginas longas em que um botão fixo deixa de se ver ao percorrer a página.

Criar uma nova instância#

Inicie sessão na sua conta Barberly em portal.barberly.com.
Aceda a MenuAppsTodos os widgets.
Clique em Barra lateral de reservas.
Selecione Criar nova instância.
Dê um nome à instância, por exemplo "Barra lateral principal".

Definições#

Texto do botão: O texto do botão que abre a barra lateral.
URL de reserva: O URL da sua página de reservas Barberly apresentada na barra lateral.
Posição da barra lateral: O lado do ecrã a partir do qual a barra lateral abre, direito ou esquerdo.

Estilos#

Estilo do botão

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.

Estilo da barra lateral

Raio de fronteira: O grau de arredondamento dos cantos da barra lateral.
Caixa de sombra: Uma sombra à volta da barra lateral.
largura: A parte do ecrã ocupada pela barra lateral, definida separadamente para computador e telemóvel.

Em ecrãs mais pequenos, a barra lateral ocupa uma parte maior da largura do ecrã e o botão de fechar continua bem visível.

Adicionar a barra lateral ao seu site#

A pré-visualização em tempo real mostra o botão e a barra lateral. Clique no botão para confirmar que a barra lateral desliza 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:

html

<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, consulte os guias para WordPress, Wix e Squarespace.

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

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

css

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

Várias instâncias#

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

Atualizar uma barra lateral publicada#

Abra a instância em MenuAppsTodos os widgets, faça as alterações e guarde. A barra lateral no seu site é atualizada automaticamente, pelo que não é necessário alterar o código no site.