Cómo añadir el Widget de reservas de Schedito para Squarespace
Squarespace puede utilizar la integración recomendada de Schedito en tres partes: cargar una sola vez la hoja de estilos compartida, cargar una sola vez el JavaScript y colocar el DIV del widget específico del calendario en la página donde deben reservar los clientes.
Esta guía utiliza Header y Footer Code Injection de Squarespace para los recursos compartidos de Schedito y un Code Block para el propio calendario de reservas.
Antes de abrir Squarespace
Un calendario de Schedito configurado
Configura los servicios, recursos y la disponibilidad que deberían poder reservar los clientes antes de publicar el widget.
Un plan de Squarespace con Code Injection
La integración recomendada requiere Squarespace Code Injection. Los planes actuales Core, Plus y Advanced lo admiten, junto con algunos planes antiguos.
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 específico del calendario.
1. Mantén separados los los tres elementos de Schedito separados
El panel de Schedito te proporciona tres fragmentos de código frontend:
Enlace CSS — proporciona el estilo del widget.
Script JavaScript — carga y ejecuta los widgets de Schedito.
DIV del widget — identifica la organización y el calendario público de reservas y marca dónde debe renderizarse ese calendario.
En Squarespace, el CSS y el JavaScript pueden cargarse una sola vez mediante Code Injection, mientras que el DIV específico del calendario pertenece al contenido de la página.
Enlace CSS de Schedito — una vez
JavaScript de Schedito — una vez
DIV del widget específico del calendario
2. Añade el Enlace CSS en Header Code Injection
Copia el CSS <link> desde tu panel de Schedito.
Abre Squarespace Code Injection y pega el enlace en el campo Header . El código colocado allí se añade al <head> de las páginas de tu sitio.
No copies la hoja de estilos en cada Code Block de reservas. Cargar una sola vez la hoja de estilos compartida de Schedito es una configuración más limpia.
3. Añade el JavaScript en Footer Code Injection
Copia el JavaScript <script> proporcionado por el panel de Schedito.
En el panel Code Injection de Squarespace, pégalo en el campo Footer .
Esto mantiene el JavaScript compartido de Schedito fuera de los bloques de reservas individuales y lo pone a disposición de los DIV de calendario renderizados en el sitio.
Cárgalo una sola vez en lugar de copiar el mismo script en cada ubicación de reservas.
4. Coloca el DIV del calendario en un Code Block
Abre la página de Squarespace donde deben reservar los clientes y añade un Code Block en la posición deseada.
Configura el bloque como HTML y pega únicamente el DIV del widget específico del calendario copiado de Schedito.
El DIV contiene valores como data-organization-id y la data-calendar-public-id. Asegúrate de utilizar los valores generados para el calendario que realmente quieras publicar.
Como el CSS y el JavaScript ya se cargan por separado, el Code Block permanece pequeño y específico de ese calendario.
Comprueba tu plan de Squarespace
Los Code Blocks de Squarespace pueden contener HTML normal en todos los planes actuales, por lo que colocar el propio DIV del widget de Schedito no es la parte limitante.
La configuración recomendada de Schedito también requiere Code Injection para el JavaScript y la hoja de estilos compartidos. Actualmente Squarespace ofrece Code Injection en los planes Core, Plus y Advanced y en determinados planes antiguos.
Si tu plan actual no muestra Code Injection, actualiza el plan de Squarespace antes de seguir este método de integración, en lugar de intentar eludir la restricción de la plataforma.
Uso de varios calendarios de Schedito en Squarespace
Si varias páginas de Squarespace necesitan reservas, mantén una sola vez el enlace CSS y el JavaScript compartidos de Schedito en Code Injection.
Después añade un Code Block separado donde deba aparecer cada calendario y pega el DIV propio de ese calendario.
Esto significa que una página de servicios, una página de consultas y una página de talleres pueden utilizar distintos calendarios de Schedito sin cargar repetidamente los mismos recursos frontend.
Compartido una sola vez
Script JavaScript
Por ubicación de reservas
Página B → DIV del calendario B
Página C → DIV del calendario C
5. Publica y prueba todo el flujo de reserva
No te detengas cuando el calendario sea visible. Verifica la disponibilidad real y completa una reserva desde el sitio web público.
Abre la página pública
Prueba la página activa de Squarespace. Confirma que el CSS, el JavaScript y el DIV del calendario se combinan en una interfaz de reservas funcional.
Completa una reserva
Selecciona un servicio, una fecha y una hora y completa una reserva de prueba real. Verifica el resultado en Schedito.
Comprueba el diseño móvil
Comprueba móvil además de escritorio. Asegúrate de que la sección y el bloque de Squarespace que rodean el widget proporcionen suficiente anchura útil.
Widget de reservas para Squarespace solución de problemas
Comprueba por separado las tres partes de la integración: el enlace CSS en Header Code Injection, el JavaScript en Footer Code Injection y el DIV específico del calendario en el Code Block.
Verifica también el ID de organización y el ID público del calendario e inspecciona las herramientas de desarrollo del navegador para detectar solicitudes de recursos o API fallidas.
Comprueba tu plan de facturación de Squarespace. Code Injection es una función premium y no está disponible en el plan Basic actual.
Si el sitio está en Basic, la integración recomendada de Schedito requiere actualizar a un plan compatible con Code Injection.
Probablemente la integración con Squarespace funciona. Comprueba Schedito: configuración del servicio, recursos necesarios, disponibilidad recurrente, excepciones para fechas concretas, reservas existentes, capacidad y calendarios externos conectados.
Comprueba si has copiado los recursos compartidos tanto en Code Injection como en Code Blocks individuales. Mantén el CSS y JavaScript en Code Injection y elimina las copias innecesarias del contenido de la página.
Comprueba la sección de Squarespace y el diseño del bloque que lo rodean. Las columnas, el espaciado y la anchura del contenedor pueden restringir el widget incluso cuando Schedito es adaptable.
Utiliza el tema claro u oscuro del widget de Schedito y los ajustes de color compatibles. Comprueba también si reglas generales de Squarespace Custom CSS están modificando involuntariamente controles de formulario, botones u otros elementos.
Mantén Squarespace centrado en tu sitio web 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 Squarespace
Explorar todas las guías de Schedito · Personalización del widget · Sincronización con Google Calendar