Popup de agendamento

Adicione um popup de agendamento que aparece no centro do seu site quando os visitantes clicam em um botão.
Tags:

Widget Popup de agendamento

O widget Popup de agendamento exibe um popup de agendamento no centro do seu site quando os usuários clicam em um botão, proporcionando uma forma limpa e discreta para os clientes agendarem horários.

Booking Popup Widget

Como funciona

Quando os visitantes clicam no botão designado em seu site, um popup aparece no centro da tela com a interface de agendamento Barberly. Isso mantém os visitantes na página atual enquanto fazem o agendamento.

Casos de uso

  • Use em todo o site para uma experiência de agendamento consistente
  • Adicione a posts de blog para converter leitores em clientes
  • Coloque em páginas de serviços para incentivar agendamentos imediatos
  • Adicione em páginas de depoimentos para aproveitar a prova social

Configurando o Popup de agendamento

Criar uma nova instância

  1. Faça login na sua conta Barberly em portal.barberly.com
  2. Navegue até Menu → Apps → Todos os Widgets
  3. Clique na opção Popup de agendamento
  4. Selecione Criar Nova Instância
  5. Dê um nome para sua nova instância de popup (ex: “Popup Principal de Agendamento”)

Configurar as opções do popup

Na seção de configuração, você pode definir:

  1. Texto do Botão: Personalize o texto exibido no botão que aciona o popup
  2. URL de Agendamento: Insira o link para sua página de agendamento Barberly que será exibida no popup

Personalizar estilos do botão e do popup

Ajuste as opções de estilo para o botão e o popup:

Estilo do botão:

  • Cor de fundo: Escolha uma cor que combine com o esquema do seu site
  • Cor do texto: Selecione uma cor que tenha bom contraste com o fundo
  • Espaçamento interno (padding): Ajuste o espaçamento interno do botão
  • Borda arredondada: Defina o grau de arredondamento dos cantos
  • Peso da fonte: Deixe o texto normal, negrito, etc.

Estilo do popup:

  • Borda arredondada: Defina o grau de arredondamento dos cantos do popup
  • Sombra: Adicione um efeito de sombra para destacar o popup

Visualizar e testar

Use a visualização ao vivo para ver como o botão e o popup ficarão em seu site. Clique no botão para testar se o popup aparece corretamente com sua interface de agendamento.

Obter o código de integração

Quando estiver satisfeito com o popup:

  1. Copie o código gerado na seção “Copie este código para seu site”
  2. Cole o código no HTML do seu site onde deseja exibir o botão do popup
  3. Salve e publique as alterações do seu site

Integrações com plataformas web

Para instruções específicas de integração, consulte estes guias:

Exemplo de código de integração

<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>

Gerenciando múltiplas instâncias de popup

Você pode criar várias instâncias de popup com designs diferentes para diferentes seções do seu site: