Barra lateral de reservas

El widget Barra lateral de reservas añade un botón a tu sitio web. Al hacer clic, se desliza desde el borde de la pantalla una barra lateral con tu página de reservas de Barberly. Los visitantes la cierran para volver a la página. Ocupa poco espacio, así que funciona bien en todas las páginas del sitio, incluidas las páginas largas en las que un botón fijo desaparece al desplazarse.

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 Barra lateral de reservas.
Selecciona Crear nueva instancia.
Ponle un nombre a la instancia, por ejemplo "Barra lateral principal".

Ajustes#

Texto del botón: El texto del botón que abre la barra lateral.
URL de reserva: La URL de tu página de reservas de Barberly que se muestra en la barra lateral.
Posición de la barra lateral: El lado de la pantalla desde el que se abre la barra lateral, derecho o izquierdo.

Estilos#

Estilo del botón

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.

Estilo de la barra lateral

Radio del borde: Lo redondeadas que están las esquinas de la barra lateral.
Caja Sombra: Una sombra alrededor de la barra lateral.
ancho: Qué parte de la pantalla ocupa la barra lateral, con un valor para escritorio y otro para móvil.

En pantallas más pequeñas, la barra lateral ocupa una parte mayor del ancho de la pantalla, y el botón de cerrar sigue bien visible.

Añadir la barra lateral a tu sitio web#

La vista previa en directo muestra el botón y la barra lateral. Haz clic en el botón para comprobar que la barra lateral se desliza 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:

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 los pasos en cada plataforma, consulta las guías de WordPress, Wix y Squarespace.

Mantener el botón en una posición fija#

Para que el botón siga visible mientras los visitantes se desplazan, añade esto al CSS personalizado de tu sitio web:

css

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

Varias instancias#

Puedes crear más instancias de la barra lateral, por ejemplo con un diseño distinto para cada sección de tu sitio web. Repite los pasos anteriores en Barra lateral de reservas. Cada instancia tiene su propio código de integración.

Actualizar una barra lateral publicada#

Abre la instancia en MenúAplicacionesTodos los widgets, haz los cambios y guarda. La barra lateral de tu sitio web se actualiza automáticamente, así que no tienes que cambiar el código de tu sitio.