Vue d'ensemble

Le widget Service est un formulaire de réservation qui consulte les disponibilités en temps réel et crée la réservation directement dans l’agenda du restaurant. Il s’exécute dans le navigateur du client — soit sur une page prête à l’emploi que nous hébergeons, soit intégré à votre propre site.

Il ne requiert aucune clé d’API ni développement côté serveur. Consulter les disponibilités et réserver sont des opérations publiques portant sur un seul restaurant : il n’y a donc aucun identifiant à placer dans une page.

Il y a deux façons de l’utiliser, et la première ne demande aucun code.

Le plus simple : la page de réservation

Chaque restaurant en possède déjà une, en ligne dès maintenant, sans rien à construire :

https://book.useservice.app/r/chez-marie

Liez-la depuis votre navigation, un e-mail, un QR code sur la table ou une fiche Google. Aucun script, aucun déploiement, rien à maintenir, et elle est toujours à la version courante. Pour beaucoup de restaurants, c’est toute l’intégration — voir La page de réservation.

La suite de cette page porte sur l’affichage du même formulaire sur votre propre page, afin que le client ne quitte jamais votre site.

Le placer sur votre propre page

Chargez le widget de réservation sur votre site de deux façons :

Une balise de script. Une ligne de HTML, aucun JavaScript à écrire. C’est ce que le back-office vous fournit et ce qu’utilisent presque toutes les intégrations.
L’API JavaScript. Vous appelez vous-même ServiceWidget.create(), ce qui vous donne une référence pour l’ouvrir et le fermer, lui transmettre du contexte et écouter des événements. À privilégier lorsque votre page doit piloter le widget plutôt que simplement l’afficher.

Dans les deux cas, data-mode (ou mode) détermine son affichage, et pour la plupart des intégrations c’est la seule décision à prendre. Les deux sont traités dans Widget de réservation.

Intégré (`inline`)

S’affiche dans le flux de la page, à l’intérieur d’un conteneur que vous placez. À utiliser pour une page « Réserver » dédiée ou une section de la page d’accueil : le formulaire est visible sans que le client ait à cliquer.

<div id="service-widget"></div>
<script src="…/widget.js" data-slug="chez-marie" data-mode="inline" async></script>

En surcouche (`popover`)

N’affiche rien tant que rien ne l’ouvre. C’est vous qui fournissez le bouton : il peut donc figurer dans votre propre navigation et respecter votre design. À utiliser lorsque réserver est une action parmi d’autres plutôt que l’objet de la page.

<button data-service-widget-open>Réserver une table</button>
<script src="…/widget.js" data-slug="chez-marie" data-mode="popover" async></script>

Bouton flottant (`sticky`)

Le widget affiche son propre bouton flottant, ancré dans un coin, et s’ouvre lui-même. Rien à modifier sur votre page — utile lorsque vous ne pouvez pas éditer le gabarit, seulement ajouter un script.

<script
  src="…/widget.js"
  data-slug="chez-marie"
  data-mode="sticky"
  data-position="bottom-right"
  async
></script>

Sur mobile, les trois s’affichent en plein écran, quel que soit celui que vous avez choisi. Le mode détermine la façon dont le client atteint le formulaire, pas l’aspect du formulaire une fois ouvert.

Le mettre à vos couleurs

La couleur, la langue et le contenu du formulaire sont définis par le restaurant, dans son back-office Service — pas dans votre balisage. C’est délibéré : le restaurant modifie son identité visuelle sans toucher à votre page, et une refonte de votre côté ne peut pas casser ses règles de réservation. Voir Apparence pour la frontière exacte.

Aller plus loin

Tout ce qui suit est facultatif, et la plupart des intégrations n’en utilisent rien. Servez-vous-en lorsque le widget doit connaître quelque chose que votre page sait déjà.

Si vous voulez	Voir
Ouvrir le formulaire déjà positionné sur une date, un nombre de couverts ou un service	Transmettre du contexte
Éviter le formulaire de contact pour un client déjà connecté	Identifier le client
Afficher certaines de ces valeurs comme fixes plutôt que modifiables	Verrouiller des champs
Réagir dans votre propre code lorsqu’une réservation est créée	Événements
Transporter le même contexte par un lien plutôt qu’un script	Liens profonds
Comparer les approches avant de vous engager	Choisir une intégration

Relation avec l’API

Le widget et l’API sont deux produits distincts, et la plupart des intégrations qui utilisent les deux le font pour deux moitiés différentes du travail.

	Widget	API
S’exécute dans	Le navigateur du client	Votre serveur
Authentification	Aucune	Clé d’API `sk_live_…`
Opérations	Crée des réservations	Lit réservations et clients

Le widget prend la réservation ; l’API et ses webhooks en informent vos autres systèmes.