🛠️ Intégration avancée de Koalendar pour les développeurs

Intégrez votre page Koalendar afin que les visiteurs puissent réserver un créneau horaire sans quitter votre site web.

Ce guide vous apprendra comment installer notre script d'intégration et les différentes façons de déclencher l'affichage des liens de planification.

🎨 Vous souhaitez avoir un aperçu de chaque style ?

Voir des exemples de nos options d'intégration →

💡 Vous avez besoin d'une intégration rapide par copier-coller ?

Suivez notre guide simple pour ajouter notre site Web ici →

Installation du script d'intégration

Copiez et collez le code JavaScript suivant juste avant la balise de fermeture </body>  balise :

<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>

Nous prenons en charge 4 modes différents pour l'intégration de votre Koalendar :

1. Afficher une fenêtre contextuelle via un lien hypertexte
2. Afficher un bouton contextuel flottant
3. Ouvrir une fenêtre contextuelle via JavaScript
4. Afficher une interface de réservation en ligne

Lisez la suite pour savoir comment faire !

1. Afficher une fenêtre contextuelle via un lien hypertexte

Pour ouvrir une page de réservation lorsqu'un utilisateur clique sur un lien hypertexte, ajoutez un widget-calendrier-de-données  attribut au lien.

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

Nous afficherons le lien depuis le href  dans une boîte à lumière :

2. Afficher un bouton contextuel flottant

Pour afficher un widget flottant sur votre site, appelez Koalendar (« widget ») et définissez le URL  attribut avec votre 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>

Cela insérera un bouton flottant au bas de votre site :

La configuration du widget accepte les propriétés suivantes :

3. Ouvrir une fenêtre contextuelle via JavaScript

Vous pouvez utiliser le ouvert  Appelez à tout moment le widget Koalendar :

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

4. Afficher une interface de réservation en ligne

Cette option vous permet d'intégrer l'interface de planification Koalendar directement dans le contenu de votre site web :

Pour afficher votre lien en ligne, créez un en ligne  appel après appel 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>

Le en ligne  La commande accepte les options suivantes :