Intégrer de page de réservation en ligne (widget) sur votre site
Voici quatre manières d'intégrer le module de réservation d'agenda.ch dans votre site internet.
Pour l'intégration des évaluations de vos clients sur votre site, consultez l'article Récupérer les évaluations sur agenda.ch (niveau avancé)
💡 *Les identifiants utilisés sont des exemples. Assurez-vous d'utiliser les identifiants & codes correspondants à votre compte. Vous les trouverez dans la configuration de votre compte sous:*
- Paramètres > Réservation en ligne > Lien / Bouton de réservation.
A) Lien direct:
*Exemple :* https://book.agenda.ch/services?companyId=5
Ce lien peut être personnalisé en spécifiant les identifiants d'agenda, de prestation, de cours, de séries de cours, de promotion ou de lieu. Certains de ces identifiants peuvent êtres cumulés, p. ex : prestation + agenda + lieu.
Il est aussi possible de demander à la page de réservation de cacher l'entête ou le pied de page.
Ce lien peut être personnalisé depuis la configuration de votre compte sous Paramètres > Réservation en ligne > Lien / Bouton de réservation. Par exemple:
https://book.agenda.ch/services/8757/add?companyId=5&agendaId=5311
B ) Affichage en surimpression - méthode 1
- Ajoutez à votre site web la balise script suivante :
<script src="https://widget.agenda.ch/javascripts/widget_over_2.js" async ></script>
- Sur un élément de votre page, ajoutez l'évènement javascript
` `click`` comme avec l'exemple suivant :
<script> let agenda_options = { companyId: 5, btnTarget: 'modal2', } </script> <a href="https://agenda.ch" onclick="AgendaCH.show(agenda_options); return false;" > Prendre rendez-vous </a>
C ) Affichage en surimpression - méthode 2
Ajouter à votre site web la balise ` `script `` suivante :
<script src="https://app.agenda.ch/javascripts/widget_over_2.js" data-button-type="fab" data-button-position="bottom left" data-button-color="#57068c" data-button-font-weight="400" data-button-text="Prendre rdv avec agenda.ch" data-button-radius="7px" data-button-id="fab-book-now" data-company-id="5" data-hide-header="1" data-hide-footer="1" async defer ></script>
Les paramètres suivants peuvent être utilisés :
data-company-id | Obligatoire. L'identifiant de votre compte |
data-button-type | Obligatoire. Doit être "fab" |
data-button-position | Obligatoire. Détermine la position du bouton, peut être une combinaison d'une valeur entre top/bottom et left/center/right. P. ex: "bottom center" |
data-button-color | Obligatoire. Défini la couleur CSS de fond du bouton |
data-button-text | Le texte du bouton. Obligatoire si l'icône est cachée |
data-button-font-weight | Facultatif, défini la propriété CSS font-weight du texte |
data-button-radius | Facultatif, défini la propriété CSS de l'arrondi du bouton |
data-button-id | Facultatif, défini l'identifiant HTML du bouton |
data-hide-header | Facultatif, si la valeur vaut "1", l'entête de la page de réservation sera caché |
data-hide-footer | Facultatif, si la valeur vaut "1", le pied de page de la page de réservation sera caché |
data-hide-icon | Facultatif, si la valeur vaut "1", l'icône du bouton est cachée |
data-service-id | Facultatif, pré-sélectionne la prestation |
data-agenda-id | Facultatif, pré-sélectionne l'agenda |
data-course-id | Facultatif, pré-sélectionne un type cours |
data-course-cluster-id | Facultatif, pré-sélectionne une série de cours |
data-location-id | Facultatif, pré-sélectionne un lieu |
data-view-id | Facultatif, l'identifiant du filtre d'affichage |
data-dark-mode | Facultatif, force le mode sombre, valeur possibles : "0" / "1" |
data-lang | Facultatif, force la langue de la page de réservation (note: fonctionne jusqu'à ce que le client aie choisi une langue). Valeur possibles: "fr" / "de" / "en" |
D ) Intégration via iframe
L'intégration via iframe se fait en utilisant la même URL que pour le point A )
La page de réservation communique la hauteur de son contenu et la hauteur de l'iframe est automatiquement adaptée.
*Exemple :*
<iframe id="ag_ch_booking_widget" src="https://book.agenda.ch/?companyId=5&hideFooter=1" height="525" width="100%" style="border: none;" ></iframe><script> // allow to adapt iframe height to content window.addEventListener('message', (event) => { const MARGIN = 50; if (event && event.origin.startsWith('https://book.agenda.ch') && event.data && event.data.source === 'Widget' && event.data.height) { document.querySelector('#ag_ch_booking_widget') .style .height = `${event.data.height + MARGIN}px`; } }) </script>
💡 *Contactez-nous si vous avez besoin d'aide; nous avons l'habitude* 🙂 *et nous le faisons avec plaisir pour vous !*
Vous n'avez pas encore de compte ? ouvrez un compte d'essais gratuit pendant 30 jours
Mis à jour le : 08/09/2025
Merci !