Come aggiungere il widget di prenotazione Schedito a Webflow
Webflow si abbina particolarmente bene all'integrazione Schedito in tre parti. Carica il foglio di stile una sola volta, carica il JavaScript una sola volta e inserisci il DIV specifico del calendario esattamente nel punto in cui vuoi mostrare la prenotazione.
Questa guida utilizza Webflow Custom Code per le risorse condivise e un elemento Code Embed per il calendario di prenotazione.
Prima di aprire Webflow
Un calendario Schedito configurato
Configura servizi, risorse e disponibilità che vuoi rendere prenotabili ai clienti.
Accesso al progetto Webflow
Devi poter modificare il progetto e utilizzare le funzionalità Custom Code disponibili per il sito o la pagina.
I tre elementi Schedito
Apri il codice widget in Schedito e prepara link CSS, script JavaScript e DIV HTML specifico del calendario.
1. Mantieni separati i tre elementi dell'integrazione
Il pannello Schedito fornisce tre elementi frontend:
Link CSS — fornisce lo stile del widget.
Script JavaScript — inizializza e gestisce i widget Schedito.
DIV del widget — identifica organizzazione e calendario pubblico e definisce dove deve apparire il calendario.
Webflow ci permette di posizionare ogni elemento nel posto corretto. CSS e JavaScript condivisi vengono caricati una sola volta, mentre ogni punto di prenotazione utilizza il proprio DIV specifico.
Link CSS Schedito
JavaScript Schedito
DIV specifico del calendario
2. Aggiungi il link CSS Schedito all'Head
Dal pannello Schedito copia il <link> CSS.
Se utilizzerai Schedito su più pagine, inseriscilo nell'Head custom code del sito.
Se Schedito viene utilizzato soltanto su una pagina, puoi inserirlo invece nel codice Head specifico di quella pagina.
Non duplicare il foglio di stile dentro ogni Code Embed. Una sola inclusione correttamente posizionata è sufficiente.
3. Aggiungi il JavaScript Schedito al Footer
Copia lo <script> JavaScript dal pannello Schedito.
Per la normale integrazione Schedito, inseriscilo nel Footer code di Webflow, che lo posiziona prima del tag di chiusura </body> dopo il contenuto della pagina.
Come per il CSS, scegli l'ambito corretto: globale se Schedito viene utilizzato in tutto il sito, oppure specifico per la pagina quando necessario.
Lo script normalmente deve essere caricato una sola volta.
4. Inserisci il DIV del calendario in un Code Embed
Apri la pagina nella quale vuoi mostrare le prenotazioni e aggiungi un elemento Code Embed nel punto appropriato del design.
Da Schedito copia soltanto il DIV HTML specifico del calendario e incollalo nell'editor Code Embed.
Il DIV contiene valori come data-organization-id e data-calendar-public-id. Utilizza quelli del calendario che vuoi effettivamente pubblicare.
Poiché CSS e JavaScript condivisi vengono già caricati separatamente, l'embed rimane piccolo e specifico per il calendario.
Risorse Schedito globali o specifiche della pagina?
Utilizza il custom code globale se Schedito appare su più pagine, pagine servizio o layout riutilizzabili.
Utilizza il custom code della singola pagina se Schedito è presente soltanto su una o poche pagine e non vuoi caricare le risorse altrove.
In entrambi i casi evita di duplicare lo stesso foglio di stile o JavaScript per ogni DIV del calendario.
Utilizzare Schedito con Webflow CMS o componenti
I Code Embed Webflow possono utilizzare valori dinamici provenienti da elementi CMS, proprietà dei componenti, impostazioni della lingua e impostazioni della pagina.
Questo permette configurazioni avanzate quando layout simili devono utilizzare valori di calendario differenti. Per esempio, in futuro un layout servizio riutilizzabile potrebbe ricevere un identificatore del calendario dai contenuti strutturati Webflow.
Per la prima integrazione mantieni però il processo semplice: utilizza il DIV esatto copiato da Schedito e introduci valori dinamici soltanto quando hai una reale necessità di riutilizzo.
Inizia semplice
Configurazione standard
Copia il DIV esatto dal pannello Schedito.
Configurazione avanzata riutilizzabile
Utilizza CMS o proprietà dei componenti Webflow per fornire dinamicamente valori selezionati.
5. Pubblica e prova l'intero processo di prenotazione
Controlla che le risorse vengano caricate, il calendario appaia, la disponibilità sia corretta e una prenotazione possa essere completata.
Pubblica e apri la pagina
Prova il sito realmente pubblicato. Alcuni comportamenti del custom code si verificano meglio dopo la pubblicazione.
Completa una prenotazione
Scegli servizio, data e orario e completa una vera prenotazione. Controlla poi il risultato in Schedito.
Controlla il responsive
Prova il Code Embed e i contenitori Webflow circostanti su desktop, tablet e mobile.
Risoluzione problemi del widget Webflow
Controlla indipendentemente i tre elementi: link CSS Schedito nell'Head, JavaScript nel Footer e DIV corretto nel Code Embed.
Utilizza gli strumenti sviluppatore per verificare richieste fallite, errori JavaScript o richieste API incomplete.
Webflow non esegue sempre il codice incorporato esattamente come sul sito pubblicato. Pubblica il progetto e prova la pagina reale prima di considerare l'integrazione non funzionante.
L'integrazione Webflow probabilmente funziona. Controlla in Schedito servizio, risorse necessarie, disponibilità ricorrente, eccezioni, prenotazioni esistenti, capacità e calendari esterni collegati.
Controlla sia il custom code globale sia quello specifico della pagina. Se la stessa risorsa è presente in entrambi, rimuovi il duplicato e mantieni l'ambito appropriato.
Controlla il Code Embed e i contenitori Webflow padre. Limiti di larghezza, grid, flex, padding e overflow del layout circostante possono restringere il widget.
Configura modalità chiara o scura e colori supportati in Schedito. Controlla anche che CSS Webflow troppo generico non modifichi involontariamente pulsanti, form o altri elementi del widget.
Webflow si occupa del design. Schedito delle prenotazioni.
Quando l'integrazione funziona, continua a gestire servizi, risorse, disponibilità, capacità, sincronizzazione calendari e stile in Schedito.
Inizia gratisPanoramica Webflow
Tutte le guide Schedito · Personalizzazione widget · Sincronizzazione Google Calendar