Installer le widget de rendez-vous Netcoder sur votre site Web

Guide d'installation • Rendez-vous

Le widget de rendez-vous Netcoder permet aux visiteurs de n'importe quel site Web de prendre rendez-vous avec votre équipe, avec un seul bout de code HTML. Ils choisissent un type de rendez-vous, un jour et une heure, donnent leur nom et leur courriel, et c'est réservé : le rendez-vous s'inscrit au calendrier de la personne qui leur est attribuée, et ils reçoivent un courriel de confirmation avec une invitation pour leur propre calendrier.

1. Installation

Ajoutez un élément vide là où le widget doit paraître, et la balise de script suivante juste avant la balise </body> de la page. Remplacez les valeurs d'exemple par celles de votre compte (voir la section 5).

<div id="nc-booking"></div>
<script src="https://cdn.netcoder.com/booking.v1.js"
        data-backend-url="wss://relay.netcoder.ca/booking"
        data-client-key="YOUR-CLIENT-GUID"
        data-calendar-key="YOUR-CALENDAR-GUID"
        data-container="#nc-booking"></script>

C'est tout. Les types de rendez-vous, le calendrier, les heures, le formulaire, le style et la confirmation sont fournis par le script, et rien d'autre n'est à installer sur votre serveur.

Le plus simple est de le prendre dans l'application Netcoder : cliquez sur Calendrier dans le menu, ouvrez le menu du calendrier, le bouton à trois points (⋮) en haut du calendrier, et choisissez Paramètres d'intégration. Sélectionnez un calendrier ou un calendrier groupé, et copiez le code avec vos clés déjà inscrites.

Avant que quiconque puisse réserver, définissez dans l'application les types de rendez-vous offerts, qui peut prendre chacun d'eux, et les disponibilités de ces personnes (section 2).

2. Avec qui le rendez-vous est pris

L'invité choisit un type de rendez-vous et une heure. Avec qui le rendez-vous est pris est donné par le code, de l'une de deux façons, jamais les deux.

Un calendrier

Avec data-calendar-key, le widget réserve une personne, celle à qui est le calendrier. Le widget montre le nom de ce calendrier : son Nom du calendrier, défini dans Disponibilités, ou sinon le nom de la personne.

Un calendrier groupé

Avec data-grouped-calendar-key, le widget réserve les personnes d'un calendrier groupé : celle qui est libre à l'heure choisie, à tour de rôle. Pour en créer un dans l'application, choisissez Calendriers groupés dans le menu du calendrier, et donnez-lui un nom que voient les invités, comme Ventes, une langue, et les personnes qui en font partie. Le widget montre alors le nom du calendrier groupé et parle sa langue.

        data-grouped-calendar-key="GROUPED-CALENDAR-GUID"

Le code donne l'un ou l'autre. Avec les deux, ou aucun, le widget affiche « Ce calendrier ne peut pas être réservé en ligne. »

Ce qui est offert à l'invité

Types de rendez-vous — les types qu'au moins une de ces personnes peut prendre, selon Qui peut le prendre dans chaque type de rendez-vous de l'application. Les types désactivés ne sont pas montrés.
Heures — les heures où au moins une de celles qui peuvent prendre le type est libre, selon ses heures de disponibilité, ses rendez-vous déjà pris, et les périodes occupées de son calendrier Google ou Microsoft connecté. Le préavis, les battements et le nombre de jours à l'avance du type de rendez-vous s'appliquent.
La personne — le rendez-vous va à l'une de celles qui sont libres à l'heure choisie, à tour de rôle : celle dont le dernier rendez-vous est le plus ancien passe en premier. Deux invités qui réservent la même heure au même moment ont deux personnes différentes, tant que deux sont libres.

3. Ce que voit le visiteur

Le widget est dessiné dans l'élément désigné par data-container ; sans lui, juste avant la balise de script. Il prend toute la largeur de cet élément ; de 360 à 560 px environ lui conviennent le mieux.

Type de rendez-vous — les types de rendez-vous, avec leur durée, leur lieu (une adresse, chez le visiteur, un appel téléphonique ou un appel vidéo) et leur description. Cette étape est sautée lorsqu'il n'y en a qu'un.
Jour — un calendrier du mois où les jours qui ont des heures libres ressortent, avec des flèches vers les mois précédent et suivant. Un mois sans heure libre passe de lui-même au suivant.
Heure — les heures libres du jour choisi, dans le fuseau horaire du visiteur, nommé sous les heures.
Coordonnées — le nom et le courriel, tous deux obligatoires, un numéro de téléphone et des notes. Le téléphone est obligatoire pour un appel téléphonique, et l'adresse du visiteur est demandée pour un rendez-vous chez lui.
Confirmation — le rendez-vous pris, son lieu (une adresse s'ouvre dans Google Maps, un appel vidéo donne son lien), l'adresse à laquelle la confirmation a été envoyée, un lien pour le déplacer ou l'annuler, et un bouton pour réserver une autre heure.

4. Paramètres

À placer sur la balise de script.

Attribut	Obligatoire	Description	Par défaut
`data-backend-url`	Oui	Adresse du relais Netcoder : `wss://relay.netcoder.ca/booking`
`data-client-key`	Oui	Votre clé client
`data-calendar-key`	L'un des deux	Le calendrier d'une personne
`data-grouped-calendar-key`	L'un des deux	Un calendrier groupé, ses personnes à tour de rôle
`data-language`		`en` ou `fr`	Celle du calendrier groupé
`data-title`		Titre du widget	Prendre rendez-vous avec {{calendar-name}}
`data-title-en, data-title-fr`		Titre dans une langue, avant data-title
`data-container`		Sélecteur CSS de l'élément où dessiner le widget	Avant le script
`data-accent-color`		Couleur principale	`#D97955`
`data-accent-text-color`		Couleur du texte sur la couleur principale	`#FFFFFF`

5. Obtenir vos clés

Les clés sont des GUID, par exemple 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60. Elles se trouvent dans l'application Netcoder :

Clé client — votre compte. Affichée dans Paramètres d'intégration.
Clé du calendrier groupé — un calendrier groupé. Affichée dans Paramètres d'intégration quand Un calendrier groupé est choisi, et copiée avec Copier la clé dans la liste des calendriers groupés.
Clé du calendrier — le calendrier d'une personne. Affichée dans Paramètres d'intégration quand Un calendrier est choisi.

Si une clé manque ou est mal formée, ou si les deux clés ou aucune sont données, le widget affiche « Ce calendrier ne peut pas être réservé en ligne. » et le serveur n'est pas contacté. Le même message paraît lorsqu'une clé est valide mais inconnue, appartient à un autre compte, ou désigne un calendrier groupé supprimé : vérifiez les valeurs dans Paramètres d'intégration.

6. Langue et titre

L'attribut data-language fixe la langue des dates et des heures, et celle des types de rendez-vous : leurs noms, descriptions et lieux sont en français lorsque leur français est rempli dans l'application, et en anglais sinon.

en — anglais.
fr — français.

Sans data-language, le widget prend la langue de son calendrier groupé : le code d'un calendrier groupé français n'a donc pas besoin de langue ; sans l'un ni l'autre, la langue de votre compte. Sur un site bilingue, donnez à chaque page sa langue. Les boutons et messages du widget suivent data-language, en anglais ou en français.

Le titre

Le titre est, dans l'ordre : data-title- suivi de la langue, comme data-title-fr pour le français, puis data-title, puis celui par défaut, « Prendre rendez-vous avec {{calendar-name}} ». Dans un titre, {{calendar-name}} est remplacé par le nom du calendrier groupé, ou du calendrier.

        data-title-en="Book a meeting with {{calendar-name}}"
        data-title-fr="Prendre rendez-vous avec {{calendar-name}}"

7. Personnaliser en CSS

Au-delà du titre et des deux couleurs, personnalisez le widget depuis votre propre feuille de style. Ses styles se chargent après les vôtres : commencez vos sélecteurs par body pour l'emporter, plutôt que d'utiliser !important.

body .ncb-title { font-size: 22px; }

Sélecteur	Ce que c'est
`.ncb`	Le widget
`.ncb-title`	Le titre
`.ncb-type`	Un type de rendez-vous
`.ncb-day`	Un jour ; `ncb-open` avec des heures libres, `ncb-selected` une fois choisi
`.ncb-time`	Une heure
`.ncb-field, .ncb-primary`	Les champs du formulaire et le bouton de réservation

Un texte blanc sur #D97955, la couleur par défaut, est sous le contraste WCAG AA de 4,5:1 : foncez la couleur, ou prenez un texte foncé comme #1B1B1B.

8. Comment ça fonctionne

Le widget garde un WebSocket sécurisé vers le relais Netcoder. Chacune de ses demandes — ce qui peut être réservé, les heures libres d'un mois, une réservation — est traitée sur les serveurs de Netcoder, et la réponse est renvoyée à la page.

Heures revérifiées — quand le visiteur réserve, l'heure est revérifiée auprès des personnes qui peuvent la prendre. Si elle a été prise entre-temps, le visiteur en est averti et ramené aux heures encore libres, sans perdre ce qu'il a saisi.
Confirmation — l'invité reçoit un courriel de confirmation avec une invitation à ajouter le rendez-vous à son calendrier, son lieu, et un lien pour le déplacer ou l'annuler. La personne réservée reçoit aussi un courriel, et le rendez-vous s'inscrit dans son calendrier connecté, avec l'adresse ou le lien vidéo.
Rappels — l'invité reçoit un rappel avant le rendez-vous, par courriel, et par texto lorsque le type de rendez-vous le prévoit et que l'invité a donné son téléphone.
Déplacement — un rendez-vous déplacé par l'invité reste avec la même personne.
Connexion — si la connexion tombe, le widget se reconnecte seul ; une demande restée sans réponse est signalée, et peut être refaite.

9. Essais et dépannage

Le widget n'apparaît pas — vérifiez que l'adresse du script est joignable, que le code est placé avant </body>, et que data-container désigne un élément de la page. Après un changement du code, rechargez la page sans cache (Ctrl+Maj+R).
« Ce calendrier ne peut pas être réservé en ligne. » — une clé manque, est mal formée, inconnue, d'un autre compte, ou désigne un calendrier groupé supprimé ; ou les deux clés, ou aucune, sont données. Voir la section 5.
« Il n’y a rien à réserver pour le moment. » — aucune des personnes réservées ne peut prendre un type de rendez-vous activé. Vérifiez Qui peut le prendre, et que le type est activé.
« Aucune plage horaire n’est disponible ce mois-ci. » — vérifiez les heures de disponibilité des personnes, le préavis et le nombre de jours à l'avance du type de rendez-vous, et leurs calendriers connectés, dont les périodes occupées sont écartées.
« Le service de rendez-vous est injoignable. » — le relais n'a pas pu être joint, ou n'a pas répondu à temps. Vérifiez l'adresse WebSocket, et qu'elle commence par wss:// sur une page https://.
Pas de courriel de confirmation — vérifiez les courriels indésirables du visiteur, puis demandez à Netcoder de vérifier les paramètres de courriel de votre compte.
Tous les domaines fonctionnent — le widget s'installe sur n'importe quel site Web ; rien n'est à configurer sur votre serveur.

10. Exemple complet

Un widget qui réserve un calendrier groupé, avec toutes ses options :

<div id="nc-booking"></div>
<script src="https://cdn.netcoder.com/booking.v1.js"
        data-backend-url="wss://relay.netcoder.ca/booking"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-grouped-calendar-key="a1b2c3d4-e5f6-4788-9a0b-1c2d3e4f5a6b"
        data-language="fr"
        data-title-fr="Prendre rendez-vous avec {{calendar-name}}"
        data-container="#nc-booking"
        data-accent-color="#D97955"
        data-accent-text-color="#FFFFFF"></script>

Besoin d'aide pour définir vos types de rendez-vous et vos calendriers groupés ? Prenez rendez-vous ou écrivez-nous.