Integrazione sito web

Categoria: Marketing | Codice: website_integration

Con l'integrazione sito web puoi incorporare i widget Bookicorn direttamente nel tuo sito web. I clienti possono prenotare corsi, acquistare crediti e riscattare buoni sconto – senza mai lasciare il tuo sito. I widget si adattano automaticamente ai colori e al logo del tuo studio.


Cosa ottieni

  • Widget Builder con configurazione drag & drop
  • 5 tipi di widget: Programma corsi, modulo di prenotazione, pacchetti crediti, riscatto buoni, info studio
  • Auto-branding: I widget adottano automaticamente i colori e il logo del tuo studio
  • Incorporamento tramite iFrame o script tag – funziona su qualsiasi sito web
  • Design responsive – ottimo aspetto su desktop e mobile
  • Nessun codice necessario – copia e incolla è tutto ciò che serve

Attivazione

  1. Vai su Impostazioni → Addon nel Dashboard admin
  2. Attiva Integrazione sito web
  3. La nuova voce di menu Sito web → Widget appare nella navigazione
  4. Configura il tuo primo widget nel Widget Builder

Widget Builder

Il Widget Builder è lo strumento centrale per la tua integrazione nel sito web. Configuri quali widget vuoi incorporare e come devono apparire.

Come funziona

  1. Vai su Sito web → Widget → Nuovo widget
  2. Scegli il tipo di widget (programma, prenotazione, pacchetti, ...)
  3. Configura l'aspetto e il contenuto
  4. Clicca Genera codice
  5. Copia il codice generato nel tuo sito web

Anteprima live

Sul lato destro del Widget Builder vedi un'anteprima live del widget – esattamente come apparirà sul tuo sito. Le modifiche vengono mostrate immediatamente.


Widget disponibili

1. Widget programma corsi

Mostra il tuo programma corsi attuale sul tuo sito web. I clienti possono vedere tutti i corsi con data, orario, trainer e posti disponibili.

Opzioni di configurazione:

  • Vista: vista settimanale o vista lista
  • Filtri: tipi di corso, sedi, trainer
  • Periodo: settimana corrente, prossime 2 settimane, prossimo mese
  • Pulsante "Prenota ora" direttamente nel widget
Incorporamento widget programma corsi
<!-- Course Schedule Widget -->
<div id="bookicorn-schedule"></div>
<script src="https://widget.bookicorn.net/schedule.js"
  data-studio="your-studio-id"
  data-lang="it">
</script>

2. Widget modulo di prenotazione

Un modulo di prenotazione completo per un corso o tipo di corso specifico. I clienti scelgono la loro fascia oraria, accedono e prenotano – tutto senza lasciare il tuo sito.

Opzioni di configurazione:

  • Pre-filtro per tipo di corso specifico
  • Pre-filtro per sede specifica
  • Visualizzazione: larghezza piena o compatta

Consiglio: Usa il widget modulo di prenotazione sulle landing page per singoli corsi. Una pagina dedicata per tipo di corso con un modulo di prenotazione diretto converte significativamente meglio di una panoramica corsi generica.

3. Widget pacchetti crediti

Mostra i tuoi pacchetti crediti per l'acquisto diretto. I clienti possono selezionare e acquistare pacchetti senza dover aprire l'app Bookicorn.

Opzioni di configurazione:

  • Quali pacchetti mostrare (tutti o solo selezionati)
  • Visualizzazione: griglia o lista
  • Evidenziare un pacchetto (es. "Più popolare")

4. Widget riscatto buoni

Un semplice modulo dove i clienti possono inserire il loro codice sconto. Dopo l'inserimento del codice, vengono mostrate le offerte disponibili con lo sconto applicato.

Nota: Il widget riscatto buoni richiede l'addon Sistema buoni sconto.

5. Widget info studio

Mostra le informazioni di base sul tuo studio: indirizzo, orari di apertura, dati di contatto e un pulsante "Prenota ora". Comodo per la sidebar o il footer del tuo sito.


Auto-branding

Tutti i widget adottano automaticamente il branding del tuo studio:

  • Colore primario: Dalle impostazioni del tuo studio (per pulsanti, link, evidenziazioni)
  • Logo: Il logo del tuo studio appare nell'intestazione del widget
  • Font: Font di sistema che funzionano bene con la maggior parte dei siti
  • Angoli arrotondati e spaziatura: Ottimizzati per un aspetto moderno e pulito

Puoi aggiornare il tuo branding in qualsiasi momento nelle impostazioni dello studio – tutti i widget si aggiornano automaticamente.

Nota: Il logo Bookicorn non appare nei widget. Per un'esperienza completamente white label senza alcun riferimento a Bookicorn, consulta l'addon App mobile (White Label).


Incorporamento nel tuo sito web

Opzione 1: iFrame (semplice)

Per la maggior parte dei costruttori di siti web (Wix, Squarespace, Jimdo, ecc.) l'iFrame è l'opzione più semplice:

<iframe
  src="https://widget.bookicorn.net/[studio-id]/schedule"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 12px;">
</iframe>

Opzione 2: Script tag (consigliato)

Per WordPress, Webflow o pagine HTML personalizzate, lo script tag è l'opzione migliore – il widget adatta automaticamente la sua altezza:

<!-- Widget Container -->
<div id="bookicorn-widget"></div>

<!-- Widget Script -->
<script
  src="https://widget.bookicorn.net/loader.js"
  data-studio="[your-studio-id]"
  data-widget="schedule"
  data-lang="it"
  async>
</script>

Guide per piattaforma

PiattaformaMetodoDifficoltà
WordPressScript tag o blocco HTMLFacile
WixElemento iFrameMolto facile
SquarespaceBlocco codiceFacile
WebflowElemento EmbedFacile
JimdoWidget HTMLFacile
HTML personalizzatoEntrambi i metodiFacile

Design responsive

Tutti i widget sono ottimizzati per mobile e si adattano automaticamente alla larghezza dello schermo:

  • Desktop (>768px): Vista completa con tutte le colonne
  • Tablet (480–768px): Layout adattato, visualizzazione più compatta
  • Mobile (<480px): Layout a colonna singola, impilato verticalmente

Non devi configurare nulla – questo avviene automaticamente.


Combinare più widget

Puoi incorporare più widget diversi nel tuo sito web contemporaneamente. Combinazione consigliata per una pagina di prenotazione ottimale:

Struttura landing page prenotazione

[Widget info studio] → Breve presentazione dello studio + contatti [Widget programma corsi] → Tutti i corsi attuali [Widget pacchetti crediti] → Prenotazione / acquisto diretto [Widget buoni] → Riscattare un codice sconto


Consigli per una migliore conversione

Posizionamento prominente

  • Non nascondere il widget – posiziona il programma corsi sulla homepage "above the fold" (visibile senza scorrere)
  • Collega una pagina di prenotazione dedicata nella tua navigazione
  • Fai puntare i pulsanti call-to-action di altre pagine alla pagina di prenotazione

Call-to-action chiari

  • Usa titoli orientati all'azione: "Prenota un corso ora", "Assicurati il tuo posto"
  • Inserisci brevi testi introduttivi sopra il widget: perché qualcuno dovrebbe prenotare proprio adesso?

Tempo di caricamento

  • Lo script tag si carica in modo asincrono e influisce minimamente sul tempo di caricamento del tuo sito
  • L'iFrame è leggermente più lento – preferisci lo script tag per i siti web dove le prestazioni sono critiche

A/B testing

Testa diversi posizionamenti e configurazioni dei widget:

  • Widget programma corsi in alto vs. pacchetti crediti in alto
  • Vista settimanale vs. vista lista
  • Con o senza filtro trainer

Domande frequenti

I widget funzionano in tutti i browser? Sì. I widget supportano tutti i browser moderni (Chrome, Firefox, Safari, Edge) e Internet Explorer 11+.

I clienti hanno bisogno di un account Bookicorn per prenotare? Sì. Al checkout, ai clienti viene chiesto di accedere o registrarsi. La registrazione è gratuita e richiede meno di un minuto.

I widget vengono aggiornati automaticamente quando modifico il programma corsi? Sì. I widget mostrano sempre dati in tempo reale – le modifiche al programma nell'admin sono immediatamente visibili nel widget.

Posso incorporare il widget su più pagine contemporaneamente? Sì, senza alcuna restrizione. Puoi usare lo stesso codice widget su tutte le pagine che desideri.

Cosa succede se il nome o il logo del mio studio cambiano? Tutti i widget si aggiornano automaticamente – non devi rigenerare il codice di incorporamento.

Fragen oder Feedback?

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