Come aggiungere Koalendar a un sito Unbounce
Aggiungi una funzione di prenotazione intuitiva a qualsiasi landing page di Unbounce con un semplice copia-incolla. Non servono integrazioni aggiuntive: tutto ciò che ti serve è già presente in Koalendar e Unbounce.
📑 Menu
- 📋 Passaggio 1 – Copia il codice di incorporamento
- 📝 Passaggio 2 – Incollalo in Unbounce
- 🛠️ Risoluzione dei problemi
- 🤔 Quale stile di incorporamento dovresti usare?
📋 Passaggio 1 – Copia il codice di incorporamento
- Nella dashboard di Koalendar, clicca su "Condividi " accanto alla pagina di prenotazione che desideri incorporare.
- Seleziona " Aggiungi al sito web".
- Scegli uno stile di incorporamento e clicca su «Copia codice».
| Stile incorporato | Cosa fa |
|---|---|
| Incorporamento in linea 🖥️ | Visualizza il calendario delle prenotazioni direttamente sulla pagina di destinazione. |
| Widget a comparsa 📍 | Aggiunge un pulsante "Prenota ora" mobile che apre una finestra pop-up con il calendario. |
| Finestra a comparsa al clic 🔗 | Trasforma qualsiasi link o pulsante in un calendario a comparsa. |
💡 Personalizza colori, testo e posizione prima di copiare, in modo che il risultato si adatti al tuo design Unbounce.
📝 Passaggio 2 – Incollalo in Unbounce
Opzione A – Incorporamento in linea o finestra a comparsa al clic 🔧
- Nel Page Builder di Unbounce, trascina un blocco HTML nella pagina in cui desideri che appaia il calendario (o il trigger del popup).
- Fai doppio clic sul blocco per aprire l'editor HTML personalizzato.
- Incolla il codice di Koalendar che hai copiato.
- Salva il codice, quindi visualizza l'anteprima o pubblica la pagina.
Opzione B – Widget a comparsa (pulsante mobile) 📌
- Apri la tua pagina nel Page Builder di Unbounce e clicca sulla scheda "Javascripts " (in basso a sinistra).
- Fai clic su " Aggiungi script " → assegnagli un nome, ad esempio "Widget Koalendar".
- Incolla il codice del widget Koalendar e imposta la posizione su " Prima del tag di chiusura del corpo".
- Fatto → Anteprima o Pubblica. Il pulsante mobile ora compare su tutte le varianti di quella pagina.
📝 Ti serve un widget per tutto il sito? Aggiungi lo stesso script a ogni pagina di destinazione oppure duplica la pagina una volta installato il widget.
🛠️ Risoluzione dei problemi
| Problema | Soluzione rapida |
| Il calendario non si carica in Anteprima | Pubblica la pagina: alcuni script funzionano solo sull'URL live. |
| Il widget non viene visualizzato dopo l'incollaggio | Assicurati che lo script sia posizionato prima del tag di chiusura del corpo (non nell'intestazione). |
| Il link a comparsa viene visualizzato ma non si apre | Verifica che sia il frammento di link che lo script di Koalendar si trovino sulla stessa pagina. |
| Il layout sembra un po' affollato | Aumenta la larghezza/altezza del blocco HTML o modifica il margine nelle impostazioni di incorporamento di Koalendar. |
🤔 Quale stile di incorporamento dovresti usare?
| Obiettivo | Il miglior stile |
| Sezione dedicata alle prenotazioni | Incorporamento in linea 🖥️ |
| CTA sempre visibile | Widget a comparsa 📍 |
| Aggiungi la pianificazione a un pulsante esistente | Finestra a comparsa al clic 🔗 |
| Collegamento rapido esterno | Link diretto ↗️ |