CTA: Elementos HTML de Acción, Botones para Reservar de SpacesRSV

CTA: Elementos HTML de Acción, Botones para Reservar de SpacesRSV

Los Elementos HTML, por su naturaleza se usan dentro de la misma página (o sitio) donde está instalado spacesrsv.js. Siempre que se quieran agregar Botones de Reservar, se recomienda agregarlos con HTML y no con ligas o URL, ya que aseguran la máxima experiencia usuario.

Requisitos previos

Debe instalar spacesrsv.js como indicado en esta guía: Guía de Instalación spacesrsv.js - Reserva de Espacios en Autoservicio - SpacesRSV

Crear Elementos HTML como Botones para Reservar

Configurar los Botones de “Reservar” o Elementos de Acción, simplemente coloque la clase spc-app-launcher en el elemento HTML que mostrará el motor de reservaciones de SPACES.

Ejemplo: 
  1. <button class="clase-ya-existente-1 clase-ya-existente-2 spc-app-launcher">Reservar Ahora</button>
  2. <!-- o bien -->
  3. <div class="spc-app-launcher">Reservar Ahora</div>
  4. <!-- o bien -->
  5. <a href="#" class="spc-app-launcher">Reservar Ahora</a>
Idea
Pueden agregar la clase a cualquier elemento html
Alert
No es necesario agregar una liga directa con un "anchor" <a> ya que la clase spc-app-launcher automaticamente lazará la aplicacion de reservas con todos los parámetros necesarios sin necesidad que se agregue una liga directa. 
Si usará un elemento "anchor" coloque # como valor del atributo href. Ejemplo: href="#"
Warning
Agregar ligas manualmente interfiere con el proceso y afecta el correcto funcionamiento

Parámetros adicionales para Botones o Elementos HTML

Info
Para que estos parámetros funcionen, es requisito que esté instalado spacesrsv.min.js y que el elemento HTML tenga la clase indicada en los puntos anteriores.
Atributo HTMLDetalleEjemplo
data-spaces-dt-begin
Fecha en formato AAAMMDD. 
Idea
Opcional. En caso de no colocar dato, tomará la fecha actual del navegador.
Notes
Según su logica de negocios, debe ser menor o igual a data-spaces-dt-end. De lo contrario la app redireccionará a la fecha y hora actual sea para la llegada que para la salida
Ejemplo data-spaces-dt-begin="20270101"
data-spaces-tm-begin
Warning
Solo para operaciones que usen hora de llegada para filtrar los resultados de búsqueda. Consulte con el staff de Soporte Novohit si aplica para su caso. 
Hora en formato HH:MM (24 horas).
Idea
Opcional. En caso de no colocar dato, tomará la hora actual del navegador.
Notes
Debe ser menor que data-spaces-tm-end. De lo contrario la app redireccionará a la fecha y hora actual sea para la llegada que para la salida
Ejemplo: data-spaces-tm-begin="15:10" para las 3:10 pm
Ejemplo: data-spaces-tm-begin="00:30" para las 12:30 am
data-spaces-dt-end
Warning
Solo para operaciones que usen fecha de check-out o de salida. Consulte con el staff de Soporte Novohit si aplica para su caso.
Fecha en formato AAAMMDD.
Idea
Opcional. En caso de no colocar dato, tomará la fecha actual del navegador.
Notes
Según su lógica de negocios, debe ser mayor o igual a data-spaces-dt-begin. De lo contrario la app redireccionará a la fecha y hora actual sea para la llegada que para la salida.
Ejemplo data-spaces-dt-end="20270102"
data-spaces-tm-end
Warning
Solo para operaciones que usen hora de salida para filtrar los resultados de búsqueda. Consulte con el staff de Soporte Novohit si aplica para su caso.
Hora en formato HH:MM (24 horas).
Idea
Opcional. En caso de no colocar dato, tomará la hora actual del navegador.
Notes
Debe ser mayor que data-spaces-tm-end. De lo contrario la app redireccionará a la fecha y hora actual sea para la llegada que para la salida
Ejemplo: data-spaces-tm-end="16:10" para las 4:10 pm
Ejemplo: data-spaces-tm-end="05:30" para las 5:30 am
data-spaces-qty-people
Warning
Solo para operaciones que usen número de personas para filtrar los resultados de búsqueda. Consulte con el staff de Soporte Novohit si aplica para su caso.
Numero de personas en dato numérico
Idea
Opcional. Si lo coloca, debe ser mayor a 1. En caso de no colocar dato, no aplicará este filtro y se mostrarán todos los resultados

Ejemplo: data-spaces-qty-people="50" para filtrar por espacios de al menos 50 personas
data-spaces-id-operation
En las empresas que tienen múltiples operaciones (multiples venues) se pueden implementar, en una misma página Web, diferentes botones que redoreccionan al usuario para reservar en las diferentes operaciones. Ejemplos de múltiples operaciones o múltiples unidades de negocio son:
  1. diferentes atracciones,
  2. diferentes venues de eventos,
  3. diferentes restaurantes,
  4. diferentes parques,
  5. diferentes estadios o clubes deportivos
Para que en una misma página puedan poner múltiples botones y que cada uno apunte a una operación diferente, deben usar el atributo html data-spaces-id-operation.
Ejemplo: data-spaces-id-operation="ID_OPERACION_PROPORCIONADO_POR_NOVOHIT" para reservar otra operación de la misma empresa.


Ejemplos de implementación:

  1. <button class="spc-app-launcher" data-spaces-dt-begin="20270101">Reservar Ahora</button>
  2. <!-- o bien -->
  3. <div class="spc-app-launcher" data-spaces-dt-begin="20270101" data-spaces-qty-people="50">Reservar Ahora</div>
  4. <!-- o bien -->
  5. <a href="#" class="spc-app-launcher" data-spaces-qty-people="50">Reservar Ahora</a>
Idea
Pueden agregar cualquier atributo a cualquier elemento html

    • Related Articles

    • CTA: Ligas, Links, URL para Reservar en SpacesRSV - Generador de Links

      Las ligas, links o URL son recomendables para realizar llamadas entrantes. Se recomienda usar ligas en estos casos: En un call center o chat center para compartir las ligas a sus clientes Para campañas de marketing impreso (codigos QR, ligas cortas, ...

    • Guía de Instalación spacesrsv.js - Reserva de Espacios en Autoservicio - SpacesRSV

      SpacesRSV se puede instalar rápidamente en cualquier página sin necesidad de saber programación. Puede instalarlo en cuaquier CMS (Drupal, Joomla, Wordpress, Wix, SquareSpace, Elementor), o en cualquier infraestructura de código PHP, HTML, Ruby. Este ...

    • Espacios Fuera de Servicio

      Espacios Fuera de Servicio Para dejar un espacio fuera de servicio debe realizar lo siguiente: Abrir el Módulo de Spaces y en caso de tener varias operaciones seleccionar, en la que se encuentre el espacio que quiere dejar fuera de servicio. Hacer ...

    • Reserva de Espacios

      Este documento explica cómo realizar reservas en el módulo Spaces Management. Debe dirigirse a: Spaces → Reserva de espacios La ruta también se puede encontrar como: Areas-Eventos→ Reservas de Espacios y/o Equipos Se abrirá una nueva ventana que le ...

    • Reserva de Mesas en POS con Spaces

      Reserva de Mesas en POS con Spaces Introducción Esta funcionalidad le permite reservar mesas del POS para la unidad de negocios de Alimentos y Bebidas. Requisitos Es necesario haber realizado la configuración del módulo antes de ser usado. Ver la ...