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

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

  • Última modificación de la entrada:16 diciembre, 2020
  • Autor de la entrada:
  • Categoría de la entrada:Diseño Web
  • Comentarios de la entrada:1 comentario
  • Tiempo de lectura:12 minutos de lectura

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.

pasos para diseñar una página web

Las 9 fases cruciales para diseñar una página web atractiva y efectiva

Aprende todos los pasos para diseñar una web profesional con la que conseguir resultados reales.

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.

Hosting WordPress de calidad en España y Latam.

Logo Webempresa

Código descuento 20%
'GRACIAS20'

Hosting WordPress de calidad en España y Latam.

Logo Webempresa

Código descuento 20%
'GRACIAS20'

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.

¿Una herramienta de Marketing Multicanal por el precio de una pizza???

Logo E-Goi

Código descuento 25%
'REFRESCANDONEGOCIOS25'

Logo E-Goi

¿Una herramienta de Marketing Multicanal por el precio de una pizza???

Código descuento 25%
'REFRESCANDONEGOCIOS25'

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.

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 valorar esta entrada!
(Votos: 6 Promedio: 5)

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress. Mi misión es ayudar a emprendedores y pequeños negocios a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene un comentario

  1. Alejandro

    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

Deja una respuesta

Información básica sobre protección de datos Ver más

  • Responsable Eduardo Rubianes.
  • Finalidad  Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios  FastComet INC.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.