Cómo añadir el widget de reservas de Schedito a WordPress
No necesitas un plugin de WordPress específico de Schedito. Configura el calendario de reservas en Schedito, abre su código de widget y añade a WordPress los tres elementos de integración: la hoja de estilos compartida, el JavaScript compartido y el contenedor del widget específico del calendario.
Esta guía utiliza el editor de bloques nativo de WordPress. El mismo principio de integración también se aplica a constructores de páginas que proporcionan funciones de HTML, inserción o código personalizado a nivel del sitio.
Antes de abrir WordPress
Un calendario de Schedito que funcione
Configura los servicios, recursos y la disponibilidad que quieres que puedan reservar los visitantes de WordPress antes de publicar el widget.
Acceso de edición a WordPress
Necesitas permiso para editar la página de destino y, si el CSS o el JavaScript deben añadirse a nivel del sitio, acceso a un método adecuado de gestión del código frontend.
El código de tu widget de Schedito
Abre el código del widget en el panel de Schedito. Schedito proporciona tres elementos separados que puedes copiar: el enlace CSS, el script JavaScript y el contenedor HTML del widget específico del calendario.
1. Copia los tres elementos de integración de Schedito
Abre el código del widget del calendario de reservas en tu panel de Schedito. La integración se presenta intencionadamente como tres elementos separados:
Enlace CSS — carga los estilos del widget de Schedito.
Script JavaScript — carga e inicializa la funcionalidad de reservas.
Contenedor del widget — identifica la organización y el calendario público de reservas y marca la posición en la que debe renderizarse la interfaz.
Mantén separados estos tres elementos. Normalmente basta con cargar una sola vez la hoja de estilos y el JavaScript, mientras puedes colocar uno o varios contenedores de widget específicos de calendario donde quieras que aparezcan las reservas.
Los tres elementos en Schedito
1. Enlace CSS
Cargar una vez
2. Script JavaScript
Cargar una vez
3. DIV del widget
Colocar donde deba mostrarse este calendario
2. Coloca el DIV del widget en un bloque HTML personalizado
Abre la página de WordPress donde deberían poder reservar los clientes, por ejemplo una página Reservar ahora, Citas, Contacto o una página específica de un servicio.
Añade un bloque HTML personalizado . También puedes escribir /html en un bloque nuevo para encontrarlo rápidamente.
Desde el panel de Schedito, copia únicamente el contenedor HTML del widget y pégalo en el bloque. Es el elemento específico del calendario que contiene valores como data-organization-id y la data-calendar-public-id.
No dupliques el enlace CSS y el script JavaScript de Schedito dentro de cada bloque de widget. Añádelos por separado como recursos frontend compartidos.
3. Carga una sola vez el CSS y JavaScript de Schedito
Vuelve al código del widget en el panel de Schedito y copia los dos elementos restantes: el CSS <link> y el JavaScript <script>.
Son recursos frontend compartidos. Normalmente solo deben cargarse una vez por página o, más habitualmente, una sola vez para las páginas del sitio web donde pueda utilizarse Schedito. No los repitas para cada widget de calendario.
Si tu configuración de WordPress o tu constructor de páginas ofrece un área global de código personalizado, puede ser un lugar adecuado para estos dos elementos. En un tema de WordPress mantenido profesionalmente, un desarrollador puede cargar la hoja de estilos y el script correspondientes mediante el mecanismo normal de enqueue del frontend de WordPress.
Si tienes varios calendarios de Schedito en el mismo sitio web, pueden compartir el mismo CSS y JavaScript cargados. Cada calendario solo necesita su propio <div>.
Estructura recomendada para WordPress
Enlace CSS — una vez
Script JavaScript — una vez
Bloque HTML personalizado
DIV de Schedito específico del calendario
Una nota sobre los permisos de WordPress y JavaScript
Las versiones recientes de WordPress permiten contenido HTML personalizado mediante el editor de bloques, pero JavaScript y otros tipos de marcado potencialmente inseguros dependen de los permisos del usuario. WordPress puede sanear el contenido no permitido cuando un usuario sin los permisos necesarios guarda la página.
En Schedito, normalmente tampoco necesitas ponerlo todo dentro del bloque de la página. Mantén el DIV específico del calendario en la página y carga una sola vez el CSS y el JavaScript compartidos mediante un mecanismo adecuado a nivel del sitio.
Si un script o una hoja de estilos desaparecen después de guardar, no los pegues repetidamente en la página. Comprueba tus permisos de WordPress y utiliza el método aprobado del sitio para cargar recursos frontend.
4. Publica y prueba como un cliente
No basta con que una página se vea correctamente en el editor de WordPress. Prueba la página final, la disponibilidad y el envío de reservas.
Abre la página pública
Prueba el frontend publicado, no solo la vista previa del editor. Confirma que la interfaz de Schedito se cargue realmente para un visitante normal.
Completa una reserva
Selecciona un servicio, una fecha y una hora y envía una reserva de prueba real. Verifica la reserva resultante dentro de Schedito.
Comprueba el diseño adaptable
Prueba anchuras de escritorio y móvil y verifica que tu tema de WordPress no limite, oculte ni distorsione el widget de reservas.
Widget de reservas para WordPress solución de problemas
Comprueba la integración como tres elementos independientes. Primero verifica que esté presente el DIV de Schedito específico del calendario y que contenga los identificadores correctos de organización y calendario público. Después confirma que el CSS y el JavaScript de Schedito se carguen realmente en la página pública.
Utiliza las herramientas de desarrollo del navegador para comprobar solicitudes de CSS o JavaScript fallidas, errores de JavaScript, restricciones de seguridad de contenido o marcado modificado por WordPress u otro plugin.
Si WordPress elimina el propio DIV del widget, comprueba el marcado HTML y los permisos del usuario. Si elimina un script u otro marcado ejecutable, normalmente se trata de un problema de permisos o de saneamiento del contenido.
La configuración recomendada de Schedito evita insertar repetidamente esos scripts dentro del contenido: mantén el DIV del widget en la página y carga una sola vez el CSS y el JavaScript compartidos mediante el método de integración frontend aprobado para el sitio.
Probablemente la integración con WordPress funciona. Comprueba Schedito: verifica el servicio, los recursos necesarios, la disponibilidad recurrente, las excepciones para fechas concretas, las reservas existentes, la capacidad y cualquier compromiso de calendario externo conectado.
Comprueba las reglas de anchura, desbordamiento, relleno y diseño del bloque de WordPress o contenedor del tema que lo contiene. Evita colocar la interfaz de reservas en una columna de ancho fijo innecesariamente estrecha.
Si el widget se carga correctamente fuera de ese contenedor, es probable que el problema lo cause el CSS de diseño de WordPress que lo rodea y no la configuración de las reservas.
Utiliza la configuración de estilos del widget de Schedito para seleccionar una presentación clara u oscura adecuada y ajustar los colores y propiedades visuales compatibles.
Comprueba también si tu tema de WordPress aplica reglas CSS generales a botones, formularios u otros elementos que interfieran con la interfaz de reservas.
Después de cambiar el marcado de integración o los recursos del frontend, limpia las cachés relevantes de WordPress, CDN y navegador. La optimización de JavaScript o la carga diferida también pueden afectar al código frontend externo, así que excluye los recursos necesarios de Schedito si tu configuración de optimización impide que se ejecuten correctamente.
Tu sitio WordPress es solo la capa de presentación
Cuando el widget funcione, sigue configurando servicios, disponibilidad, sincronización de calendarios, capacidad y estilo en Schedito, en lugar de reconstruir esas reglas dentro de WordPress.
Empezar gratisResumen de reservas en WordPress
Explorar todas las guías de Schedito · Personalización del widget · Sincronización con Google Calendar