Cómo añadir Koalendar a un sitio web de Unbounce
Añade una programación sin complicaciones a cualquier página de destino de Unbounce con un simple copiar y pegar. Sin integraciones adicionales: todo lo que necesitas ya está en Koalendar y Unbounce.
📑 Menú
- 📋 Paso 1: copia tu código de inserción.
- 📝 Paso 2: pégalo en Unbounce.
- 🛠️ Solución de problemas
- 🤔 ¿Qué estilo de incrustación deberías utilizar?
📋 Paso 1: copia tu código de inserción.
- En el panel de control de Koalendar, haz clic en Compartir junto a la página de reserva que deseas incrustar.
- Selecciona Añadir al sitio web.
- Elige un estilo de inserción y haz clic en Copiar código.
| Estilo incrustado | Qué hace |
|---|---|
| Inline Embed 🖥️ | Muestra el calendario de reservas directamente en la página de destino. |
| Widget emergente 📍 | Añade un botón flotante «Reservar ahora» que abre una ventana emergente con el calendario. |
| Ventana emergente al hacer clic 🔗 | Convierte cualquier enlace o botón en un calendario emergente. |
💡 Personaliza los colores, el texto y la posición antes de copiarlo para que coincida con tu diseño de Unbounce.
📝 Paso 2: pégalo en Unbounce.
Opción A: incrustación en línea o ventana emergente al hacer clic 🔧
- En el generador de páginas de Unbounce, arrastra un bloque HTML a la página donde quieras que aparezca el calendario (o el activador emergente).
- Haga doble clic en el bloque para abrir el editor HTML personalizado.
- Pega el código Koalendar que has copiado.
- Guarde el código y, a continuación, obtenga una vista previa o publique su página.
Opción B: widget emergente (botón flotante) 📌
- Abre tu página en el generador de páginas de Unbounce y haz clic en la pestaña Javascripts (parte inferior izquierda).
- Haga clic en Añadir script → asígnele un nombre como «Widget Koalendar».
- Pega el código del widget Koalendar y configura la ubicación en «Antes de la etiqueta de cierre del cuerpo».
- Hecho → Vista previa o Publicar. El botón flotante aparece ahora en todas las variantes de esa página.
📝 ¿Necesitas un widget para todo el sitio? Añade el mismo script a cada página de destino o duplica la página una vez instalado el widget.
🛠️ Solución de problemas
| Problema | Solución rápida |
| El calendario no se carga en la vista previa. | Publica la página: algunos scripts solo se ejecutan en la URL activa. |
| Widget desaparecido después de pegar | Asegúrate de que la ubicación del script sea «Before Body End Tag» (antes de la etiqueta de cierre del cuerpo, no «Head»). |
| El enlace emergente se muestra pero no se abre. | Confirma que tanto el fragmento del enlace como el script de Koalendar se encuentran en la misma página. |
| El estilo parece apretado. | Aumenta el ancho/alto del bloque HTML o ajusta el relleno en la configuración de inserción de Koalendar. |
🤔 ¿Qué estilo de incrustación deberías utilizar?
| Objetivo | El mejor estilo |
| Sección dedicada a las reservas | Inline Embed 🖥️ |
| CTA siempre visible | Widget emergente 📍 |
| Añadir programación a un botón existente | Ventana emergente al hacer clic 🔗 |
| Enlace rápido fuera de la página | Enlace directo ↗️ |