El widget Ventana emergente de reserva añade un botón a tu sitio web. Al hacer clic, se abre tu página de reservas de Barberly en una ventana emergente en el centro de la pantalla, de modo que el visitante sigue en la página actual mientras reserva. Puedes usarlo en todo el sitio o en páginas concretas, como las de servicios o las entradas del blog.
Crear una nueva instancia#
- Inicia sesión en tu cuenta de Barberly en portal.barberly.com.
- Ve a MenúAplicacionesTodos los widgets.
- Haz clic en Ventana emergente de reserva.
- Selecciona Crear nueva instancia.
- Ponle un nombre a la instancia, por ejemplo "Ventana de reserva principal".
Ajustes#
- Texto del botón
- El texto del botón que abre la ventana emergente.
- URL de reserva
- La URL de tu página de reservas de Barberly que se muestra en la ventana emergente.
Estilos#
- Color de fondo
- El color del botón.
- Color del texto
- El color del texto del botón. Elige uno que contraste con el fondo.
- Acolchado
- El espacio dentro del botón.
- Radio del borde
- Lo redondeadas que están las esquinas del botón.
- Peso de la fuente
- Normal, negrita, etc.
- Radio del borde
- Lo redondeadas que están las esquinas de la ventana emergente.
- Caja Sombra
- Una sombra alrededor de la ventana emergente.
En los dispositivos móviles, la ventana emergente se adapta al tamaño de la pantalla y tiene un botón X para cerrarla.
Añadir la ventana emergente a tu sitio web#
La vista previa en directo muestra el botón y la ventana emergente. Haz clic en el botón para comprobar que la ventana se abre con tu página de reservas.
- Copia el código de la sección Copie este código en su sitio web.
- Pégalo en el HTML de tu sitio web, donde quieras que aparezca el botón.
- Guarda y publica tu sitio web.
Código de ejemplo:
<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 los pasos en cada plataforma, consulta las guías de WordPress, Wix y Squarespace.
Varias instancias#
Puedes crear más instancias de la ventana emergente, por ejemplo con un diseño distinto para cada sección de tu sitio web. Repite los pasos anteriores en Ventana emergente de reserva. Cada instancia tiene su propio código de integración.
Actualizar una ventana emergente publicada#
Abre la instancia en MenúAplicacionesTodos los widgets, haz los cambios y guarda. La ventana emergente de tu sitio web se actualiza automáticamente, así que no tienes que cambiar el código de tu sitio.