Qué es
El widget muestra tu link de reserva dentro de tu página web. El cliente elige día y hora sin salir de tu sitio, y la cita entra directo a tu calendario.
Es el mismo calendario del link de reserva: respeta tus horarios, tus servicios, tus agendas y tus topes de cupo. Lo único que cambia es dónde se ve.
¿Widget o link?:
El link se comparte (WhatsApp, bio de Instagram, firma de correo). El widget se incrusta en tu web. Un mismo enlace de reserva sirve para las dos cosas al mismo tiempo.
Dos formas de ponerlo
| En la página | Botón flotante | |
|---|---|---|
| Cómo se ve | El calendario aparece dentro de tu página, donde tú lo pongas | Un botón fijo en una esquina; al tocarlo se abre el calendario encima de tu sitio |
| Dónde pegas el código | En la página donde quieres el calendario | Una sola vez, y sale en todas las páginas |
| Para cuándo | Tienes una página de "Agenda tu cita" | Quieres que se pueda agendar desde cualquier página |
Puedes usar los dos a la vez: el botón flotante en todo el sitio y el calendario incrustado en tu página de citas.
Cómo activarlo
Son tres pasos: autorizar tu dominio, copiar el código y pegarlo.
1. Autoriza el dominio de tu sitio
Por seguridad, tu calendario solo se muestra en los sitios que tú autorices. Sin esto, cualquiera podría poner tu calendario en su página y llenarte la agenda.
- Entra a Calendario → configuración → Reservas
- Edita el enlace que vas a incrustar (ícono de lápiz)
- En Sitios donde se puede incrustar, escribe tu dominio, uno por línea:
midominio.com
- Guarda
Con escribir el dominio una vez basta: midominio.com y www.midominio.com cuentan como el mismo sitio, así que autorizar uno autoriza el otro.
Si tu sitio usa subdominios (por ejemplo tienda.midominio.com y blog.midominio.com), puedes autorizarlos todos de una vez, junto con midominio.com:
*.midominio.com
Escribe el dominio, no la página:
Va midominio.com, no midominio.com/agenda. El permiso es por sitio, no por página: una vez autorizado el dominio, puedes poner el widget en cualquier página de ese sitio.
2. Elige el formato y copia el código
- En la lista de enlaces, haz clic en el ícono
</> - Se abre Insertar el calendario en tu web. Elige En la página o Botón flotante
- Haz clic en Copiar
Si ya autorizaste dominios, la ventana los lista arriba ("Autorizado en: midominio.com"). Si todavía no autorizaste ninguno, te avisa con el aviso Falta autorizar tu dominio y te ofrece el botón Autorizar mi dominio, que te lleva directo al campo del paso anterior.
3. Pégalo en tu página
Según tu plataforma:
| Plataforma | Dónde pegarlo |
|---|---|
| WordPress | Editor de bloques → bloque HTML personalizado |
| Wix | Agregar → Insertar código (Embed HTML) |
| Shopify | Editar página → botón <> Mostrar HTML |
| Squarespace | Bloque Code |
| Webflow | Elemento Embed |
| HTML propio | Dentro del <body> |
Listo. Recarga tu página y el calendario aparece.
En la página
El código trae dos partes: un espacio vacío y el script que lo llena.
<div id="yolani-booking"></div>
<script src="https://api.yolani.co/widget/yolani-booking.js"
data-hash="TU_CODIGO"
data-target="#yolani-booking"
data-app="https://app.yolani.co"
async></script>
Pégalo en el lugar exacto donde quieres que salga el calendario.
Se adapta solo:
- Ancho: ocupa el 100 % del espacio que le des. En una columna angosta, se ajusta.
- Alto: crece y se encoge según el paso en el que va el cliente (elegir servicio, día, hora, datos). No deja huecos ni recorta el formulario.
- Fondo: transparente. Toma el fondo de tu página, así que se ve como parte de tu sitio y no como un recuadro pegado.
Ajustarlo a tu sitio
Tres atributos opcionales que se agregan al mismo <script>. Sirven igual en el calendario incrustado y en el botón flotante.
| Atributo | Qué hace |
|---|---|
data-servicio="118" | Abre el calendario directo en la fecha de ese servicio, sin la lista de servicios. Úsalo cuando tu página ya habla de un tratamiento en particular. El número es el del servicio en tu agenda; si no existe o el enlace no lo ofrece, sale la lista normal. |
data-encabezado="0" | Quita el nombre del negocio y el título del enlace de arriba del calendario. Para cuando tu página ya trae su propio título y saldría repetido. |
data-acento="#9E4A5E" | Pinta los botones y las fechas con el color de tu marca. |
<script src="https://api.yolani.co/widget/yolani-booking.js"
data-hash="TU_CODIGO"
data-target="#yolani-booking"
data-servicio="118"
data-encabezado="0"
data-acento="#9E4A5E"
data-app="https://app.yolani.co"
async></script>
Botón flotante
Este código va una sola vez, de preferencia en la parte de "código del sitio" de tu plantilla (antes de </body>). El botón aparece en todas las páginas que compartan esa plantilla.
<script src="https://api.yolani.co/widget/yolani-booking.js"
data-hash="TU_CODIGO"
data-mode="popup"
data-label="Agendar cita"
data-color="#0281C5"
data-position="bottom-right"
data-app="https://app.yolani.co"
async></script>
Desde la ventana de Insertar el calendario en tu web puedes cambiar, y ver en una vista previa antes de copiar:
| Opción | Qué hace |
|---|---|
| Texto del botón | Lo que dice: "Agendar cita", "Reservar mesa", "Pide tu consulta"… |
| Color | El color del botón. Ponle el de tu marca. |
| Esquina | Abajo a la derecha o abajo a la izquierda. Cámbialo si ya tienes un chat en esa esquina. |
Al tocarlo se abre el calendario encima de tu página. Se cierra con la ×, con la tecla Esc o tocando fuera. En celular ocupa toda la pantalla.
El calendario no se carga hasta que alguien lo abre:
El botón por sí solo casi no pesa. El calendario se carga la primera vez que un visitante lo abre, así que tener el botón en todo el sitio no hace tu página más lenta.
Abrirlo desde tu propio botón
Si ya tienes un botón de "Agendar" en tu página y prefieres usar ese, deja el código del botón flotante puesto y haz que el tuyo llame a:
<button onclick="window.YolaniBooking.open()">Agendar cita</button>
Varios calendarios en un sitio
Puedes poner enlaces distintos en páginas distintas (por ejemplo "Primera consulta" en el inicio y "Seguimiento" en la sección de pacientes). Cada uno lleva su propio código.
Si necesitas dos calendarios incrustados en la misma página, cambia el identificador del contenedor en los dos lugares donde aparece:
<div id="agenda-consulta"></div>
<script src="https://api.yolani.co/widget/yolani-booking.js"
data-hash="CODIGO_1" data-target="#agenda-consulta"
data-app="https://app.yolani.co" async></script>
<div id="agenda-seguimiento"></div>
<script src="https://api.yolani.co/widget/yolani-booking.js"
data-hash="CODIGO_2" data-target="#agenda-seguimiento"
data-app="https://app.yolani.co" async></script>
Si algo no funciona
El espacio del calendario sale en blanco, o el botón flotante no abre nada.
Falta autorizar el dominio. Vuelve al paso 1 y revisa que el dominio escrito sea el de la barra de direcciones de tu sitio. No hace falta escribirlo con y sin www: al autorizar midominio.com queda autorizado también www.midominio.com, y al revés. Un subdominio distinto (tienda.midominio.com) sí se autoriza aparte, o con *.midominio.com.
No aparece nada, ni siquiera un recuadro.
Tu plataforma probablemente borró el <script> al guardar. Muchos constructores de páginas solo aceptan código dentro de un bloque de tipo HTML o Embed. Revisa la tabla de arriba.
El botón flotante tapa mi chat (o al revés). Cambia la esquina desde Insertar el calendario en tu web y vuelve a pegar el código.
Dice que el enlace no está disponible. El enlace está en Inactivo o llegó a su tope de reservas (en la lista se marca como Sin cupo). Actívalo o sube el tope desde configuración → Reservas.
No muestra horarios. Es un tema del calendario, no del widget: pásalo a Configurar el calendario y revisa que el servicio esté vinculado a una agenda con horario.
Cambié algo y sigo viendo lo anterior.
Recarga sin caché (Ctrl + F5, o Cmd + Shift + R en Mac).
Seguridad
- El formulario corre en los servidores de Yolani, no en tu web. Los datos de tus clientes nunca pasan por tu sitio.
- Solo los dominios que autorizaste pueden mostrar tu calendario. Quitar un dominio de la lista lo desactiva de inmediato.
- El widget no lee ni modifica nada de tu página.