Widget einbetten

Das Levy Bookings Widget ist ein winziges Dependency-freies JavaScript-Bundle (ca. 6 KB) auf widget.levyelectric.com/v1.js. Es injiziert ein sicheres iframe, das auf Ihre gehostete Buchungsseite zeigt.

Funktioniert auf:

• Squarespace, Wix, Webflow, Shopify
• WordPress (jedes Theme mit Custom-HTML-Block)
• Hand-coded HTML / Next.js / React / Astro / Hugo / Jekyll

Das Script-Snippet

Schnellster Weg: aus dem Dashboard kopieren.

1. Dashboard > Bookings > Widgets > {Ihr Widget} oeffnen.
2. Embed-Code holen klicken.
3. Modus waehlen (inline, modal, floating-button).
4. Snippet kopieren und auf Ihre Seite einfuegen.

Das Snippet sieht so aus:

<!-- Inline Embed -->
<div id="levy-bookings"></div>
<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="inline"
  data-target="#levy-bookings"
  data-theme="light"
  async
></script>

Embed-Modi

Inline

Das Widget injiziert ein iframe in ein Zielelement. Nutzen Sie diesen Modus auf einer eigenen "Fahrrad buchen" Seite.

<div id="levy-bookings"></div>
<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="inline"
  data-target="#levy-bookings"
  async
></script>

Das iframe passt seine Hoehe automatisch an, waehrend der Kunde durch die Schritte navigiert.

Modal

Das Widget injiziert ein verstecktes iframe und oeffnet es als Overlay-Modal beim Klick auf ein Element mit data-levy-book="open".

<button data-levy-book="open">Fahrrad buchen</button>

<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="modal"
  async
></script>

Floating Button

Das Widget zeigt einen festen "Jetzt buchen" Button unten rechts auf jeder Seite, die das Snippet enthaelt.

<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="floating-button"
  data-button-label="Fahrrad buchen"
  data-button-position="bottom-right"
  async
></script>

Referenz der Data-Attribute

Conversion-Events

<script>
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://widget.levyelectric.com') return;
    if (event.data?.type === 'levy:event') {
      const { eventName, payload } = event.data;
      console.log('Levy Buchungs-Event:', eventName, payload);
    }
  });
</script>

Mit data-pixel-ga4 oder data-pixel-meta werden Events automatisch weitergeleitet.

Eigene Domains

book.frankebikes.com statt fleets.levyelectric.com/book/{slug}:

1. DNS CNAME von book.frankebikes.com auf cname.levyelectric.com setzen.
2. Support-Ticket mit gewuenschter Domain oeffnen. Wir bereitstellen TLS und Routing innerhalb eines Arbeitstags.
3. Im Widget die Oeffentliche URL aktualisieren.

Squarespace

Squarespace blockiert <script> Tags in Textbloecken:

1. Seite editieren.
2. Code Block hinzufuegen.
3. Snippet einfuegen.

Fuer Floating-Button-Modus in Einstellungen > Erweitert > Code Injection > Footer.

Wix

1. Editor > + Elemente hinzufuegen > Embed Code > HTML einbetten.
2. Snippet einfuegen.

WordPress

In einem Custom-HTML-Block (Gutenberg) oder Text-Widget einfuegen.

Shopify

1. Themes > Code bearbeiten.
2. layout/theme.liquid oeffnen.
3. Snippet vor </body> einfuegen.

Performance

Das Host-Skript ist ca. 6 KB und laedt mit async. Das iframe laedt lazy und beginnt mit Stripe.js erst beim Zahlungsschritt. TTI unter 200 ms auf 3G.

Erlaubte Origins

Bevor POST-Requests akzeptiert werden, listen Sie die Origins:

https://www.frankebikes.com
https://frankebikes.com

GET-Requests sind CORS-offen, nur POST-Requests brauchen Allowlist.

Apple Pay

Apple Pay in iframes wird unterstuetzt, weil das iframe auf widget.levyelectric.com laeuft, das fuer jedes verbundene Stripe-Konto als Merchant-Domain registriert ist.

Verwandte Anleitungen

• Erste Schritte
• Gehostete Buchungsseite
• Widget Theming
• Fehlerbehebung