Incorporamento

Questa guida ti mostra passo dopo passo come incorporare i widget Bookicorn sul tuo sito web.

Codice di incorporamento

Ottenere il codice

  1. Nell'area admin, vai a Marketing → Integrazioni
  2. Seleziona la tua integrazione (o creane una nuova)
  3. Il codice di incorporamento viene visualizzato direttamente
  4. Clicca "Copia codice"

Struttura del codice

Il codice di incorporamento consiste di due parti:

<!-- 1. Bookicorn Loader (una volta per pagina) -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

<!-- 2. Elemento widget (dove deve apparire) -->
<bookicorn-widget studio="your-studio" integration="your-integration"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>
ParteDescrizione
<script>Carica il loader del widget. Deve essere inserito solo una volta per pagina.
<bookicorn-widget>Il widget vero e proprio. Appare esattamente dove lo posizioni.
studio="..."Lo slug del tuo studio (si trova nelle impostazioni)
integration="..."Lo slug della tua integrazione (assegnato alla creazione)
<a> (backlink)Link "Powered by Bookicorn" -- per favore non rimuoverlo

Guida passo dopo passo

1. Copia il codice

Copia il codice di incorporamento completo dall'area admin.

2. Inserisci lo script

Aggiungi il tag <script> al tuo sito web. La posizione ideale e in un punto che viene caricato su tutte le pagine rilevanti -- ad esempio nel footer o nell'header del tuo sito web.

3. Posiziona il widget

Inserisci l'elemento <bookicorn-widget> esattamente dove il widget deve apparire.

4. Fatto

Il widget si carica automaticamente e visualizza i tuoi dati in tempo reale da Bookicorn.

Esempio: pagina HTML semplice

<!DOCTYPE html>
<html>
<head>
  <title>Il mio studio di Yoga</title>
</head>
<body>
  <h1>Benvenuti nel nostro studio</h1>
  <p>Qui trovi il nostro programma corsi attuale:</p>

  <!-- Bookicorn Widget -->
  <bookicorn-widget studio="my-yoga-studio" integration="course-schedule"></bookicorn-widget>
  <a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>

  <!-- Bookicorn Loader (prima di </body>) -->
  <script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
</body>
</html>

Guide per piattaforma

WordPress

Opzione 1: blocco HTML personalizzato (consigliato)

  1. Modifica la pagina desiderata
  2. Aggiungi un blocco "HTML personalizzato"
  3. Inserisci il codice di incorporamento completo
  4. Pubblica la pagina

Opzione 2: script globale nel footer

Se hai bisogno del widget su piu pagine, puoi caricare lo script una volta globalmente. Aggiungi quanto segue al tuo functions.php:

function bookicorn_widget_script() {
  echo '<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>';
}
add_action('wp_footer', 'bookicorn_widget_script');

Dopo di che, devi solo inserire l'elemento <bookicorn-widget> nelle singole pagine.

Wix

  1. Apri l'editor della pagina
  2. Clicca Aggiungi (+) → Incorporamenti → Incorpora HTML
  3. Clicca "Inserisci codice"
  4. Inserisci il codice di incorporamento completo
  5. Regola la dimensione del contenitore
  6. Pubblica

Squarespace

  1. Modifica la pagina
  2. Aggiungi un blocco codice
  3. Inserisci il codice di incorporamento
  4. Salva e pubblica

Webflow

  1. Trascina un elemento Embed nella posizione desiderata
  2. Inserisci il codice di incorporamento
  3. Opzionale: inserisci lo script globalmente sotto Site Settings → Custom Code → Footer
  4. Pubblica

Jimdo

  1. Aggiungi un elemento Widget/HTML
  2. Inserisci il codice di incorporamento
  3. Salva

Altre piattaforme

Il codice di incorporamento funziona su qualsiasi sito web che consenta JavaScript. Cerca nel tuo website builder un'opzione come "Inserisci HTML", "Blocco codice" o "Incorpora".

Piu widget su una pagina

Puoi incorporare piu integrazioni sulla stessa pagina. Lo script deve essere caricato solo una volta:

<!-- Widget programma corsi -->
<bookicorn-widget studio="my-studio" integration="course-schedule"></bookicorn-widget>

<!-- Widget pacchetti -->
<bookicorn-widget studio="my-studio" integration="packages"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>

<!-- Script solo UNA VOLTA! -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

Come funziona tecnicamente

  1. Lo script loader viene caricato in modo asincrono e non blocca la tua pagina
  2. Registra <bookicorn-widget> come elemento personalizzato
  3. Una volta rilevato un elemento widget, carica la configurazione della tua integrazione
  4. Poi viene caricato il bundle del widget (memorizzato nella cache del browser)
  5. Il widget viene renderizzato in un Shadow DOM -- completamente isolato dal tuo sito web
  6. I tuoi dati vengono caricati in tempo reale da Bookicorn

Shadow DOM -- cosa significa?

Il widget funziona in quello che viene chiamato Shadow DOM. Questo ha due grandi vantaggi:

  • I tuoi stili sono al sicuro: il CSS del tuo sito web non puo influenzare il widget
  • Nessun conflitto: il CSS del widget non modifica nulla sul tuo sito web

Non devi fare nulla -- funziona automaticamente.

Cosa succede al clic?

I visitatori possono visualizzare i corsi nel widget (si apre un modale dettagliato con tutte le info) e sfogliare i profili dei trainer. Azioni come prenotare o acquistare pacchetti reindirizzano il visitatore alla piattaforma Bookicorn, dove la transazione viene elaborata in modo sicuro. Il link si apre in una nuova scheda -- il tuo sito web resta aperto in background.

Prestazioni

  • Lo script si carica in modo asincrono (async defer) e non blocca la tua pagina
  • Il bundle del widget viene memorizzato nella cache del browser dopo il primo caricamento
  • I dati vengono caricati solo quando il widget diventa visibile

Risoluzione dei problemi

Il widget non si carica

Controlla quanto segue:

  1. Il tag <script> e presente nella pagina?
  2. L'elemento <bookicorn-widget> e inserito correttamente?
  3. Gli slug studio e integration sono corretti?
  4. L'integrazione e attiva nell'area admin?
  5. L'add-on "Website Integration" e attivato?

Il widget mostra un errore

MessaggioSoluzione
Nessun datoControlla se corsi/pacchetti/trainer esistono in Bookicorn
Integrazione non trovataControlla lo slug in integration="..."
Studio non trovatoControlla lo slug in studio="..."

Il widget e tagliato

  • Controlla se il contenitore sul tuo sito web ha abbastanza spazio
  • Rimuovi overflow: hidden dall'elemento genitore
  • Il widget adatta automaticamente la sua altezza al contenuto

Controlla la console del browser

Apri gli strumenti per sviluppatori del browser (F12) e cerca errori nella console:

  • Errore 404: slug scritto male
  • Errore 403: add-on non attivo o integrazione disabilitata

Domande frequenti

Devo inserire lo script su ogni pagina?

Se incorpori lo script una volta globalmente (es. nel template del footer), e sufficiente. Devi solo posizionare l'elemento <bookicorn-widget> nelle singole pagine.

Posso mostrare il widget in un popup o modale?

Si. Assicurati che lo script sia gia caricato prima che il popup si apra. Il modo piu semplice e avere lo script nel footer globale.

Funziona con gli strumenti di consenso cookie?

I widget Bookicorn non impostano cookie di tracciamento o marketing. In senso stretto, non e necessario alcun consenso. Per la massima conformita, puoi comunque caricare lo script solo dopo il consenso.

Posso controllare la larghezza del widget?

Il widget occupa la larghezza completa del contenitore in cui e posizionato. Puoi quindi controllare la larghezza tramite il contenitore HTML circostante. Inoltre, puoi impostare una larghezza massima nel Widget Builder.

Servono conoscenze tecniche?

No. Hai solo bisogno dell'accesso all'HTML del tuo sito web. Con la maggior parte dei website builder, questo viene fatto tramite un "blocco HTML" o "incorpora codice".

Prossimi passi

ZurückGeneratore di widgetWeiterPersonalizza

Fragen oder Feedback?

Wir helfen dir gerne weiter. Kontaktiere unser Support-Team.