1. Code
  2. WordPress
  3. Plugin Development

Cómo añadir un calendario de reserva de citas con un plugin de WordPress

Scroll to top

Spanish (Español) translation by Giancarlo Acosta Wong (you can also view the original English article)

Internet ha revolucionado muchos servicios que antes eran tediosos o requerían mucho tiempo. Reservar una cita es un gran ejemplo. Reservar en línea ahorra tiempo no solo al usuario, sino también al proveedor de servicios.

Un plugin de reserva de citas facilita la gestión de los visitantes, las citas y los horarios de una manera bien organizada. Negocios como salones de belleza, spas, oficinas de abogados, hospitales y clínicas pueden beneficiarse de un sistema de este tipo. En este tutorial te mostraré una forma fácil de añadir uno.

Si su negocio requiere que la gente haga citas o reservas, un plugin de reservas puede ser de gran ayuda. En este tutorial, voy a resumir los pasos que necesitas para poner en marcha un plugin de calendario de reservas en tu sitio. Utilizaremos el plugin Booked para crear un calendario de reservas de citas.

Características de Booked

Sincronización

El plugin Booked puede sincronizarse con calendarios como Google, Outlook e iCal, facilitando así la adición de recordatorios en los dispositivos. Esta función permite a los visitantes insertar citas con su calendario preferido.

Complementos e integraciones

Booked acepta pagos de WooCommerce, permitiendo a tus visitantes comprar citas. También incluye otros complementos como un feed de calendario que te permite mostrar tus citas con apps como Apple Calendar o Outlook.

Reserva de invitados

Booked permite a los nuevos usuarios reservar citas simplemente proporcionando un nombre y una dirección de correo electrónico.

Potente back-end

Booked cuenta con un potente back-end de administración que permite al administrador gestionar todas las citas.

Totalmente receptivo

Booked es totalmente responsivo tanto para el usuario final como para el administrador. Por lo tanto, se puede acceder a ella a través de un dispositivo móvil sin ninguna dificultad. Los empresarios también pueden ver y gestionar las citas sobre la marcha.

Publicar como Widget o Shortcode

El proceso de añadir un nuevo calendario consiste en colocar un shortcode en la página en la que desea mostrar el calendario. O puede añadir el calendario a su diseño con un widget.

Vista de la lista de reservas

Booked también permite mostrar las citas disponibles en forma de lista, proporcionando una visión general de las franjas horarias disponibles.

Formularios personalizados

Booked te permite personalizar el formulario de acceso y registro e incrustarlo en cualquier lugar mediante un shortcode. También puedes crear formularios personalizados y marcarlos como necesarios.

Selector de color

Booked también viene con un selector de color incorporado que le permite crear un calendario que coincida con el tema de su sitio.

Calendarios múltiples

Booked le permite añadir múltiples calendarios, cada uno con sus propios campos personalizados y franjas horarias. A estos calendarios se les asigna a su vez un agente de reservas para que los gestione.

Cómo empezar

Comience por descargar el plugin Booked appointment de CodeCanyon. Una vez que compre el plugin, obtendrá un enlace a los archivos descargables. Alternativamente, puedes encontrarlos en la sección de descargas de tu cuenta con tus otros artículos comprados.

Una vez que hayas descargado los archivos de WordPress, inicia sesión en tu sitio de WordPress, ve a Plugins > Añadir nuevo, y sube el archivo zip. Después de subirlo, haz clic en Instalar ahora, espera unos segundos y haz clic en Activar. Ya puedes empezar a utilizar el plugin.

Configuración

Una vez instalado el plugin, tendrá que configurar la hora y la fecha desde WordPress. Ve a General > Ajustes y establece los ajustes que prefieras para:

  • zona horaria
  • formato de fecha
  • formato de tiempo
  • el día en que comienza la semana (domingo o lunes)
General settings for the pluginGeneral settings for the pluginGeneral settings for the plugin

A continuación, hay que ofrecer a los usuarios una forma de reservar las citas. Booked ofrece opciones de reserva tanto para invitados como para usuarios registrados. El registro de invitados garantiza que sus visitantes no tengan que recordar sus credenciales de acceso.

A continuación, establezca la redirección de la cita después de la reserva exitosa de la misma. Hay dos opciones disponibles: no redirigir y redirigir a una página concreta. Otros ajustes importantes en esta sección son:

  • franjas horarias de las citas
  • buffer de citas
  • búfer de anulación
  • límite de citas
  • opciones de visualización
  • ajustes de color

Calendarios

Booked le permite crear y mostrar múltiples calendarios para cada uno de los servicios que ofrece en su sitio. Cada calendario tendrá franjas horarias, campos personalizados y franjas horarias por defecto.

Para crear un nuevo calendario, vaya a Citas > Calendarios y asigne un nombre único, una URL slug opcional, una descripción y un administrador.

Booked asigna a cada calendario un ID único. Una vez que tengas este ID, puedes mostrar el calendario de reservas con el uso de un shortcode.

add a calendaradd a calendaradd a calendar

Franjas horarias

Una franja horaria es el tiempo asignado a una cita. Booked ofrece la posibilidad de asignar varias franjas horarias a los calendarios. Cuando un cliente haga clic en un calendario, verá las franjas horarias disponibles y podrá elegir la que más le convenga.

Para añadir franjas horarias personalizadas, vaya a Configuración > Franjas horarias personalizadas y haga clic en Añadir fechas. Elija el calendario al que desea asignar las franjas horarias, establezca las fechas de inicio y fin y, por último, añada las franjas horarias que desee. Si no tiene calendarios personalizados, las franjas horarias se asignarán al calendario por defecto.

Adding custom time slotsAdding custom time slotsAdding custom time slots

Puede añadir franjas horarias individuales o masivas en función del número de personal disponible.

Visualización de calendarios

Ahora que hemos terminado con todos los ajustes necesarios, puede mostrar cualquier calendario en cualquier página mediante el uso de un código corto. Booked proporciona códigos cortos únicos para cada calendario. Para obtener el shortcode de un calendario, vaya a Configuración > Shortcodes y copie y pegue el shortcode en la página donde desea mostrar el calendario.

Calendar display settingsCalendar display settingsCalendar display settings

Booked también proporciona los siguientes códigos cortos adicionales:

  • shortcode de perfil de usuario: mostrará un perfil de usuario
  • código corto de citas del usuario: mostrará todas las citas de un usuario
  • style shortcode: permite elegir entre una vista de lista o el calendario por defecto
  • shortcode del conmutador: permite mostrar el conmutador
  • shortcode de año y mes: permite mostrar un año o un mes específico

Un calendario típico será algo así:

Calendar showing available appointmentsCalendar showing available appointmentsCalendar showing available appointments

Conclusión:

Booked es la solución perfecta si está buscando una solución de reservas sencilla y fácil de usar para su negocio. Este plugin también permite a los clientes ver y gestionar sus citas a través de su sección de clientes. CodecCanyon también ofrece muchos otros calendarios de reservas con soluciones listas para usar si desea explorar más opciones.