🛠️ Incorporamento Avanzato di Koalendar per Sviluppatori

Incorpora la tua pagina Koalendar in modo che i visitatori possano prenotare un appuntamento senza lasciare il tuo sito web.

Questa guida ti mostrerà come installare il nostro script di incorporamento e i vari modi per attivare la visualizzazione dei link di pianificazione.

🎨 Vuoi visualizzare un'anteprima di ogni stile?

Vedi esempi delle nostre opzioni di integrazione →

💡 Hai bisogno del codice di incorporamento più rapido da copiare e incollare?

Segui qui la nostra semplice guida all'integrazione nel sito web →

Installazione dello script di incorporamento

Copia e incolla il seguente codice JavaScript appena prima della chiusura </body>  tag:

<script>window.Koalendar=window.Koalendar||function(){(Koalendar.props=Koalendar.props||[]).push(arguments)};</script>
<script async src="https://koalendar.com/assets/widget.js"></script>
<script>Koalendar('init');</script>

Supportiamo 4 diverse modalità per l'incorporamento del tuo Koalendar:

1. Mostra pop-up tramite collegamento ipertestuale
2. Mostra un pulsante pop-up fluttuante
3. Aprire un pop-up tramite JavaScript
4. Visualizzare un'interfaccia di prenotazione integrata

Continua a leggere per scoprire come fare!

1. Visualizzare il pop-up tramite collegamento ipertestuale

Per aprire una pagina di prenotazione quando qualcuno clicca su un collegamento ipertestuale, aggiungi un data-koalendar-widget  attribuire al link.

<a data-koalendar-widget href="https://koalendar.com/e/demo">Schedule a meeting</a>

Visualizzeremo il link dal href  in una lightbox:

2. Visualizzare un pulsante pop-up flottante

Per visualizzare un widget fluttuante sul tuo sito, invoca Koalendar('widget') e imposta il url  attributo con il tuo URL Koalendar.

<script>
  Koalendar('widget', {
    "url": "https://koalendar.com/e/demo",
    "text": "Schedule a meeting",
    "shape": "rounded-full",
    "backgroundColor": "#5145CD",
    "textColor": "#FFFFFF",
    "position": "bottom-right",
    "icon": "calendar"
  });
</script>

Questo aggiungerà un pulsante mobile in fondo al tuo sito:

La configurazione del widget accetta le seguenti proprietà:

3. Aprire un pop-up tramite JavaScript

È possibile usare il apri  per richiamare il widget di Koalendar in qualsiasi momento:

<script>
  Koalendar('open', { url: 'https://koalendar.com/e/demo' });
</script>

4. Visualizzare un'interfaccia di prenotazione incorporata

Questa opzione consente di posizionare l'interfaccia di pianificazione di Koalendar direttamente all'interno degli altri contenuti del tuo sito web:

Per rendere il tuo link in linea, crea un in linea  Chiama dopo aver chiamato. init  :

<div id="booking-page">
  <!-- this is where we will inject the booking page embed -->
</div>

<script>
  Koalendar('inline', {
     "url": "https://koalendar.com/e/demo",
     "selector": "#booking-page"
  });
</script>

Il in linea  il comando accetta le seguenti opzioni: