Come aggiungere il widget di prenotazione Schedito a Squarespace
Squarespace può utilizzare direttamente l'integrazione Schedito in tre parti: carica il foglio di stile condiviso una volta, il JavaScript una volta e inserisci il DIV specifico del calendario nella pagina in cui vuoi ricevere le prenotazioni.
Questa guida utilizza Header e Footer Code Injection per le risorse condivise e un Blocco Codice per il calendario.
Prima di aprire Squarespace
Un calendario Schedito configurato
Configura servizi, risorse e disponibilità che i clienti devono poter prenotare.
Un piano Squarespace con Code Injection
L'integrazione consigliata richiede Code Injection, disponibile nei piani attuali Core, Plus e Advanced e in alcuni piani legacy.
I tre elementi Schedito
Apri il codice widget in Schedito e prepara link CSS, script JavaScript e DIV specifico del calendario.
1. Mantieni separati i tre elementi Schedito
Il pannello Schedito fornisce tre elementi frontend:
Link CSS — fornisce lo stile.
Script JavaScript — carica e gestisce i widget.
DIV del widget — identifica organizzazione e calendario pubblico e definisce il punto di rendering.
In Squarespace CSS e JavaScript possono essere caricati una sola volta tramite Code Injection, mentre il DIV specifico appartiene al contenuto della pagina.
Link CSS Schedito — una volta
JavaScript Schedito — una volta
DIV specifico del calendario
2. Aggiungi il link CSS Schedito all'Header Code Injection
Copia il <link> CSS dal pannello Schedito.
Apri Code Injection in Squarespace e incolla il link nel campo Header. Il codice inserito lì viene aggiunto all'<head> delle pagine del sito.
Non duplicare il foglio di stile in ogni Blocco Codice di prenotazione.
3. Aggiungi il JavaScript Schedito al Footer Code Injection
Copia lo <script> JavaScript mostrato nel pannello Schedito.
Nel pannello Code Injection di Squarespace incollalo nel campo Footer.
In questo modo il JavaScript condiviso rimane fuori dai singoli Blocchi Codice ed è disponibile per i calendari presenti sul sito.
Caricalo una sola volta invece di copiarlo in ogni posizione di prenotazione.
4. Inserisci il DIV del calendario in un Blocco Codice
Apri la pagina Squarespace dove vuoi mostrare le prenotazioni e aggiungi un Blocco Codice nel punto desiderato.
Imposta il blocco come HTML e incolla soltanto il DIV specifico del calendario copiato da Schedito.
Il DIV contiene valori come data-organization-id e data-calendar-public-id. Utilizza quelli del calendario che vuoi pubblicare.
CSS e JavaScript sono già caricati separatamente, quindi il blocco rimane piccolo e specifico.
Controlla il tuo piano Squarespace
I Blocchi Codice possono contenere normale HTML anche nei piani correnti di base, quindi il DIV Schedito non è il problema.
La configurazione Schedito consigliata richiede però anche Code Injection per le risorse condivise. Squarespace la offre attualmente nei piani Core, Plus e Advanced e in alcuni piani legacy.
Se il tuo piano non espone Code Injection, effettua l'upgrade prima di utilizzare questa integrazione invece di cercare di aggirare la limitazione della piattaforma.
Utilizzare più calendari Schedito in Squarespace
Se più pagine devono offrire prenotazioni, mantieni link CSS e JavaScript condivisi in Code Injection una sola volta.
Aggiungi poi un Blocco Codice in ogni posizione e inserisci il DIV del calendario appropriato.
Una pagina servizi, una pagina consulenza e una pagina workshop possono quindi utilizzare calendari differenti senza ricaricare le stesse risorse frontend.
Condivisi una sola volta
Script JavaScript
Per ogni posizione
Pagina B → DIV calendario B
Pagina C → DIV calendario C
5. Pubblica e prova l'intero processo di prenotazione
Non fermarti quando compare il calendario. Verifica disponibilità reale e invio della prenotazione dal sito pubblico.
Apri la pagina pubblica
Prova la pagina Squarespace pubblica e verifica che CSS, JavaScript e DIV producano effettivamente il widget.
Completa una prenotazione
Scegli servizio, data e orario e completa una vera prenotazione di prova. Verifica poi il risultato in Schedito.
Controlla il mobile
Controlla desktop e mobile e verifica che sezione e blocco Squarespace forniscano al widget spazio sufficiente.
Risoluzione problemi del widget Squarespace
Controlla separatamente i tre elementi: link CSS nell'Header Code Injection, JavaScript nel Footer Code Injection e DIV specifico nel Blocco Codice.
Verifica anche organization ID e public calendar ID e controlla gli strumenti sviluppatore per richieste fallite.
Controlla il piano Squarespace. Code Injection è una funzionalità premium e non è disponibile nel piano Basic attuale.
Se il sito utilizza Basic, la configurazione Schedito consigliata richiede il passaggio a un piano che supporta Code Injection.
L'integrazione Squarespace probabilmente funziona. Controlla Schedito: servizio, risorse richieste, disponibilità ricorrente, eccezioni, prenotazioni esistenti, capacità e calendari esterni collegati.
Controlla se hai copiato le risorse condivise sia in Code Injection sia nei singoli Blocchi Codice. Mantieni CSS e JavaScript in Code Injection e rimuovi i duplicati dal contenuto.
Controlla sezione e layout Squarespace circostanti. Colonne, spaziatura e larghezza del contenitore possono limitare il widget anche quando Schedito è responsive.
Utilizza tema chiaro o scuro e colori supportati in Schedito. Controlla inoltre che eventuale Custom CSS Squarespace troppo generico non modifichi involontariamente form o pulsanti.
Squarespace si occupa del sito. Schedito delle prenotazioni.
Quando l'integrazione funziona, continua a gestire servizi, risorse, disponibilità, capacità, sincronizzazione calendari e stile in Schedito.
Inizia gratisPanoramica Squarespace
Tutte le guide Schedito · Personalizzazione widget · Sincronizzazione Google Calendar