Intégrer le widget sur votre site

Le widget Batlr est une iframe que vous pouvez coller sur n'importe quel site (WordPress, Wix, Squarespace, Shopify, Webflow, sur-mesure…).

Récupérer votre code iframe

Réglages → Online Booking → Intégration
Section Code iframe
Cliquez sur Copier

Le code ressemble à :

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

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

Coller sur votre site

WordPress

Page → Éditer
Bloc HTML personnalisé
Collez le code → Publier

Wix

Page → + Ajouter → Code intégré
HTML iframe
Collez le code → Mettre à jour

Squarespace

Page → Modifier
Bloc Code
Collez le code → Enregistrer

Webflow

Element panel → Embed
Collez le code → Save

Shopify

Theme → Edit code
Section → reservation.liquid
Collez le code → Save

Site sur-mesure

Collez le code dans votre HTML, à l'endroit souhaité.

Dimensionnement

Le widget est responsive :

Largeur — 100% du conteneur, plafonné à max-width: 480px par défaut
Hauteur — 720px recommandé (le contenu scroll si besoin)

Pour ajuster :

<iframe
  src="https://www.batlr.app/widget.html?restaurant_id=..."
  width="100%"
  height="900"
  style="max-width: 600px;">
</iframe>

Astuce : Astuce : pour un widget en pleine page, supprimez le max-width et augmentez la height à 100vh.

Position recommandée

Mettez le widget au-dessus de la ligne de flottaison sur votre page d'accueil. Les utilisateurs ne doivent pas avoir à scroller pour réserver.

Idéalement :

Bloc "Réservez" en hero
Lien "Réserver" en sticky dans le menu (pointant vers la section widget)
Page dédiée /reservations accessible depuis le menu principal

Vérifier l'intégration

Après publication :

Ouvrez votre site dans un navigateur
Vérifiez que le widget se charge sans bordure ni scroll bizarre
Réservez un créneau test
Vérifiez que la réservation apparaît dans Batlr