🛠️ Integrazione avanzata di Koalendar per sviluppatori

Incorpora la tua pagina Koalendar in modo che i visitatori possano prenotare un appuntamento senza dover uscire dal tuo sito web.

Questa guida ti spiegherà come installare il nostro script di integrazione e i vari modi per attivare la visualizzazione dei link di programmazione.

🎨 Vuoi dare un'occhiata a ogni modello?

Guarda alcuni esempi delle nostre opzioni di incorporamento →

💡 Cerchi il modo più veloce per incorporare un contenuto con un semplice copia-incolla?

Segui la nostra semplice guida per l'aggiunta al sito web qui →

Installazione dello script di incorporamento

Copia e incolla il seguente codice JavaScript subito 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à di integrazione di Koalendar:

1. Visualizza una finestra pop-up tramite collegamento ipertestuale
2. Visualizza un pulsante pop-up mobile
3. Aprire una finestra pop-up tramite JavaScript
4. Visualizza un'interfaccia di prenotazione integrata

Continua a leggere per scoprire come fare!

1. Visualizza una finestra pop-up tramite collegamento ipertestuale

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

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

Mostreremo il link dal href  in una finestra a comparsa:

2. Visualizza un pulsante a comparsa

Per visualizzare un widget mobile sul tuo sito, chiama Calendario('widget') e impostare il url  attributo con l'URL del tuo 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 inserirà un pulsante mobile nella parte inferiore del tuo sito:

La configurazione del widget supporta le seguenti proprietà:

3. Aprire una finestra pop-up tramite JavaScript

È possibile utilizzare il apri  Clicca qui per aprire il widget Koalendar in qualsiasi momento:

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

4. Visualizzare un'interfaccia di prenotazione integrata

Questa opzione ti permette di inserire l'interfaccia di pianificazione di Koalendar direttamente all'interno dei contenuti del tuo sito web:

Per rendere il tuo link in linea, inserisci un in linea  una chiamata dopo l'altra 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: