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
- Vai su Impostazioni → Addon nel Dashboard admin
- Attiva Integrazione sito web
- La nuova voce di menu Sito web → Widget appare nella navigazione
- 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
- Vai su Sito web → Widget → Nuovo widget
- Scegli il tipo di widget (programma, prenotazione, pacchetti, ...)
- Configura l'aspetto e il contenuto
- Clicca Genera codice
- 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
<!-- 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
| Piattaforma | Metodo | Difficoltà |
|---|---|---|
| WordPress | Script tag o blocco HTML | Facile |
| Wix | Elemento iFrame | Molto facile |
| Squarespace | Blocco codice | Facile |
| Webflow | Elemento Embed | Facile |
| Jimdo | Widget HTML | Facile |
| HTML personalizzato | Entrambi i metodi | Facile |
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:
[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.