¿Cómo puedo integrar un sistema de gestión de citas en mi sitio web?

Si has llegado hasta aquí, lo más probable es que ya tengas una página web y sigas dando las citas por teléfono o por WhatsApp. Ya sabes lo que eso cuesta, así que vamos directos a la respuesta.

Para integrar un sistema de gestión de citas en tu sitio web tienes dos caminos: pegar un widget de reservas dentro de la web que ya tienes, o enlazar desde ella a una página de reservas propia. En los dos casos tus clientes ven solo las horas libres, reservan solos y la cita entra directamente en tu agenda. Con CitaFlow puedes hacer cualquiera de las dos cosas sin saber programar: dejas listos tus horarios y servicios, copias un código y lo pegas en tu web.

Primero vemos el problema con un ejemplo concreto. Después, el paso a paso exacto para activarlo.

El problema: una web bonita que no reserva

Imagina la peluquería de Lucía. Dos sillones, una compañera y una web que le hicieron hace un par de años: fotos del local, la lista de servicios, el horario y, abajo del todo, un botón que dice «Pide tu cita por WhatsApp».

La web está bien. El problema empieza después del clic:

• El teléfono suena mientras Lucía tiene las manos ocupadas con un tinte, y no lo puede coger.
• Los WhatsApp llegan a las once de la noche y se contestan a la mañana siguiente, cuando a veces la clienta ya ha buscado otro sitio.
• Para responder a «¿tienes hueco el jueves?» hay que mirar la libreta, proponer una hora, esperar, proponer otra…
• De vez en cuando se apuntan dos citas a la misma hora: una en la libreta y otra en el móvil.
• Y hay clientas que, sin un recordatorio, simplemente se olvidan de venir.

Nada de esto es nuevo para ti. Si estás buscando cómo integrar un sistema de citas en tu web, es porque ya lo vives cada semana. La buena noticia es que la solución no pasa por rehacer la página. Pasa por añadirle la pieza que le falta: una agenda que reserva sola.

Si quieres ponerle número a lo que te cuestan los olvidos, prueba la calculadora de ausencias con tus propios datos.

Qué es un sistema de gestión de citas para tu web (y qué tiene que hacer)

Un sistema de gestión de citas es una agenda de citas online conectada a tu web: el cliente ve los huecos libres, elige uno y la cita queda guardada sin que tú intervengas. Tú la ves en tu panel y el cliente recibe la confirmación al momento.

Para que de verdad te quite trabajo, tiene que cumplir cinco cosas:

1. Mostrar solo horas realmente libres, según tu horario, quién hace cada servicio y cuánto dura.
2. Confirmar sola cada reserva, con los datos correctos.
3. Recordar la cita al cliente antes de que llegue el día.
4. Dejar cambiar o cancelar sin que el cliente tenga que llamarte.
5. Usar una sola agenda para todo: la web, el teléfono, el WhatsApp y las citas que apuntas tú a mano. Así no hay dobles reservas.

Si una herramienta falla en alguno de estos puntos, acabarás haciendo a mano justo lo que querías dejar de hacer. Si estás comparando opciones para una peluquería, tienes más criterios en cómo elegir el software de reservas para tu peluquería.

Dos formas de añadir reservas online a tu página web

Hay dos maneras de poner un sistema de reservas online en tu web, y puedes usar las dos a la vez:

	Widget dentro de tu web	Página de reservas propia
Qué es	Un calendario de reservas que se ve dentro de tu web	Una página aparte con tus servicios, tu horario y el botón de reservar
Cómo se instala	Copias un código y lo pegas en tu web	La activas en el panel y la enlazas desde un botón
Qué hace el cliente	Reserva sin salir de tu web	Pasa a tu página de reservas y reserva allí
Te conviene si…	Tu web deja pegar código HTML (WordPress, Wix, una web a medida…)	Tu editor no deja pegar código, o todavía no tienes web

En CitaFlow las dos opciones van incluidas en todos los planes y comparten la misma agenda. En el caso de Lucía, lo lógico es el widget: su web ya existe y le gusta, solo le falta que la gente pueda reservar desde ella. Y la página de reservas le sirve, de paso, para el enlace de Instagram y de Google.

Cómo integrar CitaFlow en tu sitio web, paso a paso

Este es el recorrido completo, en el orden que funciona. Pegar el código es cuestión de minutos; lo que más tiempo lleva es dejar bien tus horarios y tus servicios, y eso solo se hace una vez.

Paso 1: crea tu cuenta y sigue el asistente de alta

Entra en CitaFlow y crea tu cuenta. La prueba dura 7 días, es gratis y no pide tarjeta.

Nada más entrar, un asistente te va pidiendo lo básico (Información del Negocio, Horarios, Servicios y Recursos, Notificaciones y Página Web) y, por el camino, te deja probar la IA. Rellénalo con calma, porque casi todo lo que viene después sale de aquí. Si ya tienes web, el asistente también puede enseñarte el código del widget; si no te lo enseña, no pasa nada, porque lo tienes siempre en el panel (paso 5).

Paso 2: deja bien tu horario

En Mi Negocio → Horarios decides cuándo se puede reservar. Si una hora no está abierta aquí, no aparece como hueco libre en tu web.

Lo que suele necesitar una peluquería:

• Horario partido, si cierras a mediodía: añades un turno de tarde y entre los dos no entra ninguna cita.
• Excepciones de horario para festivos y vacaciones: marcas la fecha como cerrada y ese día nadie puede reservar.
• Horarios individuales, si cada persona del equipo tiene su turno. Si la compañera de Lucía solo trabaja por las tardes, su agenda solo ofrecerá tardes.

Tienes más detalle en la guía de horarios.

Paso 3: crea tus servicios y di quién hace cada uno

En Mi Negocio → Recursos y Servicios está tu catálogo. Para cada servicio pones el nombre, la duración (el campo Con cliente), el precio y quién lo realiza.

Tres ajustes que en una peluquería marcan la diferencia:

• Reposo / espera: por ejemplo, el tiempo de exposición de un tinte. Se suma a la cita, pero la estilista queda libre para atender a otra clienta mientras tanto.
• Variantes de precio: si un mismo servicio cuesta distinto según el largo del pelo, no hace falta crearlo dos veces.
• Visibilidad por canal: marca Página web pública en cada servicio que quieras que se pueda reservar desde tu web.

Ojo con esto: un servicio sin ningún profesional asignado no se puede reservar online. Si ves la etiqueta roja Sin recurso junto a un servicio, asígnale a alguien. Más ayuda en la guía de servicios.

Paso 4: publica tu página de reservas

Ve a Página Web → General y revisa el Nombre del Negocio y la Ciudad: con ellos se crea tu dirección, del tipo web.citaflow.com/tunegocio. Después activa el interruptor Activo.

Este paso es importante aunque solo vayas a usar el widget. Si tu página de reservas no está publicada, el widget aparece vacío en tu web, sin servicios ni horarios, y no sale ningún aviso que te lo diga. Es el despiste más habitual, así que mejor dejarlo hecho ya.

Si el interruptor no se activa, la barra Estado de tu página web te dice qué falta. Haz clic en cada punto y te lleva directo a arreglarlo.

Paso 5: activa el widget y copia el código

Ahora entra en Página Web → Widget. Si no ves esa pestaña, cambia el interruptor Qué estás configurando de la cabecera a Widget.

1. Enciende Activar widget embebido.
2. Elige el Tipo de widget:
   • Calendario semanal (el que viene por defecto): el cliente elige el servicio y ve la semana con las horas libres. Para una peluquería suele ser la mejor opción.
   • Calendario mensual: para cuando tus clientes piensan primero en un día concreto.
   • Catálogo de servicios o Catálogo por categorías: tarjetas con precio y duración, útiles si tienes muchos servicios.
   • Lista compacta: para una barra lateral o un hueco pequeño.
3. En Configuración del Widget, deja el tamaño en Responsive para que se adapte al móvil, y sube el alto si ves que se queda corto.
4. Copia el Código iframe completo con el botón de copiar de la esquina.

No hace falta que toques los colores aquí: el widget usa los de Página Web → Apariencia, y si los cambias allí, se actualizan solos en tu web.

Paso 6: pega el código en tu página web

Pega el código completo (el iframe y el script que lo acompaña) en el lugar de tu web donde quieras que aparezca la agenda. Lo más práctico es una página propia llamada «Reservar» o «Pide tu cita», enlazada desde el menú, más un botón en la portada que lleve hasta ella.

Según cómo esté hecha tu web:

• WordPress: añade un bloque HTML personalizado y pega el código dentro.
• Wix, Squarespace y editores parecidos: busca el elemento para insertar código HTML y pégalo ahí.
• Web hecha a medida: pásale el código a quien te la mantiene. Es copiar y pegar.

Si quieres que el widget solo funcione en tu web, añade tu dominio en Dominios autorizados. Si lo dejas vacío, funciona en cualquier sitio.

Un detalle que conviene saber: el tipo de widget y el tamaño van dentro del código. Si más adelante los cambias, tendrás que volver a copiarlo y pegarlo. Tienes más detalles en la guía del widget de reservas.

Paso 7: activa los avisos para tus clientes

Que la cita entre sola está muy bien. Que el cliente no se olvide, mejor todavía. En Mi Negocio → Notificaciones eliges qué mensajes salen solos:

• Confirmación de citas, Cambios en sus citas, Recordatorios de citas y Cancelaciones.
• Recordar al cliente con la antelación que prefieras, por ejemplo 24 horas antes.
• Pedir confirmación de asistencia, que añade un botón al recordatorio de WhatsApp para que el cliente confirme que viene.

Los avisos por email van incluidos. WhatsApp y SMS se activan aparte y llevan un suplemento según tu volumen de citas. Y no te olvides de pulsar Guardar Cambios: en esta pantalla nada se aplica hasta que guardas. Lo tienes explicado en la guía de notificaciones.

Paso 8: haz una reserva de prueba

Antes de anunciarlo, ponte en el lugar de tu cliente. Abre tu web desde el móvil, reserva una cita y comprueba tres cosas:

1. Que solo aparecen horas en las que de verdad atiendes.
2. Que la cita aparece en tu agenda del panel.
3. Que llega la confirmación al email que has puesto al reservar.

Si todo cuadra, cancela la cita de prueba desde el enlace de la confirmación. Listo: tu web ya reserva sola.

Un extra: tu enlace de reservas para Instagram, Google y WhatsApp

Tu web no es el único sitio desde el que te piden cita. En Página Web → General, dentro de Enlaces por canal, tienes tu dirección de reservas en una versión para cada sitio (Google, Instagram, Facebook, TikTok, WhatsApp, email y QR). Así cada reserva sabe de dónde vino.

Y si quieres llevar a alguien directo a un servicio concreto, en Mi Negocio → Recursos y Servicios cada servicio tiene la opción Copiar enlace de reserva, que abre la reserva con ese servicio ya elegido. Va muy bien para anunciar un servicio concreto en tus redes.

Errores frecuentes al poner un sistema de reservas en tu web

• El widget sale vacío. Casi siempre es porque la página de reservas no está publicada (paso 4) o porque Activar widget embebido está apagado.
• Un servicio no aparece. Revisa que tenga marcada Página web pública y al menos un profesional activo asignado.
• Salen horas en las que no trabajas, o faltan horas. El horario del negocio siempre manda, y el de cada profesional se cruza con él: solo se ofrecen las horas que encajan en los dos.
• Has cambiado el tipo de widget y en tu web sigue igual. El tipo y el tamaño van en el código: cópialo y pégalo de nuevo.
• Has recortado el horario y siguen citas fuera de él. Recortar un horario no cancela las citas ya dadas; esas tienes que moverlas tú.
• La agenda está escondida. Si para reservar hay que bajar hasta el pie de página, poca gente lo hará. Pon un botón «Reservar» bien visible en el menú y en la portada.

Lo que cambia en la peluquería de Lucía

Con el widget en su web, el día a día de Lucía cambia en cosas pequeñas que, sumadas, se notan mucho:

• La clienta que escribía a las once de la noche ahora reserva sola a esa hora, y Lucía se encuentra la cita hecha por la mañana.
• Ya no hay que proponer horas una a una: cada clienta ve lo que hay libre y elige.
• La confirmación y el recordatorio salen solos.
• Si alguien no puede venir, cambia o cancela desde el enlace de su confirmación, y el hueco vuelve a quedar libre para otra persona.
• Todo está en una sola agenda. Y si usa Google Calendar, se sincroniza en los dos sentidos.

El teléfono seguirá sonando de vez en cuando, y está bien: hay clientes que prefieren llamar. Si quieres que esas llamadas y esos WhatsApp también acaben en cita sin soltar las tijeras, CitaFlow tiene un recepcionista con IA para el teléfono y un chatbot para WhatsApp que trabajan sobre la misma agenda. Pero eso es otro paso. Empieza por la web.

Preguntas frecuentes

¿Necesito saber programar para integrar un sistema de citas en mi web?

No. Solo tienes que copiar un código desde el panel de CitaFlow y pegarlo en tu web, igual que pegarías un vídeo o un mapa. Si tu web la lleva otra persona, basta con pasarle el código.

¿Funciona con WordPress, Wix o una web hecha a medida?

Sí. El widget funciona en cualquier web que permita pegar código HTML: WordPress, Wix, una web hecha a medida y la mayoría de editores. Si el tuyo no lo permite, enlaza tu página de reservas desde un botón.

¿Qué pasa si no tengo página web?

CitaFlow incluye una página de reservas con tu marca en una dirección del tipo web.citaflow.com/tunegocio, con tus servicios, tu horario y el botón de reservar. Si más adelante quieres usar tu propio dominio, se añade como complemento desde Página Web → Dominio.

¿CitaFlow cobra comisión por cada reserva?

No. CitaFlow no cobra comisión por reserva: cada cita que entra por tu web es tuya.

¿Puedo probarlo antes de pagar?

Sí. Tienes 7 días de prueba gratis, sin tarjeta. Es tiempo de sobra para seguir esta guía, hacer tu reserva de prueba y ver si te encaja.

Empieza hoy con tu primera reserva online

Integrar un sistema de gestión de citas en tu sitio web no consiste en cambiar de web ni en aprender a programar. Consiste en dejar bien tus horarios y tus servicios una vez, pegar un código y comprobar que funciona. A partir de ahí, tu web hace lo que siempre debería haber hecho: dar citas mientras tú trabajas.

Prueba CitaFlow gratis durante 7 días, sin tarjeta. Y si antes quieres ver cómo queda, echa un vistazo a las reservas online de CitaFlow.