Cómo integrar Koalendar en Webflow
Añade la reserva instantánea a cualquier proyecto de Webflow: solo tienes que copiar el código de inserción de Koalendar → pegarlo en Webflow → publicar. Sin plugins ni claves API.
📑 Menú
- Paso 1: copia tu código de Koalendar.
- Paso 2: pégalo en Webflow.
- Solución de problemas
- ¿Qué estilo debería elegir?
📋 Paso 1: copia tu código de Koalendar.
- En el panel de control de Koalendar, haz clic en Compartir junto a la página de reserva que deseas incrustar.
- Seleccione Añadir al sitio web.
- Elige un estilo de inserción y haz clic en Copiar código.
| Estilo incrustado | Lo que ven los visitantes |
|---|---|
| Inline Embed 🖥️ | Calendario completo mostrado directamente en la página. |
| Widget emergente 📍 | Botón flotante que abre tu calendario en una ventana emergente. |
| Texto emergente/Botón 🔗 | Cualquier enlace o botón de tu página abre el calendario en una ventana emergente. |
➕ ¿Solo quieres un enlace normal? Omite la incrustación, copia la URL para compartir de Koalendar y crea un hipervínculo en cualquier texto, imagen o botón para abrir tu agenda en una nueva pestaña.
🎨 Consejo de diseño: personaliza los colores, el texto y la posición en Koalendar antes de copiarlo para que todo coincida con tu estilo Webflow.
📝 Paso 2: pégalo en Webflow.
A. Texto/botón incrustado o emergente (elemento incrustado)
- En Webflow Designer, abre la página donde quieres el calendario o el activador.
- Arrastra un elemento«Incrustar código » desde + Añadir → Elementos hasta la posición deseada.
- Haz clic en «Editar código personalizado » y pega tu código de Koalendar.
- Guardar y cerrar → Publicar tu sitio web.
B. Widget emergente (botón flotante en todo el sitio)
- Ve a Configuración del proyecto → Código personalizado → Código del pie de página.
- Pega el script del widget Koalendar.
- Guardar cambios → Publicar.
⏳ Aviso: el código personalizado solo se ejecuta en el sitio publicado, no en la vista previa del Diseñador.
🛠️ Solución de problemas
| Problema | Solución rápida |
| El calendario o el widget no aparecen en Designer. | Publique el sitio y vea la URL en vivo; los scripts no se ejecutan en el lienzo del Diseñador. |
| El widget emergente no se muestra. | Confirma que el script está en el código del pie de página (o en un elemento incrustado) y vuelve a publicarlo. |
| Aparece el texto emergente/enlace del botón, pero no se abre. | Asegúrate de que tanto el fragmento de código del disparador como el script de Koalendar estén en la misma página. |
| La altura del calendario en línea parece incorrecta. | Cambia el tamaño del elemento incrustado o establece una altura fija en Koalendar antes de copiarlo. |
🤔 ¿Qué estilo debería elegir?
| Objetivo | El mejor estilo |
| Sección dedicada a las reservas | Inline Embed 🖥️ |
| Llamada a la acción en todo el sitio web | Widget emergente 📍 |
| Añadir programación a una CTA existente | Texto emergente/Botón 🔗 |
| Enlace rápido fuera de la página | Enlace simple a la URL de tu Koalendar |