🗓️¡Agendar Citas en una Página Web Sin plugins!🎖️

Hola amigos de Marieú Technology Corporation, ¡agendar citas en una página web sin plugins de reservas! En efecto, en esta guía, paso a paso, aprenderás todos los pasos para reservas citas en WordPress, editar citas en Google Calendar e insertar agenda de citas en una página web. 🗓️🎖️

Google Calendar es una herramienta de planificación de eventos y organización de agendas, para publicarlos en la web o un sitio digital. Entre algunas ventajas, permite programar rápidamente reuniones y eventos, recibir recordatorios sobre las próximas actividades, añadir lista de tareas, ubicación, invitados, etc. Su configuración se realiza desde su propia plataforma y se puede integrar en una página web mediante código HTML.

¿Cómo agendar citas en WordPress sin plugins?

Para las citas online en WordPress, estamos brindando dos opciones, la primera, tener una página ya lista dentro del editor de WordPress y, para la segunda, que tengamos una página dentro de un maquetador como Elementor, Divi, Astra, Orbital Theme, entre otros. Una vez que tengamos toda la página lista, vamos a iniciar ingresando a la aplicación. Número dos, vamos a editar la agenda de citas. Número tres, vamos a insertarlo dentro de la página web, que hemos creado en WordPress.

Diagrama: ¡Agendar citas en una página web sin plugins!
Fuente: Elaboración Propia.

Colocamos «Google calendar» y vamos a seleccionar la primera página. Por defecto, si tenemos una cuenta ya creada de Gmail, nos va a habilitar esta aplicación de Google Calendar. Recuerden que esa cuenta de Gmail, puede ser personal o también puede ser Enterprise. Lo estamos presentando, como una opción para una cuenta gratuita o una cuenta personal, que nos ofrece Google.

Nos vamos a esta sección, habilitamos crear, desplegamos la opción de crear y nos va aparecer aquí «calendario de citas», seleccionamos, se nos habilita la siguiente ventana. Tenemos, en la mano derecha, todo el calendario del mes de febrero y, en la mano izquierda, tenemos la configuración que vamos a ir, poco a poco, aplicándolo. Como título nosotros hemos colocado Marieú Technology Corporation. Es recomendable, colocar de su empresa o el nombre de su negocio, para que genere un «poquito» más de confianza al cliente.

Duración de la cita, en este caso, nosotros lo hemos programado para 15 minutos. Si ustedes quieren incrementar un poquito el tiempo, tenemos las siguientes opciones: 30, 45 minutos, una hora, entre otros. Disponibilidad general, dentro de esta sección, ustedes pueden, sencillamente, filtrar qué días no desean habilitar estas reservas. Seleccionamos aquí, no disponible el día lunes y lo retiramos, ¡ahí está! Imaginemos que nosotros queremos limitarlo a que no reserven de una a dos.

Si aterrizamos en el día martes, ponemos «añadir otro periodo en este día» y lo limitamos, que vaya desde las 8:30am hasta la 1:00pm y, de 1:00 a 2:00pm, que sea el horario de almuerzo y programamos la cita a partir de las 2:00pm. Sería a partir de las dos y se pueden quedar hasta las 6:00 de la tarde. Si visualizamos aquí, dentro del calendar, ya tenemos un espacio de almuerzo, en el cual, el cliente ya no va a poder reservar. Después, también tenemos lo que son la franja de programación. Limita lo que es el tiempo máximo y mínimo, antes de generar una cita. Puede ser el mismo día, con anticipación de 4 horas. ¿Cuál sería el tiempo máximo?, sería de 60 días, antes de reservar una cita.

En el caso que deseamos, nosotros, colocar una disponibilidad ajustada, en qué horas está disponible en unas fechas concretas, podemos especificarlo. Entonces, el cliente, de repente, va a poder optar por otro día y no dentro de esos horarios. Lo vamos a dejar por defecto, no lo vamos a asignar ni una disponibilidad. luego de ello, tenemos los ajustes de cita de reserva. Aquí, nosotros podemos colocar una duración del periodo entre las citas, es decir, si agendamos una cita a las las 10:00 y a 11:00am podemos colocar unos 30 minutos de descanso, para iniciar la siguiente cita. Además, podemos colocar un máximo de reservas por día, puede ser cuatro, cinco, las veces que ustedes desean. Finalmente, la opción de calendarios, donde se verifica la disponibilidad de las citas.

Si un cliente ya reservó el día lunes a las 11:00am, dentro del calendar ya no va a aparecer la opción, para que otro cliente lo reserve. Además, podemos hacer un cambio de color. Podemos colocar un color rojo, amarillo, notamos el cambio en la mano derecha. Recuerda que tienes una cuenta gratuita, por lo que, solamente podemos crear un calendario de reserva. Si queremos optar por más, ya Google nos ofrece la opción de poder comprar un plan. ¿Cuál sería ese plan?, lo tenemos aquí: plan Premium, donde te ofrece muchas más características a comparación de plan gratuito, vamos a colocar «siguiente».

Ya tenemos un título, tenemos la foto, el nombre de la página de reserva. Va aparecer así, de la siguiente manera. En el caso que no lo tengamos, podemos gestionar el nombre en este enlace.

Entonces, aquí estamos dentro de la cuenta de Google, para Marieú Technology Corporation. Vamos a información personal y aquí podemos hacer los cambios. Tenemos el nombre, la fecha de nacimiento, en este caso es de Marieú, y el género. Si queremos hacer un cambio de foto, lo realizamos en esta sección, aquí podemos hacer el cambio de foto.

Una vez que tengamos eso, se va a actualizar y ya lo tendríamos aquí. Ustedes pueden optar por la videoconferencia de Google Meet, una reunión presencial, llamada telefónica o, de repente, especificar más adelante, vamos a optar por la primera.

Luego de ello, tenemos una descripción, el cual, ofrecemos servicios de creación de páginas web, marketing digital y producción audiovisual, el cual, facilita los negocios dentro de las empresas. Seguidamente, tenemos un formulario de reserva. Este formulario nos va a permitir obtener Data del cliente, por ejemplo, campos importantes, que ya están por defecto y que no se pueden retirar, son el nombre, apellido y dirección de correo electrónico. Si nosotros queremos agregar muchos más campos, lo hacemos aquí. Añadimos elementos y aquí podemos agregar un campo personalizado o, si no, un campo de número telefónico, «okay». Hemos adicionado dos campos de número telefónico y de país.

Finalmente, tenemos lo que son las confirmaciones y recordatorios de las reservas. Entonces, si desplegamos aquí, habilitamos el checklist de invitación por calendar, es decir, cuando el cliente lo reserve, le va a llegar una notificación a su correo electrónico. Y, finalmente, vamos a colocar «guardar», le va a aparecer de la siguiente manera. Va a iniciar este calendario de citas, a partir del día que ustedes lo han configurado. En nuestro caso, nosotros hemos configurado a partir del 9, por lo que, se está iniciando desde el viernes 9. Si nosotros desplazamos una semana aquí, ahí tenemos todas las citas que se ha configurado previamente, excepto los domingos.

¿Cómo podemos compartirlo nuestra página web?, seleccionamos aquí, nos vamos a sitio web insertado. Tenemos dos opciones, dentro de un botón cuando el usuario selecciona, va a aparecer una ventana emergente o, la opción dos, mediante la página de reserva insertada. Vamos a optar por la primera, el botón con ventana emergente. Desplegamos y tenemos aquí el nombre y el color que vamos a agregar, dentro de este botón.

Vamos a colocar un color en particular de nuestra página web, para eso, nos vamos a ir a WordPress. Ya estamos en WordPress, vamos a páginas, ponemos editar con Elementor, nos vamos aquí «ajuste del sitio» y nos vamos a colores globales. Un color, que nosotros usamos, que pasa el filtro de accesibilidad.

Que, por cierto, le voy a dejar en la descripción, el enlace del curso que estamos ofreciendo, para optimizar tu página web. Vamos aquí, copiamos el código hexadecimal y lo pegamos aquí. Ponemos «guardar» y ya tenemos el color del botón. Además de ello, vamos a cambiar el texto, ponemos «reservar una cita gratis», en signo de exclamación. En automático, se genera el código del botón, es un código html, copiamos el código, lo vamos a pegar aquí, dentro de precios página web Marieú. ¿Cómo insertamos dentro de la página?, nos vamos aquí, buscar el widget html y lo tenemos aquí, lo insertamos.

Nosotros lo tenemos aquí, este widget tiene una sección de código html, simplemente pegamos ahí. Copiamos el código y lo pegamos aquí, una vez ahí, recuerden actualizar.

Editar Agenda de Citas con Google Calendar.
Fuente: Elaboración Propia.

Resultados Finales

Entonces, aquí, simplemente nos deslizamos a la sección del vídeo y, aquí, tenemos el botón de reserva. Ponemos «reservar una cita gratis» y se habilita la ventana o el popup de reservas, ¡ahí está! Si, por ejemplo, seleccionamos cualquiera de estas reservas, por ejemplo, el miércoles 14, a las 8:45am, ya se nos habilita esta pequeña ventana, donde se puede incluir el nombre, apellido, dirección, el número de teléfono que es opcional y el país. ¡Listo, gracias amigos de Marieú Technology Corporation!