Documentation

Intégrer les widgets BIMI

Deux widgets indépendants - réservation et carte cadeau - s'intègrent au choix de deux façons : directement dans une balise <div>à l'endroit voulu de votre page, ou sous forme d'un bouton flottant qui s'auto-injecte (aucun <div> à placer - voir la section 5). Dans les deux cas, un unique <script>suffit. Aucune dépendance à installer, aucun conflit avec le CSS ou le JavaScript déjà présents sur votre site (le widget s'exécute dans un Shadow DOM isolé).

1. Trouvez votre identifiant

Chaque établissement a un identifiant unique (ex. chez-marco), visible depuis le dashboard dans Paramètres → Widgets. Remplacez votre-slug dans les extraits ci-dessous par cet identifiant.

2. Widget de réservation

Collez cet extrait à l'endroit de votre page où le formulaire doit apparaître (une page dédiée "Réserver", un pied de page, une modale…).

<div id="bimi-booking" data-tenant="votre-slug" data-widget="reservation"></div>
<script src="https://booking.bimi.app/widget.js"></script>

3. Widget carte cadeau

Même principe, avec data-widget="gift-card". Nécessite d'avoir activé la carte cadeau et connecté un compte Stripe depuis le dashboard.

<div id="bimi-booking" data-tenant="votre-slug" data-widget="gift-card"></div>
<script src="https://booking.bimi.app/widget.js"></script>

4. Personnaliser l'apparence

Par défaut, le widget reprend la couleur définie dans Paramètres → Branding. Vous pouvez la surcharger ponctuellement avec data-color :

<div
  id="bimi-booking"
  data-tenant="votre-slug"
  data-widget="reservation"
  data-color="#1d4ed8"
  data-lang="fr"
></div>
<script src="https://booking.bimi.app/widget.js"></script>

5. Pas envie de placer un <div> ? Le bouton flottant

Vous n'avez pas de développeur, ou vous ne savez pas où placer le formulaire dans votre page ? Ajoutez data-display="button": le widget s'auto-injecte alors sous forme de bouton flottant en bas de votre site, sans aucun <div> à poser - un seul <script> suffit, où que vous le colliez dans votre page.

<!-- Aucun <div> nécessaire : juste ce <script>, n'importe où dans <body> -->
<script
  src="https://booking.bimi.app/widget.js"
  data-tenant="votre-slug"
  data-widget="reservation"
  data-display="button"
></script>

Au clic, le widget s'ouvre par-dessus votre page (même formulaire, même sécurité). Position, couleur et texte du bouton se personnalisent avec data-position, data-color et data-label :

<script
  src="https://booking.bimi.app/widget.js"
  data-tenant="votre-slug"
  data-widget="gift-card"
  data-display="button"
  data-position="bottom-left"
  data-color="#1d4ed8"
  data-label="Offrir une carte cadeau"
></script>

6. Attributs disponibles

Attribut	Description
data-tenant*	L'identifiant de votre établissement (visible dans Paramètres → Widgets).
data-widget*	"reservation" ou "gift-card" selon le widget à afficher.
data-display	"inline" (défaut) monte le widget dans le <div> fourni. "button" auto-injecte un bouton flottant qui ouvre le widget en overlay - aucun <div> requis dans ce cas.
data-position	Coin d'ancrage du bouton flottant en mode "button" : "bottom-right" (défaut) ou "bottom-left".
data-label	Texte du bouton flottant en mode "button" (défaut : "Réserver", ou "Offrir une carte cadeau" pour le widget carte cadeau).
data-color	Couleur d'accent (hex). Reprend la couleur de branding configurée dans Paramètres si absente.
data-lang	Langue de l'interface (défaut "fr").

* attribut obligatoire

7. Autoriser votre domaine

Pour des raisons de sécurité, le widget n'accepte les requêtes que depuis les domaines que vous avez explicitement autorisés. Ajoutez l'URL de votre site (ex. https://www.votre-restaurant.fr) dans Paramètres → Sécurité → Origines autorisées avant de mettre le widget en ligne.

Pas encore de site web ?

Chaque établissement dispose aussi d'une page de réservation prête à l'emploi et référencée sur Google, à l'adresse bimibooking.app/votre-slug- utile en complément du widget, ou en solution de repli si vous n'avez pas encore de site.