Jet Appointment: cómo crear un sistema de reservas en tu web

Crocoblock es sin duda el paquete de plugins más versátil para añadir funcionalidades a Elementor Page Builder. Junto a Essential Addons y Premium Addons, son de lo mejor.

Pero los plugins de Crocoblock no solo sirven para añadir widgets al maquetador visual, sino que es el único con el que podrás disponer de toda una navaja suiza de opciones y posibilidades a nivel funcional que provocaría más de un orgasmo a McGiver.

Uno de los plugins más destacados del paquete de Crocoblock es JetAppointment, el cual te permitirá crear un sistema de reservas muy molón en tu web para que tus clientes contraten tus servicios y paguen directamente en tu web.

Tanto si eres fisioterapeuta, dentista, masajista, psicólogo, abogado (el que tengo aquí colg…, jeje) o cualquier otro profesional que ofrezca servicios bajo cita, ¡este es tu plugin!

Existen otros sistemas de reservas para añadir a WordPress, como Bookly, SimplyBookMeYouCanBookMe, pero hoy voy a centrarme en éste, que es cañón. En otro post te hablaré del resto (a ver si no me olvido de hacerlo…).

¡¡¡Venga, señora, que me lo quitan de las manos!!!

Qué necesitas para montar el sistema de reservas

Para poder crear el sistema de reservas con JetAppointment tendremos que disponer de otros dos plugins adicionales para que todo funcione:

  • WooCommerce: hará de pasarela de pago del sistema para que tus cliente hagan la reserva previo pago. Si tu sistema de reservas no implica pago online, no lo necesitarás.
  • JetEngine: otro plugin de Crocoblock con el que vamos a crear los Custom Post Types para los servicios y profesionales y, además, los formularios de reserva (sí, sí, en plural… más abajo te cuento por qué).

Instalación y configuración inicial de los plugins

Para que todo el proceso vaya sobre ruedas, tendremos que instalar los plugins en el siguiente orden y configurar cada uno con las opciones principales que te describiré:

1. WooCommerce

El primero de los plugins que vamos a instalar. Esto es debido a que cuando añadamos JetAppointment, se añadirá un producto «genérico» en WooCommerce (te lo cuento más abajo) que hará el papel de conexión o «llamada» entre el sistema de reservas y el checkout.

En este post no te voy a explicar cómo configurar WooCommerce, pues no es éste el fin; solo te contaré qué necesitas tocar para que el sistema funcione. Debes tener en cuenta que tú tendrás que añadir los métodos de pago que desees (Paypal, Stripe, Redsys…), los impuestos, etc. como en una tienda online normal y corriente.

2. JetEngine

En segundo lugar vamos a instalar y activar JetEngine.

Una vez instalado, tienes que ir a JetEngine > Modules y activar la opción Forms.

Este paso es crucial, pues cuando configuremos JetAppointment, éste nos pedirá crear de manera automática los formularios de reserva dentro de JetEngine > Forms.

3. JetAppointment

Y por último, instalaremos JetAppointment, que es el plugin que dará sentido a todo este post. Si te salta el asistente de configuración, omítelo, pues lo vamos a configurar todo después.

Listo, ya tenemos los tres plugins instalados y con la configuración básica. Vamos ahora a crear todo el sistema.

Ouh, yeaaaaahhhh!!!

Creación de Custom Post Types para Servicios y Proveedores

Hace tiempo te enseñé a crear Custom Post Types con el plugin ‘Custom Post Type UI’, pero en esta ocasión vamos a utilizar la opción de JetEngine, pues nos permitirá crear además los formularios y, de esta forma, nos ahorramos un plugin y los CPTs se integrarán automáticamente con JetAppointment.

Te voy a poner un tipo de negocio que podría ser real como ejemplo…

Vamos a imaginar que tenemos un negocio de Estética y tenemos 3 servicios, cada uno con su precio y su tiempo de duración:

  • Manicura:
    • Precio: 15€
    • Duración: 45 minutos.
  • Pedicura:
    • Precio: 30€
    • Duración: 1 hora y 30 minutos.
  • Depilación labio y cejas:
    • Precio: 10€
    • Duración: 30 minutos.

Además, tenemos 3 personas contratadas en el negocio (JetAppointment llama ‘Providers’ -proveedores- a las personas que dan el servicio)y necesitaremos añadirlas al sistema para poder mostrar su disponibilidad en los horarios de la jornada laboral:

  • Profesional 1: María Pérez.
  • Profesional 2: Ana García.
  • Profesional 3: Susana López.

Una vez tenemos esta información, iremos a crear los CPTs a JetEngine > Post Types > Add new.

Configuración de los Post Types

General Settings

Aquí añadiremos el nombre del tipo de contenido en ‘Post Type Name’.

En nuestro caso le llamaremos ‘Servicios’. El ‘Post Type Slug’ se cubrirá de manera automática.

Labels

Aquí podremos personalizar los textos que se verán en WordPress asociados al nuevo contenido. Ya sabes, los típicos de «Todos los servicios», «Añadir servicio», «Editar servicio», etc., como los que aparecen en Páginas y Entradas, vaya.

Si no los personalizas, no pasa nada, pero siempre queda más estético y funcional.

Advanced Settings, Meta Fields y Admin Columns

Puedes dejar estas opciones por defecto al 99%. Lo único que yo toco es la opción ‘Advanced Settings > Supports’, en la cual dejo solo la opción ‘Title’, pues el resto de campos no los vamos a necesitar a la hora de editar cada post individual.

Ahora solo tienes que guardar haciendo click en Add Post Type. Haz lo mismo para crear el Custom Post Type para las profesionales. Yo le llamaré ‘Profesionales’.

¡Qué original, Edu!

Así se verán ambos CPTs al finalizar su creación:

Y así se verán ya en el menú principal de WordPress:

Configuración de JetAppointment

Ahora que tenemos los Custom Post Types creados, y antes de añadir ningún ítem, tenemos que lanzar el asistente de configuración de JetAppointment.

Para ello, iremos a Appointments > Set Up y seguimos estos pasos:

Paso 1: Conectar los custom post types

  • Services post type: ‘Servicios’.
  • Add providers: ON.
  • Provider post type: ‘Profesionales’.

Paso 2: Configurar la tabla de la base de datos

Los formularios de reserva que se nos van a crear en el Paso 4 incluyen una serie de campos por defecto, como el nombre o el email.

Si deseas añadir más campos a los formularios, como apellidos, teléfono o un campo de comentarios, tendrás que añadir aquí estos campos para asociar los campos del formulario a la base de datos de la web, en la cual se añadirá la información que añadan los clientes.

¿Me he explicado con suficiente propiedad??? 

Paso 3: Configurar horario laboral y festivos

En este paso podrás configurar la longitud por defecto de cada slot horario (30 minutos, 1 hora…), los días laborables con sus horarios, añadir días festivos para que no estén disponibles en el sistema de reservas y los días laborables.

Al apartado ‘Working days’ no le hagas ni caso en principio, pues no tiene mucho sentido añadir nada ahí en la configuración general. Si tienes algún servicio estacional, sí puede tener sentido configurar el tiempo que estará disponible en su configuración individual.

Los festivos los podrás añadir en ‘Days off’.

Paso 4: Integración con WooCommerce y creación automática de formularios

En el último paso, el asistente te preguntará si quieres integrar el sistema de reservas con WooCommerce.

Si tienes pensado cobrar la reserva del servicio en la propia web, marca la opción de ‘WooCommerce Integration’. Si quieres que la gente pueda reservar sin tener que pagar, déjalo desactivado.

¡¡¡Que paguen, que paguen!!!

Además, podrás crear ya desde aquí los dos formularios «base» que necesitas:

  • Create a Single Service Booking Form: este formulario lo añadiremos en los servicios individuales que tengas en tu web. El sistema detectará automáticamente la página del servicio (Page ID) y ya no tendrá que seleccionar ningún servicio en el propio formulario.
  • Create Sample Page Booking Form: este es el formulario genérico válido para añadir en cualquier lugar de la web y dispondrá de un desplegable para seleccionar entre todos los servicios disponibles.

Una vez hagas click en FINISH (Finalizar) te aparecerá esta pantalla de resumen con los enlaces a los elementos más importantes del sistema:

  • Post Types: haciendo click en ‘Manage Services’ o ‘Manage Providers’ te llevará a ambos apartados de WordPress para crearlos.
  • WooCommerce Integration: además del mensaje de confirmación de la integración, verás un link llamado ‘Related product’. Este «producto» es el que te contaba más arriba. Lo ha añadido automáticamente el JetAppointment, el cual funcionará como «puente» hacia la finalización de la compra.

    Este producto genérico se llama por defecto ‘Appointment’ (puedes cambiar este nombre y su slug) y tiene un precio representativo de 1 euro. NO CAMBIES ESTE PRECIO BAJO NINGÚN CONCEPTO, pues los precios reales de los servicios los añadiremos en cada servicio y el sistema detectará su precio individual en el checkout de WooCommerce.
  • Created Forms: aquí te aparecen los links para ir a cada uno de los dos formularios que acabamos de crear automáticamente.

Si en algún momento deseas cambiar algo en la configuración que acabamos de hacer, podrás hacerlo desde Appointments > Settings.

¡Qué!, ¿te has perdido ya o continuamos ‘palante’?

Añadido de ítems en Servicios y Proveedores

Ahora que tenemos todo el sistema preparado, nos quedan dos aspectos importantes que configurar para cerrar el círculo: añadir todos los Servicios y las Profesionales y, por otro lado, personalizar los formularios.

Para añadir los servicios y profesionales, iremos a cada una de las secciones (Servicios y Profesionales) y los configuramos:

Servicios

  • Custom Schedule: añade aquí la duración del servicio y cualquier detalle más que desees relacionado con las horas y días laborables.
  • Related ‘Profesionales’: si tenemos ya los profesionales creados, podremos asociarlos aquí a cada producto. Si no ponemos ninguno, se da por hecho que todos pueden dar el servicio.

Profesionales

  • Related Servicios: ahora que tenemos los servicios creados, podremos asignarlos aquí a cada empleada si lo deseamos.
  • Custom Schedule: podemos configurar esta opción si el profesional tiene un horario laboral diferente al general. Esto está bien si hay empleados contratados a tiempo parcial, por ejemplo.

Configuración de los formularios

Para personalizar los formularios de reserva iremos a JetEngine > Forms.

Ambos formularios están ya preconfigurados y no tendremos que tocar prácticamente nada, así que el 90% del trabajo está hecho… pero siempre podemos hacer algún ajuste:

Fields Settings

Si entras en cada uno de los campos a través del botón de edición con forma de lápiz, podrás personalizar algunos aspectos, como puede ser el idioma o que el campo sea o no obligatorio. NO TOQUES NADA que no sepas cómo funciona, pues muchos datos son dinámicos que tiran de la base de datos, así que mucho cuidadín.

¡No te vayas de listín, a ver si te vas a llevar un sustín!

Si durante la configuración del asistente has añadido nuevos campos (teléfono, comentarios…), podrás añadirlos aquí y asociar cada campo a su ID en la base de datos.

Post-submit Actions / Notifications Settings

Por defecto el sistema ha creado una acción para añadir la reserva en el sistema.

Si lo deseas, podrás añadir otro tipo de notificaciones, como enviar un email, añadir el usuario a diversas herramientas de email marketing, etc. 

Messages Settings

En este apartado podrás personalizar los mensajes predeterminados del sistema de reservas, que por defecto vienen en el idioma… síiiiii, en Ingléssss, ¡¡¡cómo nooo!!!

No tiene más historia.

Creación de las páginas individuales para los servicios

Ahora ya tenemos todo el sistema configurado y lo único que nos falta es añadir los formularios en las páginas donde queramos que aparezcan. Para ello, utilizaremos el widget ‘Form’ de Crocoblock (no el genérico de Elementor). 

  • El formulario estándar (‘Static Page Booking Form’) lo insertaremos en las páginas o lugares generales de nuestra web que deseemos (Inicio, Sidebar del blog, Footer…), así que no tiene demasiada ciencia.
  • El formulario para páginas individuales (‘Single Service Booking Form’) los añadiremos en la página de cada servicio. Para hacerlo, los pasos a dar son los siguientes:
    • Paso 1: creación de un ‘Single Post’ (Página individual) en Elementor, que hará de plantilla para cada uno de los servicios.
       

       
    • Paso 2: añadir el formulario ‘Single Service Booking Form’ a través del widget ‘Form’ de Crocoblock.
       
       
    • Paso 3: personalizar el formulario a nuestro gusto. 

¡Y hemos finalizado! ¡Abuf!

Si has configurado todo correctamente, ya se podrán reservar tus servicios con pago online en tu página web.

Ha dado algo de trabajo, ¿verdad?… pero una vez le cojas el punto, lo harás muy rápido (es una mentira, pero qué te voy a decir llegados a este punto…).

Además, siempre tendrás a mano este post para seguir el proceso.

Panel de control

En la actualización a la versión 1.4.0 del plugin han añadido una funcionalidad muy necesaria e interesante: un dashboard o panel de control interno para poder añadir, editar y gestionar, en definitiva, todas las reservas.

añadir reserva Jet Appointments

Conclusión y opinión personal

Como te comenté al inicio, hay diversos sistemas de reservas por el mundo adelante para añadir a tu WordPress, como Bookly, SimplyBookMeYouCanBookMe, y todos tienen su chicha, eh, no creerás que éste es el más complicado del mundo…

Lo bueno de esta opción es que más allá de la configuración interna, podremos personalizar muchísimo los formularios, gracias a que están integrados en Elementor.

Desde que he descubierto este método lo utilizaré en todas las webs de mis clientes y me parece un gran acierto. Estos locos de Crocoblock han hecho un buen trabajo.

 

¡¡¡Y hasta aquí el mojón de hoy, amigos!!!

No olviden compartir, hacer click en los enlaces, comprar los plugins y hacerme happy like a partridge… Ahora vas a Google Translator a mirar qué coño significa, ya veras…

¡¡¡¡Vengaaaaa, hasta luego, cocodriloooooooo!!!!

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)

17 comentarios en “Jet Appointment: cómo crear un sistema de reservas en tu web”

  1. Muchas gracias por este artículo, justo lo que necesitaba.
    Muy bien explicado como siempre, entre Arturo García y tú me tenéis felizmente enganchado.
    Yo estoy haciendo el web para mi mujer y necesitaba información al respecto, pensaba hacerlo con Calendly, pero no me parece tan profesional como este, además supongo que tendrá algún tipo de limitación para integrar con el pago o similares que el JetAppointment lo resuelve.
    Sabes si cuando es unipersonal es necesario rellenar el apartado de profesionales, lo digo para evitar el campo donde seleccionas y aparece solo 1 opción.
    Muchas gracias.
    Un saludo

    1. Hola Patricia,

      Pues no sabría decirte, la verdad… Si has seguido los pasos del post, tendría que haberte funcionado. A lo mejor puedes probar a eliminar los plugins y volver a comenzar el proceso.

      Ya me contarás…

  2. Saludos buenas noches Eduardo Rubianes, gracias por este contenido me ha sido de utilidad, yo he tratado de elaborar el formulario pero tengo dudas aún, me he leido los documentos de crocoblock acerca del tema pero hay algo que no termino de asociar, cuando por ejemplo en un Custom Post Type yo creo variables en el Meta Field, estas variables desde el backend yo las cargos con datos, estos datos quiero mostrarlos en el formulario bien sea en un campo select o campo radio, llamándolos desde el Fild Option From de ese campo Select escogiendo como opción Meta Field y colocando el meta field creado para esas variables al generar el resultado no me muestra esos datos, mas si yo coloco el meta field correspondiente al Custom Post Type si me lo trae al formulario. A que se debe esto?

  3. Como seria el procedimiento para que el usuario que hizo la reserva también la pueda cancelar?, ¿es posible generar reportes desde el front end? digamos las reservas de un dia en particular?

    1. Hola Javier,

      Lamentablemente Jet Appointment todavía tiene una carencia importante y es que no tiene un panel de control de las reservas para poder editarlas manualmente. Es algo que he solicitado a la gente de Crocoblock; a ver si en un futuro no muy lejano lo implementan.

      Gracias por comentar.

  4. victor mejia

    buen dia, muchas gracias por el articulo, en la parte de enviar un email tanto a la persona que lleno el formulario como al administrador, relleno los campos que solicita el formulario para dicha evento pero no llegan ni a uno ni a otro que se puede hacer o tiene algo para ver como se configura ello, por si estoy fallando en algo

  5. Que buen post Edu! Solo me queda una duda porque parece que no ofrece la opción.

    Puedes limitar en un slot de tiempo, el nº de plazas disponibles pero…un mismo usuario, podría reservar por ejemplo 4 plazas? Se me ocurre algo tipo evento/asistencia donde digas, venga te dejo sacar por email un máximo de 4 entradas gratis. ¿Se podría hacer con este sistema?

    1. Hola Carlos,

      Jet Appointment no está pensado para vender entradas a eventos, por lo que JA no es el plugin ideal para vender entradas, sino para reservas de citas por ejemplo para dentistas, masajistas, etc. Tendrías que buscar un plugin de venta de tickets como Tickera.

      Un saludo.

  6. Excelente Edu, Grandísimo aporte, Por lo general aprecio mas la lectura que los mismos tutoriales, Tengo una pregunta, Podría aplicar un Search Form en el inicio, Es decir un mini calendario en la HomePage donde el cliente pueda verificar el día si tiene disponibilidad y las personas que aplicarán en caso de reservar una bici doble.

  7. Hola! Muy buena entrada!
    Se me presenta el sigueinte problema con jet appointment. Tengo un CPT cursos y otro CPT tutores relacionados.
    He hecho una plantilla dinámica con elementor para cada curso.
    Los cursos son cursos presenciales que se realizan un fin de semana en concreto por lo que me gustaría que en el formulario sólo apareciera el botón Reservar. He intentado de muchas maneras que coja la fecha dinámicamente y se envíe el formulario pero no hay manera. Sabríais cómo ejecutar esta función? Gracias

    1. Hola Teresa,

      Sin ver tu caso concreto desde dentro, no sabría decirte, pero si solo necesitas que la fecha sea un elemento informativo, prueba a meterla en modo texto.

      Ya me contarás.

      Un saludo.

  8. Hola Eduardo, Cómo estas?

    Por favor me puedes ayudar?. Tengo mi calendario para agendar (agenda aquí), todo bien. Pero No me bloquea las reservas hechas. A pesar de habilitar el «permitir» confirmación automática.

    Desde ya Gracias!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.