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'origine exacte du site qui hébergera le planificateur, c'est-à-dire le schéma et l'hôte uniquement, sans chemin ni barre oblique finale :
https://apply.acme.com ✓
https://acme.com:8443 ✓
acme.com ✗ schéma manquant
https://acme.com/book ✗ contient un chemin
https://acme.com/ ✗ barre oblique finalehttps://www.acme.com et https://acme.com sont des origines 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 prestation validé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 prestation validée à intégrer pour l'instant, la prestation est encore en cours de vérification : son extrait apparaîtra une fois validée.
3. Définir la langue
Langue du widget, 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 widget, 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);
});Si le planificateur ne s'affiche pas
L'origine 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.
La prestation a été dépubliée ou n'est plus validée.