Inserta tu calendario de reservas dentro de tu sitio web (WordPress, Shopify o HTML)

Aprende a incrustar el calendario interactivo de WaclisCAL dentro de las páginas de tu sitio web mediante código embebido en modo iframe directo, ventana emergente (modal popup) o botón flotante sin necesidad de programar.

1. Qué permite hacer

Incrustar tu calendario de reservas directamente en tu sitio web permite que los visitantes agenden una cita o turno sin salir de tu dominio. En lugar de derivar al usuario a un enlace externo, el cliente completa todo el proceso de reserva dentro de tu propia página web institucional, tienda online o blog.

WaclisCAL ofrece tres modalidades de incrustación (Embed):

• Integración en línea (Inline Iframe): El calendario se muestra integrado naturalmente dentro del cuerpo de la página, como una sección más de tu diseño (ideal para páginas de contacto o secciones de "Reservar Turno").
• Ventana emergente (Modal Popup): Un botón en tu sitio web (ejemplo: "Agendar Consulta") abre una ventana modal centrada y elegante que superpone el calendario sobre el fondo atenuado.
• Botón flotante permanente (Floating Action Button): Un botón fijo y discreto en la esquina inferior de tu web (ejemplo: "Reservar Cita") acompaña la navegación del usuario en todo momento.

2. Cuándo utilizarlo

Recomendamos utilizar la incrustación web en:

• Sitios web corporativos: Para transformar visitantes pasivos en citas comerciales agendadas.
• Tiendas Shopify o WooCommerce: Para agendar turnos de asesoramiento de compra o retiro presencial de productos.
• Blogs profesionales en WordPress: Para colocar el calendario al final de artículos o páginas de servicios.
• Landing pages de campañas: En páginas de aterrizaje de publicidad para maximizar la tasa de conversión.

3. Antes de comenzar

Antes de copiar el código de incrustación:

1. Tener acceso de edición al panel de administración de tu sitio web (WordPress, Shopify, Webflow, Wix o código HTML).
2. Tener configurado el Tipo de Evento que deseas incrustar (o decidir si deseas incrustar tu catálogo general de servicios).
3. Asegurarte de que tu sitio web cuente con certificado de seguridad HTTPS (los navegadores modernos restringen iframes en páginas HTTP inseguras).

4. Paso a paso

Paso 1: Accede al generador de código de incrustación

1. En la barra lateral principal de WaclisCAL, dirígete a Tipos de Evento.
2. Localiza el servicio que deseas insertar en tu web.
3. Haz clic en los tres puntos (...) del evento y selecciona Incrustar en sitio web (Embed).
4. Se abrirá la ventana del generador de código interactivo.

Paso 2: Elige el formato de visualización

1. En la parte superior de la ventana, selecciona una de las tres opciones:

- En línea (Inline): Para incrustar el calendario dentro del diseño de la página.

- Ventana emergente (Popup): Para abrirlo al hacer clic en un enlace o botón existente.

- Botón flotante (Floating Button): Para mantener un botón visible en la esquina inferior.

Paso 3: Personaliza la apariencia y el tema

1. Elige el tema de color:

- Tema del sistema: Se adapta automáticamente a las preferencias de luz/oscuridad del visitante.

- Modo Claro (Light): Fondo blanco permanente.

- Modo Oscuro (Dark): Fondo oscuro permanente.

1. Puedes ajustar si deseas ocultar o mostrar los detalles del evento (foto de perfil, descripción) para dejar únicamente el calendario limpio.

Paso 4: Copia el fragmento de código generado

1. En la parte inferior, verás el bloque de código HTML/JavaScript generado automáticamente.
2. Haz clic en el botón azul Copiar código.

5. Instrucciones específicas según tu plataforma web

A. Cómo insertar en WordPress (Gutenberg / Elementor)

1. Editor Gutenberg (Bloques):

- Abre la página o entrada donde deseas ubicar el calendario.

- Agrega un bloque de tipo HTML Personalizado (Custom HTML).

- Pega el código copiado de WaclisCAL dentro del bloque.

- Haz clic en Actualizar o Publicar.

1. Elementor:

- Arrastra el widget HTML al contenedor deseado de tu maquetación.

- Pega el código en el área de contenido del widget.

- Guarda los cambios de la página.

B. Cómo insertar en Shopify

1. En tu panel de Shopify, ve a Tienda online > Páginas.
2. Haz clic en la página donde deseas el calendario (ejemplo: "Reservar Turno en Tienda").
3. En la barra de herramientas del editor de texto enriquecido, haz clic en el ícono Mostrar HTML (>).
4. Pega el código de WaclisCAL al final del contenido.
5. Haz clic en Guardar.

C. Cómo insertar en HTML plano o sitios web a medida

1. Abre el archivo .html de tu página en tu editor de código.
2. Pega el fragmento de código de WaclisCAL exactamente en la sección donde deseas que aparezca el calendario (dentro del elemento
   contenedor correspondiente).
3. Sube el archivo a tu servidor web.

---

6. Qué verá la persona que reserva

El usuario navega con absoluta naturalidad:

• El calendario se adapta al ancho disponible de tu contenedor web de forma totalmente responsive (adaptada a pantallas grandes y móviles).
• No se muestran barras de desplazamiento (scrollbars) dobles molestas.
• Tras completar la reserva, el cliente permanece en tu sitio web visualizando el comprobante de confirmación.

---

7. Qué sucede después

1. Gestión unificada: Las citas reservadas desde tu web ingresan instantáneamente a tu panel de WaclisCAL y a tu Google Calendar exactamente igual que las reservas realizadas por enlace directo.
2. Actualizaciones sin tocar código: Si en el futuro cambias tus horarios de atención o el precio del servicio en WaclisCAL, el calendario incrustado en tu web se actualiza automáticamente sin que tengas que volver a editar tu sitio.

---

8. Problemas frecuentes

El calendario aparece con un tamaño muy pequeño o cortado

• Causa: El contenedor de tu sitio web (por ejemplo, una columna muy estrecha en Elementor o WordPress) tiene un ancho fijo insuficiente.
• Solución: Ubica el bloque HTML en una sección de ancho completo (Full Width) o define una altura mínima de al menos 650 píxeles (min-height: 650px) en el estilo del contenedor.

En dispositivos móviles el calendario se sale de la pantalla

• Causa: Tu tema de WordPress o plantilla web fuerza anchos fijos en píxeles.
• Solución: Utiliza el código embebido estándar de WaclisCAL, el cual incluye estilos responsivos automáticos con width: 100%.

---

9. Buenas prácticas

• Crea una página dedicada: Dedica una URL limpia en tu web como tuempresa.com/reservar o tuempresa.com/turnos para que sea fácil de recordar y compartir en campañas.
• Evita saturar la página con otros elementos: Si colocas el calendario en línea, elimina barras laterales con banners distractores para que el usuario se enfoque en concretar su cita.
• Prueba la navegación en tu celular: Abre tu sitio web desde tu smartphone y verifica que el calendario cargue rápido y se opere cómodamente con el pulgar.

---

10. Artículos relacionados

• Personaliza los colores de tu página de reserva con la identidad de tu marca
• Cómo ve tu cliente la página de reservas y cómo reservar en 3 simples pasos
• Qué sucede después de reservar: Pantalla de confirmación y guardado en el calendario del cliente