Cómo añadir el Widget de reservas de Schedito para Wix
Puedes añadir Schedito a un sitio Wix existente sin trasladar tus servicios, disponibilidad o reservas a Wix. La integración más sencilla con Wix utiliza un elemento Embed HTML que contiene los tres elementos del widget de Schedito proporcionados por tu panel.
Wix gestiona el HTML incrustado de forma diferente a un sitio web convencional: el código se ejecuta dentro de un iframe aislado. Esta guía explica esa diferencia específica de Wix y muestra cómo integrar Schedito sin confundirlo con la integración normal a nivel del sitio utilizada en plataformas como WordPress.
Antes de abrir el editor de Wix
Un calendario de Schedito configurado
Configura los servicios, recursos y la disponibilidad que quieres que puedan reservar los visitantes de Wix antes de incrustar el widget.
Acceso a tu editor de Wix
Necesitas permiso para editar la página donde debe aparecer la interfaz de reservas y añadir un elemento HTML Embed.
Los tres elementos de código de Schedito
Abre el código del widget en Schedito. Ten preparados para copiar el enlace CSS, el script JavaScript y el DIV del widget específico del calendario.
1. Entiende por qué Wix es diferente
En un sitio web convencional, nuestra integración recomendada de Schedito consiste en cargar una sola vez el CSS y el JavaScript y después colocar DIV de widget específicos del calendario donde sean necesarios.
El elemento estándar de Wix Embed HTML se comporta de forma diferente. Wix coloca el código incrustado dentro de un iframe con sandbox. El código cargado en la página Wix que lo rodea no pasa automáticamente a formar parte de ese iframe, y el código dentro del iframe no puede acceder directamente al resto de la página.
Por ese motivo, la instalación más sencilla en Wix es una excepción intencionada: el enlace CSS, el script JavaScript y el DIV del widget deben existir todos dentro del mismo iframe incrustado.
Integración normal en un sitio web
JavaScript — una vez
DIV del widget — donde sea necesario
Wix Embed HTML
Enlace CSS
Script JavaScript
DIV del widget específico del calendario
2. Añade un elemento HTML incrustado a la página Wix
Abre la página Wix donde deberían poder reservar los clientes, por ejemplo una página de reservas, de servicio, de consulta o de evento.
Añade un elemento de HTML o código incrustado mediante el editor de Wix. Wix Editor y Wix Studio utilizan etiquetas ligeramente diferentes, pero ambos ofrecen un elemento para incrustar código HTML externo.
Coloca el elemento donde debe aparecer la interfaz de reservas y dale suficiente espacio horizontal y vertical para el calendario.
3. Añade el los tres elementos de Schedito dentro del contenido incrustado
Abre el código del widget en el panel de Schedito. Copia el enlace CSS, el script JavaScript y el DIV HTML del widget en el campo de código incrustado de Wix.
Un orden práctico es:
1. Enlace CSS
2. DIV del widget específico del calendario
3. Script JavaScript
Utiliza exactamente los fragmentos actuales que muestra tu panel de Schedito. No sustituyas el ID de organización, el ID público del calendario ni las URL de los recursos por valores copiados de otro calendario o de una guía antigua.
Esta repetición del CSS y JavaScript es específica de la integración de Wix basada en iframe. No es nuestra recomendación general para sitios web convencionales.
Dentro del elemento Wix Embed HTML
Da al iframe de reservas espacio suficiente
El elemento HTML de Wix tiene sus propias dimensiones. El widget de reservas puede adaptarse al ancho disponible dentro de ese elemento, pero la página Wix que lo rodea sigue controlando el tamaño total del iframe.
Haz que el elemento sea lo bastante ancho para el diseño de tu página y lo bastante alto para todo el flujo de reserva. Si el elemento es demasiado bajo, los pasos posteriores del calendario pueden aparecer recortados o requerir desplazamiento dentro del iframe.
Recuerda también que el iframe está visualmente aislado. El CSS de tu sitio Wix no aplica automáticamente estilos al contenido de Schedito que hay dentro. Utiliza en su lugar el tema claro u oscuro de Schedito y los ajustes de personalización del widget.
Integraciones avanzadas con Wix: Custom Elements
Wix también admite Custom Elements basados en Web Components estándar. Pueden ofrecer un enfoque más integrado que el iframe HTML normal y resultan útiles cuando se necesita una integración más estrecha con la página o componentes reutilizables.
Actualmente Schedito no necesita ni proporciona un Custom Element específico para Wix en la instalación normal descrita en esta guía. Por tanto, crear uno pertenece a una integración avanzada para desarrolladores y no al proceso estándar de copiar y pegar.
Si necesitas muchos widgets de Schedito en un único sitio Wix o quieres un comportamiento más específico de Wix, puede valer la pena considerar un wrapper reutilizable basado en Custom Element.
¿Qué opción debo utilizar?
Uno o unos pocos widgets de reservas
Utiliza Embed HTML. Es el enfoque más sencillo.
Integración avanzada o muchos widgets reutilizables
Considera una integración mediante un Wix Custom Element desarrollado a medida.
4. Publica y prueba todo el flujo de reserva
Comprueba el propio widget, las dimensiones del iframe y la reserva resultante, no solo que aparezca un recuadro vacío en la página.
Prueba el sitio publicado
Prueba la página Wix publicada en lugar de confiar únicamente en el editor o la vista previa. Confirma que el widget de Schedito se cargue por completo.
Completa una reserva de prueba real
Selecciona un servicio, una fecha y una hora y completa el proceso. Verifica la reserva resultante en tu panel de Schedito.
Comprueba escritorio y móvil
Verifica tanto el diseño del widget como las dimensiones del elemento incrustado de Wix en los puntos de ruptura adaptables utilizados por tu sitio.
Widget de reservas para Wix solución de problemas
Comprueba los tres elementos dentro del código incrustado de Wix: el enlace CSS actual de Schedito, el script JavaScript y el DIV del widget específico del calendario.
Verifica el ID de organización y el ID público del calendario y consulta las herramientas de desarrollo del navegador para detectar solicitudes de recursos o API fallidas.
Es lo esperado si el DIV está dentro de un HTML Embed normal de Wix. El contenido incrustado se ejecuta en su propio iframe, mientras que Wix Custom Code se ejecuta en la página que lo rodea. Los dos documentos están aislados.
Para la integración sencilla mediante iframe, coloca juntos dentro del propio contenido incrustado el enlace CSS, el script JavaScript y el DIV del widget.
Aumenta la altura del elemento HTML incrustado de Wix. El diseño padre de Wix controla las dimensiones del iframe, por lo que un widget de Schedito correctamente renderizado puede quedar recortado si su contenedor es demasiado bajo.
Probablemente la integración con Wix funciona. Comprueba la configuración de Schedito: servicio, recursos necesarios, disponibilidad recurrente, excepciones, reservas existentes, capacidad y compromisos de calendarios externos conectados.
Es lo esperado con un iframe HTML. El documento Schedito incrustado está aislado de los estilos de la página Wix padre.
Configura directamente en Schedito el tema claro u oscuro, los colores y las demás propiedades visuales compatibles.
Comprueba ambos lados de la integración: Schedito responde al ancho disponible dentro del iframe, mientras Wix controla la anchura y la altura del elemento incrustado. Ajusta el elemento de Wix en el punto de ruptura correspondiente y vuelve a probar el sitio publicado.
Mantén Wix centrado en tu sitio web y Schedito en las reservas
Cuando el widget funcione, sigue gestionando en Schedito los servicios, recursos, disponibilidad, capacidad, sincronización de calendarios y estilo del widget.
Empezar gratisResumen de reservas en Wix
Explorar todas las guías de Schedito · Personalización del widget · Sincronización con Google Calendar