Añadir la reserva y el chat a tu propio sitio web

¿Ya tienes un sitio web en WordPress, Squarespace, Wix o cualquier otra plataforma? Añade un script corto y tu proceso de reserva se abre directamente encima de tus propias páginas. Los clientes reservan sin salir de tu sitio. Un segundo script añade tu botón del chat en vivo (Live Chat).

Añadir el widget de reserva

1. 1

   Paso 1 de 3

   Añade el script

   Pega esto antes de la etiqueta de cierre body de tu sitio web, con tu propia dirección principal:

   <script src="https://hairhaven.onsoftalon.com/embeds/booking.js"></script>
   

   Usa tu dominio principal en la dirección del script. Tus otras direcciones redirigen a la principal y el widget solo escucha la dirección desde la que se cargó, así que si no coinciden no se cierra ni informa de las reservas correctamente.

2. 2

   Paso 2 de 3

   Añade un botón

   Asigna a cualquier botón o enlace la clase softalon-booking-trigger:

   <button class="softalon-booking-trigger">Book Now</button>
   

   También puedes usar el atributo data-softalon-booking-trigger o el id softalon-booking-trigger.

3. 3

   Paso 3 de 3

   Pruébalo

   Publica tu página y haz clic en el botón.

   Verás:

   Tu proceso de reserva se desliza desde el lado derecho de la página. En los teléfonos, ocupa toda la pantalla.

Preseleccionar una ubicación, un servicio o un miembro del equipo

Añade estos atributos a un botón para saltar pasos del proceso de reserva:

<button class="softalon-booking-trigger" data-service-id="SERVICE_ID">
    Book a haircut
</button>

Para encontrar un ID, abre la opción de compartir de ese servicio, ubicación o miembro del equipo en Softalon y copia el enlace completo de reserva. Los ID están en el enlace después de serviceId=, locationId= y memberId=. Consulta Compartir tu enlace de reserva.

Elegir cómo se abre

Configúralo por botón con data-variant, o para toda la página con data-variant en la etiqueta script:

<script src="https://hairhaven.onsoftalon.com/embeds/booking.js" data-variant="dialog"></script>

Los clientes pueden cerrar el widget con la tecla Escape. Con sheet, también se cierra al hacer clic en el fondo oscuro.

Controlarlo con JavaScript

Si escribes tu propio código, el script añade window.$softalon.booking:

window.$softalon.booking.init({
    variant: "sheet",
    params: { locationId: "LOCATION_ID", serviceId: "SERVICE_ID" },
});

window.$softalon.booking.onCompleted(function (data) {
    // The client finished booking
});

window.$softalon.booking.open();

Añadir Live Chat

Si tu plan incluye el asistente de IA y Live Chat está activado, añade el script del chat para mostrar un botón de chat en la esquina de tu sitio web:

<script src="https://hairhaven.onsoftalon.com/embeds/chat.js"></script>

• Para poner el botón a la izquierda, añade data-position="left" a la etiqueta script.
• Para abrir el chat desde tu propio botón, asígnale la clase softalon-chat-trigger o el atributo data-softalon-chat-trigger.

Si Live Chat está desactivado o tu plan no lo incluye, el script del chat no muestra nada. Consulta Activar Live Chat en tu sitio web de reservas.

El script del chat también añade window.$softalon.chat, con open(), close(), isOpen(), hide(), show(), onSessionStarted(callback) y onMessageReceived(callback).