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 :

Champs	Description / exemple
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