Come aggiungere il widget Schedito a un sito personalizzato
Un sito personalizzato può integrare Schedito direttamente tramite tre elementi frontend: un link CSS condiviso, uno script JavaScript condiviso e un DIV HTML specifico del calendario.
Carica CSS e JavaScript una sola volta nell'ambito appropriato e inserisci un DIV Schedito in ogni posizione in cui deve apparire un calendario di prenotazione.
Prima di modificare il sito
Un calendario Schedito configurato
Configura servizi, risorse e disponibilità che i clienti devono poter prenotare.
Accesso al codice frontend
Devi poter aggiungere stylesheet, JavaScript e markup HTML al sito o all'applicazione.
I tre snippet Schedito
Apri l'area di integrazione Schedito e prepara link CSS, script JavaScript e DIV specifico del calendario.
1. Comprendi l'integrazione in tre parti
Il pannello Schedito fornisce tre elementi indipendenti:
Link CSS — fornisce lo stile del widget.
Script JavaScript — inizializza e gestisce i widget.
DIV del widget — identifica organizzazione e calendario pubblico e definisce la posizione di rendering.
CSS e JavaScript sono risorse condivise. Il DIV è specifico del calendario.
CSS Schedito — una volta
DIV specifico del calendario
JavaScript Schedito — una volta
2. Carica lo stylesheet Schedito una sola volta
Copia il <link> CSS mostrato dal pannello Schedito e aggiungilo all'<head> oppure al normale meccanismo di caricamento degli stylesheet dell'applicazione.
Se Schedito può apparire in tutto il sito, caricalo globalmente. Se viene utilizzato soltanto in un bundle o route specifica, puoi limitarne l'ambito.
Non duplicare lo stesso stylesheet per ogni DIV del calendario.
3. Inserisci il DIV specifico del calendario
Copia il DIV HTML del calendario che vuoi pubblicare e inseriscilo nel template, componente o pagina dove deve apparire la prenotazione.
Il markup contiene valori come data-organization-id e data-calendar-public-id. Utilizza esattamente quelli generati da Schedito.
Quando necessario puoi utilizzare anche gli attributi opzionali supportati, ad esempio la lingua del widget.
Posizione calendario
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Utilizza i valori esatti mostrati dal pannello Schedito.
4. Carica il JavaScript Schedito una sola volta
Copia lo <script> attuale mostrato da Schedito e aggiungilo ai normali script frontend, tipicamente verso la fine del documento prima di </body>.
Più calendari possono normalmente condividere questa singola inclusione.
Evita script identici accanto a ogni DIV del widget.
Utilizzare più calendari Schedito
Carica CSS e JavaScript condivisi una sola volta, quindi aggiungi un DIV differente per ogni calendario o punto di prenotazione.
I calendari possono essere presenti sulla stessa pagina oppure su pagine differenti.
Mantieni organization ID e calendar public ID specifici di ogni DIV.
Condivisi
JavaScript Schedito
Per calendario
Calendario B → DIV B
Calendario C → DIV C
Schedito in frontend dinamici o single-page application
Se il DIV Schedito viene renderizzato nell'HTML iniziale, l'integrazione standard è normalmente sufficiente.
Se il contenitore viene inserito successivamente tramite routing client-side, hydration o rendering dinamico, verifica che l'inizializzazione Schedito avvenga dopo la creazione del contenitore.
Non utilizzare automaticamente l'iniezione ripetuta dello script come soluzione. Mantieni lo script condiviso caricato una volta e integra l'inizializzazione con il ciclo di vita della tua applicazione.
5. Prova l'intero processo di prenotazione
Verifica rendering, disponibilità, creazione della prenotazione e comportamento responsive.
Apri la pagina pubblica
Controlla che stylesheet e script vengano caricati e che il calendario sostituisca correttamente il DIV sul sito pubblico.
Completa una prenotazione
Scegli servizio, data e orario e completa una vera prenotazione di prova. Controlla poi il record in Schedito.
Controlla i contenitori responsive
Prova desktop, tablet e mobile e verifica che il tuo CSS non limiti inutilmente il widget.
Risoluzione problemi del widget su siti personalizzati
Controlla separatamente stylesheet Schedito, JavaScript e DIV specifico del calendario.
Utilizza gli strumenti sviluppatore per individuare risorse fallite, errori JavaScript o chiamate API non riuscite.
Controlla data-organization-id e data-calendar-public-id confrontandoli con lo snippet attuale mostrato da Schedito.
Controlla template condivisi, bundle e componenti. Mantieni le risorse comuni in un solo ambito appropriato.
L'integrazione frontend probabilmente funziona. Controlla Schedito: servizio, risorse richieste, disponibilità, eccezioni, prenotazioni, capacità e calendari esterni collegati.
Controlla contenitori padre, grid o flex, max-width, padding e overflow. Il layout dell'applicazione può limitare il widget.
L'applicazione potrebbe inserire il DIV dopo l'inizializzazione Schedito. Controlla quando il contenitore entra nel DOM e integra correttamente l'inizializzazione nel lifecycle del frontend.
Continua a sviluppare la tua applicazione. Lascia il booking a Schedito.
Quando il widget funziona, continua a gestire servizi, risorse, disponibilità, capacità, sincronizzazione calendari e stile in Schedito.
Inizia gratisPanoramica siti personalizzati
Tutte le guide Schedito · Personalizzazione widget · Sincronizzazione Google Calendar