Cómo añadir el Widget de reservas de Schedito para Webflow
Webflow encaja especialmente bien con la integración en tres partes del widget de Schedito. Carga una vez la hoja de estilos de Schedito, carga una vez el JavaScript y después coloca el DIV del widget específico del calendario exactamente donde debe aparecer la interfaz de reservas.
Esta guía muestra la configuración recomendada utilizando Webflow Custom Code para los recursos compartidos y un elemento Code Embed para el propio calendario de reservas.
Antes de abrir Webflow
Un calendario de Schedito configurado
Configura los servicios, recursos y la disponibilidad que deberían poder reservar los clientes.
Acceso de edición a Webflow
Necesitas acceso al proyecto Webflow y a la función de código personalizado disponible para el sitio o la página.
Los tres elementos de Schedito
Abre el código del widget en Schedito y prepara para copiar el enlace CSS, el script JavaScript y el DIV HTML específico del calendario.
1. Mantén separados los tres elementos de integración
El panel de Schedito proporciona tres fragmentos de código frontend:
Enlace CSS — proporciona los estilos del widget.
Script JavaScript — inicializa y ejecuta los widgets de Schedito.
DIV del widget — identifica la organización y el calendario público de reservas y marca la posición donde debe renderizarse ese calendario.
Webflow nos permite colocar cada uno donde corresponde de forma natural. El CSS y JavaScript compartidos se cargan una sola vez, mientras cada ubicación de reservas recibe su propio DIV específico del calendario.
Enlace CSS de Schedito
JavaScript de Schedito
DIV del widget específico del calendario
2. Añade el enlace CSS de Schedito al código Head de Webflow
Desde tu panel de Schedito, copia el CSS <link>.
Si Schedito puede utilizarse en varias páginas, añádelo al Código personalizado Head para que la hoja de estilos esté disponible en todo el sitio.
Si Schedito solo se necesita en una página, puedes utilizar en su lugar la sección de código personalizado Head de esa página.
No copies la hoja de estilos en cada Code Embed individual. Una sola hoja de estilos con el alcance correcto es suficiente.
3. Añade el JavaScript de Schedito al código Footer
Copia el JavaScript <script> desde el panel de Schedito.
Para la configuración normal de Schedito, colócalo en el código Footerde Webflow, que lo inserta antes de la etiqueta de cierre </body> después del contenido de la página.
Como con la hoja de estilos, elige el alcance correcto: para todo el sitio si Schedito se utiliza en varias partes del sitio web, o específico de una página si las reservas solo existen en páginas seleccionadas.
Normalmente el script debe cargarse una sola vez, no repetirse dentro de cada calendario incrustado.
4. Coloca el DIV del calendario en un Code Embed
Abre la página donde deben aparecer las reservas y añade un elemento Webflow Code Embed en la posición adecuada del diseño.
Desde Schedito, copia únicamente el DIV HTML del widget específico del calendario y pégalo en el editor Code Embed.
El DIV contiene valores como data-organization-id y la data-calendar-public-id. Utiliza los valores generados para el calendario que realmente quieras publicar.
Como el CSS y el JavaScript compartidos ya se cargan por separado, el contenido incrustado permanece pequeño y específico del calendario.
¿Deben cargarse los recursos de Schedito para todo el sitio o solo en una página?
Utiliza código personalizado para todo el sitio si Schedito aparece en varias páginas, varias páginas de servicios o diseños reutilizables. El CSS y JavaScript compartidos se cargan entonces una sola vez mediante la configuración global del sitio.
Utiliza código personalizado específico de página si Schedito solo existe en una o unas pocas páginas y no quieres cargar sus recursos en el resto.
En ambos casos, evita añadir repetidamente la misma hoja de estilos o JavaScript para cada DIV de calendario.
Uso de Schedito con Webflow CMS o componentes
Los Code Embed de Webflow pueden hacer referencia a valores dinámicos de elementos del CMS, propiedades de componentes, ajustes regionales y ajustes de página.
Esto permite patrones avanzados útiles cuando diseños de reserva similares necesitan valores de calendario distintos. Por ejemplo, un diseño reutilizable de servicio podría llegar a recibir un identificador de calendario desde contenido estructurado de Webflow, en lugar de requerir un contenido incrustado completamente separado y escrito a mano en cada página.
Para una primera instalación normal, mantenlo más sencillo: utiliza el DIV exacto copiado de Schedito. Introduce enlaces dinámicos solo cuando tengas una necesidad clara de contenido reutilizable y entiendas cómo se gestionan esos valores.
Empieza de forma sencilla
Configuración estándar
Copia el DIV exacto del calendario desde Schedito.
Configuración reutilizable avanzada
Utiliza el CMS de Webflow o propiedades de componentes para proporcionar dinámicamente determinados valores.
5. Publica y prueba todo el flujo de reserva
Comprueba que los recursos se carguen, que el calendario se renderice, que la disponibilidad sea correcta y que un cliente pueda completar realmente la reserva.
Publica y abre la página
Prueba el sitio realmente publicado. Algunos comportamientos del código personalizado se verifican mejor después de publicar que únicamente dentro del Designer.
Completa una reserva
Selecciona un servicio, una fecha y una hora y envía una reserva de prueba real. Verifica el resultado dentro de Schedito.
Comprueba los diseños adaptables
Prueba el Code Embed y los contenedores Webflow que lo rodean en anchuras de escritorio, tableta y móvil.
Widget de reservas para Webflow solución de problemas
Verifica las tres partes por separado: el enlace CSS de Schedito en el código Head, el JavaScript en el código Footer y el DIV correcto del calendario en el Code Embed.
Comprueba con las herramientas de desarrollo del navegador si hay solicitudes de recursos fallidas, errores de JavaScript o solicitudes de API que no se completen correctamente.
Webflow no siempre ejecuta los scripts incrustados exactamente como se ejecutarán en el sitio publicado. Publica el proyecto y prueba la página pública real antes de concluir que la integración está rota.
Probablemente la integración con Webflow funciona. Comprueba la configuración de Schedito: servicio, recursos necesarios, disponibilidad recurrente, excepciones para fechas concretas, reservas existentes, capacidad y compromisos de calendarios externos conectados.
Comprueba tanto el código personalizado para todo el sitio como el código a nivel de página. Si el mismo script u hoja de estilos de Schedito existe en ambos lugares, elimina el duplicado innecesario y mantenlo en el alcance que corresponda a la estructura de tu sitio.
Comprueba el propio Code Embed y sus contenedores Webflow padres. Los límites de anchura, las columnas de cuadrícula, los ajustes flex, el relleno y las reglas de overflow del diseño que lo rodea pueden restringir el widget incluso cuando Schedito responde correctamente.
Configura la presentación clara u oscura y los colores compatibles en Schedito. Comprueba también si algún CSS personalizado general de Webflow está afectando involuntariamente a botones, controles de formulario u otros elementos del widget.
Mantén Webflow centrado en el diseño y Schedito en las reservas
Cuando la integración funcione, sigue gestionando en Schedito los servicios, recursos, disponibilidad, capacidad, sincronización de calendarios y estilo del widget.
Empezar gratisResumen de reservas en Webflow
Explorar todas las guías de Schedito · Personalización del widget · Sincronización con Google Calendar