Développeurs

Exemple de widget (iframe)

Page de démonstration avec exemples de code prêts à coller selon les principaux CMS.

Code minimal

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

Wordpress (Gutenberg)

  1. Page → + Bloc → HTML personnalisé
  2. Collez :
<div style="text-align:center;">
  <iframe
    src="https://www.batlr.app/widget.html?restaurant_id=YOUR_RESTAURANT_ID"
    width="100%"
    height="720"
    frameborder="0"
    allow="payment"
    style="border: none; max-width: 480px; margin: 0 auto;">
  </iframe>
</div>
  1. Mettre à jour

Wordpress (Elementor)

  1. + Widget → HTML
  2. Collez le code ci-dessus
  3. Mettre à jour

Wix

  1. Page → + Ajouter → Code → HTML iframe
  2. Collez :
<iframe
  src="https://www.batlr.app/widget.html?restaurant_id=YOUR_RESTAURANT_ID"
  width="100%"
  height="720"
  frameborder="0"
  allow="payment">
</iframe>
  1. Réglez la hauteur du conteneur Wix à 740px minimum
  2. Publier

Squarespace

  1. Page → + Bloc → Code
  2. Collez le code minimal
  3. Enregistrer

Squarespace peut nécessiter le plan Business ou supérieur pour l'embed iframe.

Webflow

  1. Designer → Add Element → Embed
  2. Collez le code
  3. Save

Shopify

  1. Theme → Edit code
  2. Section → Add new section → reservation.liquid
  3. Collez :
<section class="reservation-section">
  <iframe
    src="https://www.batlr.app/widget.html?restaurant_id=YOUR_RESTAURANT_ID"
    width="100%"
    height="720"
    frameborder="0"
    allow="payment"
    style="border: none; max-width: 480px;">
  </iframe>
</section>
  1. Ajoutez la section à votre page d'accueil ou à une page dédiée

Site sur mesure (HTML pur)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Réservez chez nous</title>
  <style>
    body {
      font-family: -apple-system, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 24px;
    }
    iframe {
      width: 100%;
      height: 720px;
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
  </style>
</head>
<body>
  <h1>Réservez votre table</h1>
  <iframe
    src="https://www.batlr.app/widget.html?restaurant_id=YOUR_RESTAURANT_ID"
    allow="payment">
  </iframe>
</body>
</html>

React

export function ReservationWidget() {
  return (
    <iframe
      src="https://www.batlr.app/widget.html?restaurant_id=YOUR_RESTAURANT_ID"
      width="100%"
      height={720}
      frameBorder={0}
      allow="payment"
      style={{ border: 'none', maxWidth: 480 }}
      title="Réservation Batlr"
    />
  );
}

Next.js (App Router)

// app/reservations/page.tsx
export default function ReservationsPage() {
  return (
    <main className="mx-auto max-w-xl p-6">
      <h1 className="mb-4 text-2xl font-bold">Réservez votre table</h1>
      <iframe
        src={`https://www.batlr.app/widget.html?restaurant_id=${process.env.NEXT_PUBLIC_BATLR_RESTAURANT_ID}`}
        className="h-[720px] w-full rounded-xl border-0 shadow-lg"
        allow="payment"
        title="Réservation Batlr"
      />
    </main>
  );
}

Astuces d'intégration

Astuce : Astuce 1 : utilisez loading="lazy" pour différer le chargement si le widget n'est pas above-the-fold :

<iframe ... loading="lazy"></iframe>

Astuce : Astuce 2 : ajoutez un fallback si l'iframe ne charge pas (ex : navigateur très ancien) :

<iframe ...>
  <p>Réservez par téléphone : +33 1 XX XX XX XX</p>
</iframe>

Astuce : Astuce 3 : trackez les conversions avec Google Analytics en écoutant postMessage :

window.addEventListener('message', (e) => {
  if (e.origin !== 'https://www.batlr.app') return;
  if (e.data?.type === 'batlr:reservationCreated') {
    gtag('event', 'reservation_created', { value: e.data.partySize });
  }
});

À lire ensuite