Widget de reservaciones para tu sitio web

Nota

El widget de reservaciones está disponible en los planes Starter y Professional.

Con el widget de reservaciones puedes integrar tu formulario de citas directamente en tu sitio web. Tus clientes reservan sin salir de tu página, y tú recibes las citas en tu panel de Agendario como siempre.

Modos de integración

Agendario ofrece tres formas de integrar el widget:

• En línea: El formulario aparece directamente en tu página, dentro de un contenedor que tú elijas.
• Botón flotante: Un botón fijo en la esquina inferior derecha que abre el formulario en una ventana emergente.
• Servicio específico: Igual que el modo en línea, pero muestra directamente el formulario de un servicio en particular.

Obtener el código

1. Inicia sesión en Agendario y ve a Mi negocio.

2. Desplázate hasta la sección Widget de reservaciones.

3. Copia el fragmento de código del modo que prefieras.

4. Pega el código en el HTML de tu sitio web donde quieras que aparezca el widget.

Modo en línea (todos los servicios)

Este modo muestra una lista de todos tus servicios activos. El cliente selecciona un servicio y sigue el flujo de reservación completo.

Pega este código donde quieras que aparezca el widget:

<div id="agendario-widget"></div>
<script src="https://agendario.mx/embed/tu-negocio" async></script>

Consejo

Reemplaza tu-negocio con el slug de tu negocio (la parte de tu URL en Agendario).

Modo botón flotante

Este modo agrega un botón fijo en la esquina inferior derecha de tu sitio. Al hacer clic, se abre el formulario de reservaciones en una ventana emergente.

<script src="https://agendario.mx/embed/tu-negocio" data-mode="popup" async></script>

Personalización del botón

Puedes personalizar el texto y color del botón con atributos data-*:

Atributo	Descripción	Valor por defecto
data-button-text	Texto del botón	”Reservar cita”
data-button-color	Color de fondo del botón (hex)	#4F46E5

Ejemplo:

<script src="https://agendario.mx/embed/tu-negocio"
        data-mode="popup"
        data-button-text="Agendar ahora"
        data-button-color="#16a34a"
        async></script>

Modo servicio específico

Si quieres que el widget muestre directamente el formulario de un servicio en particular (sin pasar por la lista de servicios), usa el atributo data-service:

<div id="agendario-widget"></div>
<script src="https://agendario.mx/embed/tu-negocio"
        data-service="corte-clasico"
        async></script>

Consejo

El valor de data-service es el slug del servicio. Lo puedes encontrar en la URL cuando editas el servicio en Agendario.

Temas y personalización visual

El widget hereda automáticamente el tema activo de tu página de reservaciones en Agendario. Si cambias colores, fuentes o estilos en tu tema, el widget se actualizará en tiempo real.

Nota

Próximamente podrás personalizar aún más el widget: mostrar u ocultar imágenes de servicios, precios, duraciones y más.

Múltiples widgets en una página

Puedes colocar varios widgets en la misma página. Por ejemplo, un widget general y varios de servicios específicos. Cada uno funciona de manera independiente.

<!-- Widget general -->
<div id="agendario-widget"></div>
<script src="https://agendario.mx/embed/tu-negocio" async></script>

<!-- Widget de un servicio específico -->
<div class="mi-seccion">
  <script src="https://agendario.mx/embed/tu-negocio"
          data-service="corte-clasico" async></script>
</div>

Precaución

Cuando uses múltiples widgets, solo uno puede usar id="agendario-widget". Los demás deben estar dentro de sus propios contenedores (como un <div> con clase).

Eventos personalizados

El widget emite eventos que puedes escuchar desde tu sitio web para integrar con tu propio código o herramientas de analítica:

Evento	Cuándo se dispara	Datos
agendario:booked	Cuando se completa una reservación	{ id, token, service, date, time }
agendario:step	Cuando el usuario avanza en el flujo	{ step, label }

Ejemplo:

document.addEventListener('agendario:booked', function(event) {
  console.log('Cita reservada:', event.detail);
  // Integra con Google Analytics, Facebook Pixel, etc.
});

Compatibilidad

El widget es compatible con cualquier sitio web que soporte HTML y JavaScript:

• WordPress
• Wix
• Squarespace
• Shopify
• Sitios web personalizados (HTML, React, Vue, Angular, etc.)

Solución de problemas

El widget no aparece

• Verifica que el slug de tu negocio sea correcto.
• Asegúrate de que tu plan sea Starter o Professional.
• Revisa la consola del navegador (F12) para ver si hay errores.

El widget se ve muy pequeño

• Asegúrate de que el contenedor (<div>) no tenga restricciones de ancho o alto que limiten el iframe.

Los estilos no coinciden con mi tema

• Verifica que tengas un tema activo en Diseño dentro de tu panel de Agendario.
• Los cambios de tema se reflejan en tiempo real, no necesitas actualizar el código.