Widget de réservation pour restaurant : ce que c’est et comment ça marche

La plupart des restaurateurs croisent l’expression « widget de réservation » en comparant des systèmes de réservation, et hochent la tête sans que personne leur explique de quoi il s’agit vraiment. Cela vaut dix minutes, parce que la différence entre un widget et l’autre solution détermine qui détient les données de vos clients, qui contrôle l’e-mail de confirmation, et si un client arrivé sur votre page d’accueil y reviendra un jour.

Ce texte s’adresse à la personne qui dirige le restaurant, pas à celle qui construit le site. Aucune ligne de code n’est nécessaire pour comprendre ce qui suit, et il est très peu probable que vous ayez besoin d’un développeur pour l’installer.

Un widget, c’est un parcours de réservation qui tourne sur votre propre pageCopy link to section: Un widget, c’est un parcours de réservation qui tourne sur votre propre page

Un site peut prendre des réservations de deux façons. La première, c’est le lien : le client appuie sur « Réserver une table », quitte votre site et atterrit ailleurs — une fiche sur une plateforme, une page de réservation hébergée, un domaine tiers. La seconde, c’est le widget : le parcours de réservation s’affiche à l’intérieur de votre page, sous votre propre en-tête, sur votre propre domaine, et le client ne part jamais.

Techniquement, un widget est un petit logiciel que votre système de réservation vient afficher dans l’espace que vous lui réservez sur la page. Concrètement, cela signifie que tout le parcours, de « quels sont vos horaires » à « votre réservation est confirmée », se déroule entre votre barre de navigation et votre pied de page.

L’anatomie d’un widget de réservationCopy link to section: L’anatomie d’un widget de réservation

Tout widget de réservation sérieux fait les mêmes cinq choses dans le même ordre. Si vous les avez en tête, vous pouvez juger n’importe quelle démonstration commerciale en quatre-vingt-dix secondes.

1. 1Recherche de disponibilité. Avant d’afficher quoi que ce soit, le widget demande à votre système de réservation ce qui est réellement réservable : vos horaires d’ouverture, vos services, vos tables et tout ce qui est déjà inscrit au cahier.
2. 2Nombre de convives. Demandé en premier, parce qu’il conditionne tout le reste. Une table de deux et une table de huit n’ont pas la même disponibilité, ni souvent la même durée de table.
3. 3Date et heure. Le client voit de vrais créneaux, pas un champ de texte libre. Les horaires indisponibles doivent être absents ou visiblement désactivés, plutôt qu’acceptés puis refusés.
4. 4Coordonnées du client. Nom, téléphone, e-mail et l’éventuelle remarque que vous autorisez. À garder court : chaque champ ajouté vous coûte des réservations finalisées.
5. 5Confirmation. Une confirmation à l’écran immédiatement, puis un message au client reprenant les détails et un moyen d’annuler ou de modifier.

Ce dernier message travaille plus que la plupart des restaurateurs ne l’imaginent : c’est la seule communication qu’un client ayant réservé ouvre à coup sûr. Que mettre dans une confirmation de réservation au restaurant détaille ce qui doit y figurer.

Intégré, en fenêtre, en bouton ou en page complèteCopy link to section: Intégré, en fenêtre, en bouton ou en page complète

Le même parcours de réservation peut se présenter de plusieurs façons, et le choix relève de la mise en page plutôt que de la technique. La plupart des systèmes permettent de passer de l’une à l’autre sans rien changer sur votre site.

L’intégration dans la page reste le choix par défaut le plus sûr pour la page d’accueil d’un restaurant. Les fenêtres convertissent bien quand le bouton est évident, mais on en abuse vite : un point d’entrée clair vaut mieux que trois qui se concurrencent.

Ce que fait vraiment le code d’intégrationCopy link to section: Ce que fait vraiment le code d’intégration

On vous remettra un extrait de code à coller dans votre site. Il tient généralement en deux lignes, et il vaut la peine de savoir à quoi sert chacune pour distinguer un vrai problème d’installation d’un simple problème de réglage.

<div data-booking-widget="YOUR_WIDGET_ID"></div>
<script async src="https://example.com/widget/v1.js"></script>

• La div est un emplacement vide. Elle ne contient rien et marque l’endroit de la page où le parcours de réservation doit s’afficher.
• Le script charge le logiciel de réservation chez votre prestataire, trouve l’emplacement et le remplit. Marqué async, il se charge en parallèle du reste de votre page au lieu de la retarder.
• L’identifiant du widget est un identifiant public, pas un mot de passe. Il indique au script quel restaurant charger, ce qui rend l’extrait sans risque à envoyer par e-mail à la personne qui gère votre site.
• Le script ne se place qu’une seule fois par page, même si vous y placez deux emplacements.

Comment il reste synchronisé avec vos disponibilités réellesCopy link to section: Comment il reste synchronisé avec vos disponibilités réelles

La seule question qui vaille la peine d’être posée à un prestataire est de savoir où la disponibilité est calculée. Dans un widget correctement conçu, la réponse est toujours « sur le serveur, au moment où le client regarde ». Le widget ne conserve aucune copie de votre cahier. Il demande, à chaque fois, et affiche ce qu’on lui répond.

C’est ce qui évite la panne de confiance qui fait douter les restaurateurs de la réservation en ligne : deux clients qui prennent la même table de 20 h parce que tous deux consultaient une page exacte dix minutes plus tôt. Cela veut aussi dire qu’une réservation prise au téléphone par votre hôtesse d’accueil et saisie dans le système retire ce créneau du site en quelques secondes, et qu’une table bloquée pour une privatisation disparaît du widget sans que vous touchiez à votre site.

Le corollaire, c’est qu’un seul endroit doit détenir la vérité. Si votre widget, votre cahier téléphonique et une fiche sur une plateforme portent chacun leur propre version de ce soir, vous avez trois cahiers et aucun système de réservation. Comment organiser les réservations par téléphone, sur place et en ligne explique comment les regrouper.

Le styliser pour qu’il n’ait pas l’air rapportéCopy link to section: Le styliser pour qu’il n’ait pas l’air rapporté

Un widget qui jure avec le site qui l’entoure se lit comme une publicité tierce, et les clients le traitent avec la méfiance qu’ils réservent aux publicités. Vous aurez en général la main sur la couleur du bouton principal, les couleurs de texte et de fond, la couleur de bordure, l’arrondi des angles, le texte du bouton et la langue. Reprenez-les de la palette existante de votre site plutôt que d’en inventer de nouvelles.

• Alignez la couleur du bouton sur l’appel à l’action le plus fort déjà présent sur votre site, pour que le bouton de réservation se lise comme le vôtre.
• Alignez l’arrondi des angles sur celui de vos boutons et de vos blocs. Un widget tout en rondeurs dans un site à angles droits, c’est le détail que presque tout le monde remarque sans savoir le nommer.
• Employez les mots de vos clients sur le bouton. « Réserver une table » pour une salle de restaurant, « Réserver » pour un lieu plus décontracté. Trois mots ou moins survivent à un petit écran.
• Vérifiez le contraste en plein jour sur un téléphone, pas sur l’écran de votre bureau. Un texte pâle sur fond pâle est le défaut d’accessibilité le plus courant dans les widgets personnalisés.

Le vrai test, c’est le comportement sur mobileCopy link to section: Le vrai test, c’est le comportement sur mobile

L’essentiel du trafic de réservation arrive sur un téléphone, souvent à une main, souvent dehors, parfois avec une mauvaise connexion pendant que le client hésite sur le trottoir. Partez du principe que c’est votre utilisateur type, pas l’exception. Le widget doit occuper toute la largeur qu’on lui donne, garder des zones tactiles assez grandes pour être touchées en marchant, faire apparaître le clavier numérique pour un numéro de téléphone et ne jamais enfermer le client dans un défilement horizontal. Testez le parcours d’un seul pouce sur votre propre téléphone avant de décider qu’il fonctionne.

Ce qu’il faut vérifier avant la mise en ligneCopy link to section: Ce qu’il faut vérifier avant la mise en ligne

1. 1Ouvrez la page publiée dans une fenêtre de navigateur normale, pas dans l’aperçu de l’éditeur de site. Les éditeurs bloquent souvent les scripts, ce qui fait passer un widget en état de marche pour un widget cassé.
2. 2Vérifiez que les horaires affichés correspondent à ceux que vous servez réellement, dernier service et jours de fermeture compris.
3. 3Essayez un nombre de convives supérieur à votre plafond en ligne et vérifiez que le client se voit indiquer la marche à suivre plutôt que de se retrouver dans une impasse.
4. 4Faites une vraie réservation de bout en bout sur un téléphone, en données mobiles, wifi coupé.
5. 5Vérifiez que le message de confirmation arrive, se lit correctement, nomme le bon restaurant et contient un lien d’annulation qui fonctionne.
6. 6Vérifiez que la réservation apparaît dans votre système de réservation avec la bonne date, la bonne heure, le bon nombre de convives et les bonnes coordonnées.
7. 7Annulez la réservation de test pour qu’elle ne reste pas au cahier, et confirmez que le créneau revient dans le widget.

Les erreurs d’installation que nous voyons le plusCopy link to section: Les erreurs d’installation que nous voyons le plus

• Enregistré mais pas publié. La plupart des systèmes gardent un brouillon et une configuration en ligne. Un brouillon enregistré est invisible pour les clients, d’où le classique « je l’ai modifié et rien n’a changé ».
• Collé dans un bloc de texte au lieu d’un bloc d’intégration. Les éditeurs de site neutralisent le code collé dans du contenu ordinaire, si bien que l’extrait s’affiche tel quel sur la page. Utilisez le bloc HTML ou le bloc de code personnalisé.
• Le script collé trois fois. Une fois par page suffit. Les doublons ralentissent la page et peuvent afficher le widget en double.
• Enterré sous la ligne de flottaison. Un widget que personne n’atteint en défilant ne convertit rien. Placez un point d’entrée dans l’en-tête de chaque page.
• Laissé en place à côté de l’ancien formulaire. Un formulaire de contact orphelin qui continue de recueillir des demandes de réservation, c’est la moitié de vos réservations dans un système et l’autre moitié dans une boîte mail.

Pour la marche à suivre sur une plateforme précise, le guide d’installation du widget détaille le code d’intégration et le guide de personnalisation les réglages d’apparence. Si vous hésitez encore à intégrer un widget, Réservations directes ou plateformes de réservation : le vrai calcul donne la version honnête de ce débat.