Cómo añadir el Widget de reservas de Schedito para un sitio web personalizado
Un sitio web personalizado puede utilizar Schedito directamente mediante tres elementos frontend: un enlace CSS compartido, un script JavaScript compartido y un DIV HTML específico del calendario.
Carga el CSS y el JavaScript una sola vez con el alcance adecuado de aplicación o página y coloca después un DIV de widget de Schedito donde deba renderizarse un calendario de reservas.
Antes de editar tu sitio web
Un calendario de Schedito configurado
Configura los servicios, recursos y la disponibilidad que deberían poder reservar los clientes.
Acceso al código de tu frontend
Necesitas poder añadir una hoja de estilos, JavaScript y marcado HTML al sitio web o aplicación.
Los tres fragmentos de Schedito
Abre el área de integración en Schedito y prepara para copiar el enlace CSS actual, el script JavaScript y el DIV específico del calendario.
1. Comprende la integración en tres partes
El panel de Schedito proporciona tres elementos independientes:
Enlace CSS — proporciona el estilo 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 define la ubicación de renderizado.
El CSS y el JavaScript son recursos compartidos. El DIV es específico del calendario que se muestra.
CSS de Schedito — una vez
DIV específico del calendario
JavaScript de Schedito — una vez
2. Carga una sola vez la hoja de estilos de Schedito
Copia el CSS <link> que muestra tu panel de Schedito y añádela al documento <head> o a la capa normal de carga de hojas de estilo de tu aplicación.
Si todo el sitio puede contener widgets de Schedito, cárgala globalmente. Si las reservas solo existen en un bundle o ruta específicos, limita allí su alcance.
No añadas una nueva copia de la misma hoja de estilos para cada DIV de calendario.
3. Coloca el DIV del widget específico del calendario
Copia el DIV HTML del calendario que quieras publicar e insértalo en la plantilla, componente o página donde deba aparecer la interfaz de reservas.
El marcado contiene valores como data-organization-id y la data-calendar-public-id. Utiliza los valores exactos generados por Schedito para ese calendario.
Si lo necesitas, también puedes utilizar atributos opcionales compatibles, como el idioma del widget.
Ubicación del calendario
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Utiliza los valores exactos proporcionados por tu panel de Schedito.
4. Carga una sola vez el JavaScript de Schedito
Copia el elemento actual <script> que muestra Schedito y añádelo junto con tus scripts frontend habituales, normalmente cerca del final del documento antes de </body>.
Si existen varios calendarios en la misma página o en toda la aplicación, normalmente comparten este único script.
Evita añadir etiquetas de script idénticas junto a cada DIV del widget.
Uso de varios calendarios de Schedito
Carga una sola vez el CSS y el JavaScript compartidos y añade después un DIV de widget diferente para cada calendario o ubicación de reservas.
Esto funciona tanto si aparecen varios calendarios en una misma página como si aparecen calendarios distintos en páginas separadas.
Mantén los identificadores de organización y calendario específicos de cada DIV. No dupliques innecesariamente las etiquetas de recursos compartidos.
Compartido
JavaScript de Schedito
Por calendario
Calendario B → DIV B
Calendario C → DIV C
Uso de Schedito en frontends dinámicos o de página única
Si tu aplicación renderiza el DIV de Schedito como parte del documento HTML inicial, normalmente la integración estándar es suficiente.
Si el contenedor del widget se inserta más tarde mediante enrutamiento del lado del cliente, hidratación u otro mecanismo de renderizado dinámico, comprueba que la inicialización de Schedito se ejecute después de que exista el contenedor.
No des por hecho que inyectar repetidamente el script de Schedito sea la solución correcta. Mantén una única carga del script compartido y verifica el comportamiento de inicialización de la versión actual del widget dentro del ciclo de vida de tu aplicación.
5. Prueba todo el flujo de reserva
Verifica el renderizado, la disponibilidad, la creación de la reserva y el comportamiento adaptable, no solo que se haya cargado el JavaScript.
Carga la página pública
Confirma que la hoja de estilos y el script se carguen correctamente y que el calendario sustituya el DIV del widget en el sitio web público real.
Completa una reserva de prueba
Selecciona un servicio, una fecha y una hora y completa una reserva de prueba real. Verifica el registro resultante en Schedito.
Comprueba los contenedores adaptables
Prueba el diseño padre en anchuras de escritorio, tableta y móvil. Asegúrate de que tu propio CSS no restrinja innecesariamente el widget.
Widget de reservas para sitios web personalizados solución de problemas
Comprueba por separado los tres elementos: la hoja de estilos de Schedito, el JavaScript y el DIV específico del calendario.
Utiliza las herramientas de desarrollo del navegador para buscar solicitudes de recursos fallidas, errores de JavaScript y llamadas de API fallidas.
Comprueba los valores de data-organization-id y la data-calendar-public-id con el fragmento actual mostrado en Schedito.
Comprueba las plantillas compartidas, los bundles y los componentes individuales. Mantén los recursos comunes en un único alcance adecuado y elimina las inclusiones duplicadas.
Probablemente la integración frontend funciona. Comprueba la configuración de Schedito: servicio, recursos necesarios, disponibilidad recurrente, excepciones, reservas existentes, capacidad y calendarios externos conectados.
Inspecciona tus propios contenedores padre, reglas de grid o flex, max-width, relleno y ajustes de overflow. El diseño de la aplicación que lo rodea puede restringir un widget que, por sí mismo, es adaptable.
Puede que tu aplicación inserte el DIV del widget después de que Schedito se haya inicializado. Revisa cuándo entra el contenedor en el DOM y cómo debe activarse la inicialización del widget en el ciclo de vida de tu frontend.
Sigue construyendo tu aplicación. Deja que Schedito gestione las reservas.
Una vez integrado el widget, sigue gestionando en Schedito los servicios, recursos, disponibilidad, capacidad, sincronización de calendarios y estilo del widget.
Empezar gratisResumen de reservas para sitios web personalizados
Explorar todas las guías de Schedito · Personalización del widget · Sincronización con Google Calendar