Aggiungi CSS o JavaScript al tuo calendario

• Scopri di più su come aggiungere HTML all’interno dei campi di testo
• Cambia l’aspetto del tuo calendario con CSS
• Cambia l’aspetto del tuo widget con CSS
• Scopri di più sugli snippet di codice JavaScript e come funzionano
• Impara come inserire codice JavaScript per aggiungere funzionalità dinamiche al tuo calendario
• Aggiungi opzioni extra quando usi script, come testo automatico o snippet di Google Analytics

Aggiungere HTML all’interno dei campi di testo

• Nel riquadro del messaggio sotto Impostazioni layout
• Nei riquadri dei messaggi situati in ogni calendario nella pagina Configura > Layout
• Nel riquadro dei commenti HTML che si trova nei moduli personalizzati andando su Configura > Design
• Nei riquadri dei messaggi email nella pagina Configura > Layout se l’HTML è abilitato per i messaggi email

Cambiare l’aspetto del calendario con CSS

Se desideri aggiungere stili specifici a determinate pagine del calendario per renderle coerenti con il tuo sito web, ad esempio, puoi usare CSS. Proprio come gli script, il CSS può essere aggiunto a ogni riquadro di messaggio che consente l’HTML. Clicca sul pulsante < > nella barra degli strumenti del riquadro del messaggio per aprire il campo di testo del codice sorgente per aggiungere il tuo CSS. Avrai bisogno di alcune conoscenze tecniche di base per applicarlo al tuo calendario. Esistono due modi per usare il CSS in SuperSaaS: puoi usare il CSS in linea o collegare un foglio di stile esterno.

CSS in linea

Il CSS in linea è un metodo che ti permette di applicare stili direttamente ai singoli elementi HTML all’interno del tuo calendario. Questo viene fatto utilizzando l’attributo style all’interno del tag di apertura di un elemento HTML. Ad esempio, se vuoi cambiare il colore del testo in un paragrafo in verde e impostare la dimensione del carattere a 16 pixel, useresti il CSS in linea come segue:

Questo è un paragrafo con testo verde e una dimensione del carattere di 16 pixel.

Il CSS in linea è ottimo per cambiare rapidamente lo stile di un elemento specifico senza influenzare il resto della pagina. Tuttavia, diventa meno pratico quando devi applicare lo stesso stile a molti elementi, poiché devi ripetere lo stesso codice ogni volta.

CSS in linea nelle email

SuperSaaS offre due tipi di formati email: testo semplice e HTML. Per impostazione predefinita, le email vengono inviate in testo semplice, che consente solo testo di base. Se desideri includere immagini, HTML o applicare stili come il CSS, abilita la formattazione HTML per i messaggi email nella pagina Impostazioni layout. Nelle email, devi usare il CSS in linea perché le email non supportano i fogli di stile CSS come le pagine web. Dopo aver abilitato la formattazione HTML per l’email, puoi applicare il CSS in linea come spiegato sopra.

Utilizzo di un foglio di stile esterno

Mentre il CSS in linea è utile per piccoli cambiamenti, diventa poco pratico se hai molte ricorrenze da gestire; in quel caso l’uso di un foglio di stile CSS esterno diventa preferibile. Per collegarsi a un foglio di stile esterno, è importante che il foglio di stile sia ospitabile e accessibile su un altro server, poiché non è possibile memorizzare i file CSS direttamente in SuperSaaS. La struttura di base per collegarsi a un foglio di stile CSS separato è la seguente:

Dopo aver applicato il CSS nel codice sorgente dei riquadri di testo che consentono contenuti HTML, premi ‘Salva’ e visita la pagina per assicurarti che il CSS sia stato applicato correttamente.

Aggiunta di CSS al tuo widget

Puoi anche aggiungere CSS a un widget del calendario che può essere incorporato nel tuo sito web. Se desideri personalizzare lo stile del widget, puoi aggiungere il tuo CSS, che verrà inserito tra i tag style in ogni frame, oppure collegarti a un foglio di stile esterno. Tuttavia, tieni presente che la struttura e gli identificatori del widget potrebbero cambiare in seguito ai nostri aggiornamenti, quindi non fare affidamento sulla loro stabilità nel tempo.

var supersaas = new SuperSaaS("demo", "Terapista", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demo", "Terapista", {"custom_css": "https://….css"})

Per ulteriori informazioni sulla personalizzazione del tuo widget SuperSaaS, consulta la nostra documentazione per sviluppatori.

Utilizzo di script in SuperSaaS

Gli script JavaScript possono essere utili per integrare funzionalità dinamiche nelle pagine del calendario o nei moduli per migliorare il processo di prenotazione. Puoi integrare vari servizi o funzioni, come chat dal vivo, pulsanti, conti alla rovescia o script di tracciamento per servizi di analisi come Google Analytics o Bing.

Ad esempio, il seguente snippet aggiunge un pulsante pop-up come questo che può essere utilizzato per mostrare informazioni aggiuntive quando i clienti prenotano tramite la tua pagina di prenotazione.

Come inserire uno script

1. Trova il tuo riquadro di testo: Naviga fino al riquadro di testo dove vuoi aggiungere il tuo script JavaScript. Questo riquadro può trovarsi in una qualsiasi delle posizioni menzionate sopra.
2. Apri il campo di testo del codice sorgente: Clicca sul pulsante < > nella barra degli strumenti del riquadro di testo per aprire il campo del codice sorgente.
3. Copia il tuo script: Recupera lo snippet di codice del servizio o della funzione che desideri integrare, come un pulsante chat in tempo reale per il supporto dal vivo o un servizio di analisi come Google Analytics.
4. Aggiungilo al campo del codice sorgente e salva: Incolla lo snippet di codice nel campo del codice sorgente in SuperSaaS e fai clic su Salva. Quindi, scorri fino alla fine della pagina di layout e fai clic sul pulsante Salva modifiche.
5. Test: Dopo aver salvato il codice, visita la pagina in cui hai applicato lo snippet di codice per assicurarti che lo script sia applicato correttamente. Se hai bisogno dello snippet su più pagine, ripeti il processo di inserimento per ogni riquadro di messaggio personalizzato.

Opzioni extra all’interno di SuperSaaS

Utilizzo di testo automatico con gli script

Le stringhe di testo automatico sono un insieme di “parole magiche” che vengono sostituite automaticamente da qualcos’altro quando il messaggio viene generato. Le istruzioni di testo automatico sono utili per le email e i messaggi a video. Tuttavia, possono anche essere utilizzate in HTML in combinazione con uno script. Nella pagina per personalizzare i messaggi video puoi trovare tutte le istruzioni di testo automatico utilizzabili con l’HTML.

Il testo automatico può anche essere utilizzato per aggiungere script in modo condizionale. Ad esempio, per aggiungere uno script solo se un pagamento è andato a buon fine. Per aggiungere uno snippet di codice alla tua istruzione condizionale di testo automatico, aggiungilo semplicemente all’interno delle parentesi graffe.