Développeurs

Intégrer Batlr sur un site

Cette page s'adresse aux développeurs ou intégrateurs web qui souhaitent intégrer le widget Batlr sur le site d'un client. Pour les non-techniques, voir Intégrer le widget.

Vue d'ensemble

Le widget Batlr est une application web statique servie depuis https://www.batlr.app. Il s'embed via une simple iframe et communique avec Supabase + Stripe en backend.

URL de l'iframe

https://www.batlr.app/widget.html?restaurant_id={UUID}

Paramètres de query

ParamètreRequiredDescription
restaurant_id✓UUID du restaurant Batlr
utm_sourceoptionnelTracking source (instagram, google, etc.)
utm_mediumoptionnelTracking medium (bio, ad, etc.)
utm_campaignoptionnelTracking campagne
themeoptionnellight ou dark (par défaut light)
langoptionnelfr ou en (par défaut fr)

Les UTMs sont enregistrées dans la source de la réservation côté Batlr.

Iframe responsive

Code minimal :

<iframe
  src="https://www.batlr.app/widget.html?restaurant_id=YOUR_ID"
  width="100%"
  height="720"
  frameborder="0"
  allow="payment">
</iframe>

L'attribut allow="payment" est nécessaire pour qu'Apple Pay fonctionne dans l'iframe.

Exemple wrapper responsive

<div style="max-width: 480px; margin: 0 auto;">
  <iframe
    src="https://www.batlr.app/widget.html?restaurant_id=YOUR_ID"
    width="100%"
    height="720"
    frameborder="0"
    allow="payment"
    style="border: none; display: block;">
  </iframe>
</div>

CSP & sécurité

Le widget est servi avec ces headers :

  • X-Frame-Options: ALLOWALL (autorise l'embed cross-origin)
  • Content-Security-Policy strict (limite scripts/styles tiers)
  • frame-ancestors * (l'iframe peut être incluse partout)

Si votre site a une CSP stricte, ajoutez https://www.batlr.app à votre frame-src.

postMessage events (à venir)

Le widget envoie/écoute des messages via window.postMessage pour permettre une intégration avancée :

EventDirectionPayload
batlr:readywidget → parent{}
batlr:reservationCreatedwidget → parent{ id, name, date, time, partySize }
batlr:reservationCancelledwidget → parent{ id }
batlr:resizewidget → parent{ height } (auto-resize iframe)
batlr:setThemeparent → widget{ theme: "light"|"dark" }

Cette API est en bêta. L'équipe Batlr peut vous aider à l'utiliser pour des intégrations avancées (analytics côté site, redirect après réservation, etc.).

Intégration "site standalone"

Si vous voulez une page complète plutôt qu'une iframe, utilisez :

https://www.batlr.app/site.html?restaurant_id=YOUR_ID

Cette page :

  • N'est pas embeddable (X-Frame-Options: DENY)
  • Affiche image de couverture, info restaurant, formulaire en pleine page
  • Idéale pour partage via lien ou redirect depuis votre site

Lien de paiement direct

Si vous voulez générer manuellement un lien de paiement (ex : depuis votre CRM externe), appelez l'edge function pay :

POST https://www.batlr.app/pay
Content-Type: application/json

{
  "restaurant_id": "...",
  "amount_cents": 5000,
  "currency": "EUR",
  "metadata": { "internal_order_id": "..." }
}

Ce flow nécessite une clé API Batlr — contactez l'équipe pour l'obtenir.

Widget en marque blanche

Si vous êtes une agence ou un intégrateur qui gère plusieurs restaurants, l'équipe Batlr peut vous fournir un wrapping en marque blanche (CSS personnalisé, sous-domaine custom). Contactez partners@batlr.app.

À lire ensuite