Un widget de réservation à coller sur le site de votre restaurant.

Dans la page, bouton flottant ou iFrame : lequel choisir ?

Dans le doute, commencez par « Dans la page » sur une page dédiée, et ajoutez le bouton flottant si la réservation doit rester à portée de main partout. L'iFrame, c'est la roue de secours : contrairement au format « Dans la page », sa hauteur reste fixe et ne suit pas le formulaire.

Les trois codes, tels que vous les collerez

<script src="https://couteau.io/widget.js" data-restaurant="votre-restaurant" data-mode="inline" data-lang="fr" async></script>

<script src="https://couteau.io/widget.js" data-restaurant="votre-restaurant" data-mode="button" data-color="#F75B83" async></script>

<iframe src="https://couteau.io/r/votre-restaurant/embed" title="Réserver une table" loading="lazy"
  style="display:block;width:100%;max-width:560px;height:760px;border:0;margin:0 auto"></iframe>

Les deux premiers tiennent en une seule ligne. data-restaurant porte l'identifiant de votre page, déjà rempli ; data-mode choisit le format. Dans le premier, data-lang est réglé sur fr : remplacez fr par en, es, it, de, nl ou pt, ou retirez l'attribut pour suivre la langue du visiteur. Dans les deux autres codes, le formulaire suit déjà la langue du visiteur, et le bouton flottant aussi : « Réserver une table », « Book a table », « Reservar mesa »… Pour un texte à vous, le même dans toutes les langues, ajoutez l'attribut data-label avec ce texte.

Installer le widget : copier, coller, publier, tester

1. 1

   Étape 1 : Choisissez le format dans couteau.io

   Paramètres > Réservation en ligne > Widget, rubrique « Intégrer sur votre site » : onglet Dans la page, Bouton flottant ou iFrame. Cet écran est ouvert au propriétaire et aux responsables.

2. 2

   Étape 2 : Copiez le code

   Cliquez sur « Copier le code ». L'identifiant de votre page de réservation y figure déjà : il n'y a rien à compléter, sauf la langue si vous voulez la fixer.

3. 3

   Étape 3 : Collez-le dans votre site

   Dans l'éditeur de votre site, ajoutez un bloc qui accepte du code HTML là où le formulaire doit apparaître, et collez le code. Pour le bouton flottant, collez-le une seule fois, avant </body>.

4. 4

   Étape 4 : Publiez, des deux côtés

   Publiez la page de votre site, puis vérifiez côté couteau.io que la réservation en ligne est ouverte : une page nouvellement créée est hors ligne. L'interrupteur « En ligne » se trouve sur la carte « Page de réservation », dans Paramètres.

5. 5

   Étape 5 : Testez sur un téléphone

   Ouvrez votre site sur un téléphone et parcourez les étapes. Pour juger des couleurs sans rien réserver, l'aperçu des réglages suffit : il n'enregistre rien, pas même une demande de groupe. Une réservation menée jusqu'au bout depuis votre site est une vraie réservation, à annuler ensuite.

WordPress, Wix, Squarespace : est-ce que ça marche ?

Le widget fonctionne sur tout site qui accepte du code HTML : une balise script pour les formats Dans la page et Bouton flottant, une balise iframe sinon. Il n'y a ni extension WordPress ni application Wix ou Squarespace à installer : on colle le code dans un bloc prévu pour ça, comme on intègre une carte ou une vidéo.

Il n'existe pas de liste officielle d'éditeurs compatibles. Si le vôtre refuse les scripts, ou si le formulaire n'apparaît pas une fois le site publié, prenez le format iFrame : il est fait pour ce cas.

Là où l'on ne colle pas de code, on colle un lien : celui de votre page de réservation en ligne, dans votre bio Instagram ou dans la rubrique Réservations de votre fiche Google, comme l'explique le guide lien de réservation sur Google. Pas de site du tout ? Le guide réserver sans site internet prend le relais.

À vos couleurs, sans logo couteau.io

Le widget reprend les réglages de votre page de réservation : couleur d'accent, fond, texte, logo du restaurant ou logo dédié, nom affiché et sous-titre. Vous choisissez d'afficher ou non le nom, le sous-titre et les étapes, et un aperçu en direct montre le résultat avant d'enregistrer, sans créer de réservation. Le contraste des couleurs reste lisible automatiquement.

• Le texte du bouton flottant : « Réserver une table » dans le code proposé, à remplacer par la formule de votre choix.
• Sa couleur : votre couleur d'accent, déjà inscrite dans le code, et un texte qui passe en sombre ou en blanc pour rester lisible.
• Son côté : à droite par défaut, à gauche en ajoutant l'attribut data-position avec la valeur left.

Le rendu sur téléphone et sur ordinateur

• Dans la page : le formulaire prend la largeur disponible, jusqu'à 560 px, et sa hauteur s'ajuste à chaque étape. Si le haut du formulaire est sorti de l'écran, la page remonte jusqu'à lui à l'étape suivante.
• Bouton flottant : sur téléphone, la fenêtre de réservation s'ouvre depuis le bas et occupe presque tout l'écran ; sur ordinateur, elle fait 480 px de large au plus. Elle se ferme avec la croix, la touche Échap ou un clic à côté.
• iFrame : le cadre garde sa hauteur fixe, quel que soit l'écran.
• Dans les trois cas, le client suit le même parcours que sur votre page : mêmes créneaux, même liste d'attente quand c'est complet, même demande de groupe au-delà de la taille maximale en ligne, mêmes emails.

Mesurer ce que le widget rapporte

Les statistiques de réservation suivent le parcours en ligne, de l'ouverture du widget jusqu'à la confirmation, avec la conversion et les appareils utilisés. Dans les sources de réservation, la part « En ligne (widget) » se lit à côté de celle « Par l'équipe » : de quoi juger vous-même ce que la réservation en ligne apporte. Les demandes de groupe restent hors de ce parcours ; acceptées, elles comptent dans la source « Groupe ».

Sur votre page de réservation, vos propres visites ne faussent pas les chiffres : un navigateur connecté à couteau.io n'y est pas compté, et l'option « Ne pas compter mes visites depuis cet appareil » couvre ceux qui ne le sont pas, comme votre téléphone personnel. Dans le widget posé sur votre site, la plupart des navigateurs ne lui transmettent ni votre connexion ni cette option : ouvrez une fois, sur chaque appareil, une page de votre site en ajoutant ?notrack=1 à son adresse, et vos essais n'y comptent plus (formats Dans la page et Bouton flottant ; avec l'iFrame, ils comptent comme ceux d'un client).

Questions fréquentes