Intégrer le planificateur à votre site web

Paramètres → Intégrations permet à vos visiteurs de réserver directement depuis votre propre site, grâce à un planificateur intégré, plutôt que d'être renvoyés ici.

1. Autoriser votre domaine

Dans Domaines autorisés, saisissez l'adresse exacte du site qui hébergera le planificateur : uniquement le protocole et le domaine (avec le port, s'il y en a un), sans chemin ni barre oblique finale :

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  protocole manquant
https://acme.com/book      ✗  contient un chemin
https://acme.com/          ✗  barre oblique finale

https://www.acme.com et https://acme.com sont des adresses différentes. Si vos visiteurs peuvent accéder au site par les deux, ajoutez les deux.

Cette liste fait aussi office d'interrupteur : tant qu'elle est vide, votre planificateur ne peut être intégré nulle part. Vous pouvez ajouter jusqu'à 50 domaines, et une suppression prend effet immédiatement.

2. Coller l'extrait de code

Chaque annonce approuvée possède son propre extrait. Copiez-le et collez-le dans votre page, à l'endroit où le planificateur doit apparaître :

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

Le <div> marque l'emplacement ; la balise script peut se trouver n'importe où sur la page et ne doit apparaître qu'une fois, même avec plusieurs planificateurs. Si le message indique aucune annonce approuvée à intégrer, l'annonce est encore en cours d'examen : son extrait apparaîtra une fois qu'elle sera approuvée.

3. Définir la langue

Langue du planificateur, sur cette page, détermine ce que voient les visiteurs. Laissez l'option suivre la langue de la page et le planificateur lira l'attribut lang de la balise <html> de votre page, celui-là même qu'utilisent les moteurs de recherche et les lecteurs d'écran, de sorte qu'un site correctement localisé ne demande aucune configuration supplémentaire :

<!doctype html>
<html lang="es">      <!-- le planificateur s'affiche en espagnol -->
  <head>…</head>
  <body>…</body>
</html>

Les étiquettes régionales fonctionnent : lang="pt-BR" est ramenée à la langue prise en charge la plus proche plutôt que rejetée.

Pour outrepasser la langue de la page sur un planificateur donné, ajoutez data-locale au div d'intégration. Il l'emporte à la fois sur la langue de la page et sur le réglage de cette page :

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

Si votre page dispose de son propre sélecteur de langue, demandez au planificateur de le suivre. Le changement se fait sur place : tout ce que le visiteur a déjà saisi est conservé :

window.SchedulerEmbed.setLocale("sr");

En résumé, le premier réglage défini l'emporte : data-locale, puis le <html lang> de votre page, puis Langue du planificateur, puis le navigateur du visiteur, puis l'anglais.

Autres options

À ajouter au div d'intégration :

data-mode="popup" affiche un bouton qui ouvre le planificateur dans une fenêtre superposée au lieu de l'insérer dans la page.

data-label="Réserver" définit le texte du bouton en mode fenêtre.

data-min-height="480" définit la hauteur en pixels avant que le planificateur ne communique sa taille réelle. Augmentez-la si vous constatez un saut au chargement.

Deux autres appels sont disponibles si votre site insère du contenu dynamiquement ou mesure des conversions :

// Réanalyser la page après avoir ajouté un div planificateur
window.SchedulerEmbed.refresh();

// Se déclenche lorsqu'un visiteur finalise une réservation
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

Assistants IA

Grâce à WebMCP, un standard web encore à l'état de proposition, le planificateur met aussi des outils à la disposition des assistants IA. Un assistant qui aide un visiteur dans son navigateur peut ainsi consulter ce que vous proposez et à quel prix, trouver des créneaux libres et sélectionner un horaire sous les yeux du visiteur. Il peut aussi réserver, mais la réservation est signalée comme nécessitant l'accord du visiteur : l'assistant le lui demande donc d'abord. Se connecter, créer un compte et payer restent toujours du ressort du visiteur.

Vous n'avez rien à configurer : l'extrait de code le permet déjà. Seul un planificateur que vous avez placé avec votre propre balise <iframe>, au lieu de l'extrait, doit recevoir allow="payment; tools" sur cette balise.

La prise en charge par les assistants est encore récente. L'application de bureau de ChatGPT utilise déjà ces outils dans son navigateur intégré, sur la page de votre annonce sur notre site et via le lien de Partager le lien de réservation. Elle n'utilise pas encore les outils d'un planificateur intégré à un autre site ; le planificateur est prêt pour les assistants qui le font. Dans tous les cas, vos visiteurs peuvent toujours réserver eux-mêmes.

Si le planificateur ne s'affiche pas

L'adresse de la page ne figure pas dans la liste ou ne correspond pas exactement : http au lieu de https, ou un www manquant, suffit à la bloquer.

L'extrait s'est retrouvé à un endroit où le script ne peut pas s'exécuter, par exemple un bloc de texte brut ou de HTML restreint de votre créateur de site.

La valeur de data-service a été modifiée. Collez l'extrait tel quel plutôt que de ressaisir l'identifiant.

L'annonce a été dépubliée ou n'est plus approuvée.