Widget de reservas en tu sitio web

El widget es tu página de reservas metida dentro de tu propio sitio web. Tus clientes eligen servicio, persona, día y hora sin salir de tu página, y la reserva entra a Agenda igual que si hubieran usado tu enlace /r/…: como solicitud, como cita directa o como consulta por WhatsApp (que también puede dejar la solicitud en Solicitudes), según el modo que tengas configurado.

Antes de empezar

• Usá rol Dueño o Administrador.
• Tu página de reservas tiene que estar publicada. El widget muestra exactamente esa página; si está apagada, el widget no aparece en tu sitio (no muestra un error: simplemente no se monta).
• Necesitás poder pegar un bloque de HTML en tu sitio (en WordPress, el bloque «HTML personalizado»; en Elementor, el widget «HTML»).

Dónde está

Ajustes → Página de reservas → Widget. La pestaña Página de reservas tiene dos partes: Página, con la configuración de tu página de reservas, y Widget, con todo lo de esta guía. Si todavía no preparaste tu página, Widget te lo avisa y te lleva a Página con un botón.

Todo lo de Widget, salvo el grupo Instalación, se guarda solo: los interruptores y listas al tocarlos, y los textos y enlaces al salir del campo. Lo guardado vale para todos los códigos que ya pegaste: si cambiás el color o el texto del botón, tu sitio se actualiza sin volver a pegar nada.

Los ajustes, grupo por grupo

Botón y apariencia

• Texto del botón: hasta 40 caracteres. Vacío usa «Reservar cita» (o el nombre que tu rubro le da a una cita).
• Color del botón y color al pasar el mouse: por defecto, los de tu marca. Desmarcá El de mi marca para elegir otro.
• Letra: la del celular (recomendada), la de tu sitio, o una redondeada (Nunito). Con la del celular y la redondeada, los títulos usan la misma letra con serifa de tu página de reservas (Fraunces), así el widget y tu enlace /r/… se ven iguales. Fraunces y Nunito se descargan de Google Fonts cuando alguien abre tu sitio. Con la de tu sitio no se descarga nada y también los títulos usan tu letra.
• Botón flotante: abajo a la derecha o a la izquierda (solo aplica si usás el modo flotante).

Contenido

Decide qué se ve dentro del widget: tu logo y nombre arriba, el texto de bienvenida, los precios, el enlace «Cómo llegar», la política de cancelación y si el calendario abre en semana o en mes. «Cómo llegar» abre en Google Maps la ubicación que cargás en Ajustes → Automatizaciones → Ubicación del negocio (alcanza con el nombre o la dirección); mientras no haya una, el interruptor te lo avisa con un enlace a ese lugar y el widget no muestra el enlace. Cerrar al terminar cambia el último paso: con el interruptor encendido muestra Listo (cierra la ventana); apagado, ofrece Hacer otra reserva.

Ocultar los precios solo los oculta en el widget: tu página de reservas los sigue mostrando.

Enlaces y políticas

Si cargás tus Términos y condiciones y tu Política de privacidad, el último paso dice «Al continuar aceptás…» con los dos enlaces. Tienen que empezar con https://; un enlace http:// se rechaza al guardar.

Medición

Ver la sección Medir reservas con GA4 o el Pixel.

Instalación

Acá armás el código para pegar. Estas opciones no se guardan: son de cada código, así podés pegar varios distintos en tu sitio. Elegí cómo se ve, copiá el código con Copiar código y usá Probar widget para abrirlo en el panel con tu configuración real antes de pegarlo.

Lo que ve tu clienta cuando algo no calza

El widget y tu página /r/… guían a la clienta con las mismas notas, para que nunca quede trabada:

• Día lleno: en vez de «probá con otro», le dice cuál es el próximo día con horas y la lleva con Ver ese día, aunque esté varias semanas más adelante.
• Semana sin horas: lo mismo, con el próximo día disponible.
• Justo tomaron la hora que eligió mientras llenaba sus datos: vuelve a las horas de ese día y le ofrece la más cercana, con un botón para tomarla.
• Con quién: arriba de las horas dice «Horas con Raquel». Si eligió «Cualquiera», le explica que son las horas de todo el equipo y que se le asigna quien esté libre.
• El botón final dice qué falta («Escribí tu nombre para seguir», «Falta tu WhatsApp») en vez de quedarse gris sin explicación.
• Resumen con «Cambiar» al lado de la hora y de la persona, para corregir sin retroceder paso por paso.

No hay nada que configurar: funciona igual en todos los modos.

Las cuatro formas de mostrarlo

Forma	Cómo se ve	Cuándo conviene
Botón en la página	Un botón donde pegues el código; abre la reserva en una ventana encima de tu sitio.	Junto a la descripción de un servicio o en tu página de contacto. Podés pedirlo a todo el ancho del bloque.
Botón flotante	Fijo en una esquina de la pantalla mientras navegan tu sitio.	Para que reservar esté a mano en todas las páginas.
Dentro de la página	El paso a paso se muestra directo donde pegues el código, sin botón.	Una página de tu sitio dedicada a reservar.
Con un botón de tu sitio	No ponemos botón: el código trae un botón simple que abre el widget, y podés reemplazarlo por el de tu tema.	Cuando querés usar el botón de tu diseño.

El último modo abre el widget con AgendaBookingWidget.open(). Algunos WordPress quitan los botones con onclick al guardar; si te pasa, usá Botón en la página o Botón flotante.

Un código por servicio, sección o profesional

En Instalación podés hacer que un código arranque ya elegido:

• Empezar con un servicio: el cliente salta la carta y sigue con lo demás. Ideal para un botón «Reservar pedicure» junto a la descripción del pedicure.
• Mostrar solo una sección: la carta arranca filtrada en una categoría (por ejemplo, Pies), con un botón para ver toda la carta.
• Solo con un profesional: muestra solo a esa persona y lo que ella hace. Solo aparece si tu página deja elegir profesional.
• Sin tu logo arriba: para una página de tu sitio que ya muestra la marca encima.

Pegá un código por cada botón: pueden convivir varios en la misma página sin problema.

Pegarlo en WordPress o Elementor

1. Copiá el código con Copiar código.
2. WordPress (editor de bloques): agregá un bloque HTML personalizado donde quieras el widget y pegá el código. Elementor: arrastrá el widget HTML a la sección y pegá el código.
3. Publicá o actualizá la página.
4. Si usás un plugin de caché (WP Rocket, LiteSpeed, W3 Total Cache, Autoptimize…), purgá la caché después de pegarlo.
5. Si el plugin retrasa, difiere o combina JavaScript, agregá booking-widget.js a su lista de exclusiones. El widget se carga solo y no debe combinarse con otros scripts.

En el editor de Elementor el widget puede no verse: revisalo con la vista previa o en la página publicada.

Medir reservas con GA4 o el Pixel

El widget avisa a tu sitio lo que pasa, sin datos personales (nunca envía nombres, teléfonos ni notas). Siempre emite estos eventos en window:

Evento	Cuándo
agenda-tico:abierto	Se abrió el widget.
agenda-tico:paso	Avanzó de pantalla (paso, número y total).
agenda-tico:reserva_creada	Envió una solicitud o agendó una cita (modo, tipo y cuántos servicios).
agenda-tico:consulta_whatsapp	Abrió WhatsApp con su pedido.
agenda-tico:cerrado	Cerró el widget (en qué paso).

Si usás Google Tag Manager, encendé Enviar a Google Tag Manager (dataLayer) en el grupo Medición: los mismos eventos llegan además al dataLayer como agenda_tico_abierto, agenda_tico_reserva_creada, etc. Desde ahí los conectás con GA4 o el Pixel de Meta como cualquier otro evento.

Preguntas frecuentes

Pegué el código y no aparece nada. Revisá en este orden: que tu página de reservas esté publicada; que el código esté completo (incluido el data-slug con la dirección de tu página); que purgaste la caché del sitio; y que ningún plugin esté difiriendo o combinando booking-widget.js.

Cambié la configuración y mi sitio sigue igual. Los cambios del panel se ven al recargar la página de tu sitio. Si tu sitio guarda páginas en caché, purgala.

El botón flotante tapa el chat de mi sitio. Pasá el flotante a la otra esquina en Botón y apariencia, o usá Botón en la página.

¿El widget usa servicios de Google para la letra? Con la letra del celular y la redondeada, sí: los títulos (Fraunces) y la letra redondeada (Nunito) se descargan de Google Fonts en tu sitio. Si tu sitio no permite cargar recursos de Google, elegí la de tu sitio: no carga nada externo.

¿Puedo tener el widget y mi enlace /r/… a la vez? Sí. Son la misma página: lo que configurás para tu página de reservas (servicios, profesionales, horarios, modo) vale para los dos.

¿El widget respeta el Google Calendar de cada profesional? Sí, si lo activás en tu página de reservas: las horas ocupadas en Google no aparecen ni en el widget ni en /r/…. Cómo activarlo y compartir cada calendario: Ocultar horas ocupadas en la página de reservas.