Einbettungs-Übersicht

Betten Sie Ihre meetergo-Buchungsseite direkt auf Ihrer Website ein, damit Besucher Termine buchen können, ohne Ihre Seite zu verlassen. meetergo bietet fünf verschiedene Einbettungsmethoden, die zu Ihrem Design passen.

Schnellstart

Fügen Sie dieses Skript vor </body> auf Ihrer Website ein:

<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Konfigurieren Sie dann Ihre Einbettung mit einer der unten beschriebenen Methoden.

Einbettungsmethoden

---

1. Auto-Resize Iframe (Inline)

Zeigen Sie Ihre Buchungsseite direkt im Content Ihrer Website an. Der Iframe passt seine Höhe automatisch an den Inhalt an.

Code

<div class="meetergo-iframe" link="https://cal.meetergo.com/ihr-buchungslink"></div>

<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Optionen

Beispiel mit Optionen

<div
  class="meetergo-iframe"
  link="https://cal.meetergo.com/ihr-link"
  data-align="center"
  data-resize="true"
></div>

---

2. Modal-Buchungsbuttons

Verwandeln Sie jedes HTML-Element in einen Buchungs-Trigger. Bei Klick öffnet sich Ihre Buchungsseite in einem Modal-Overlay.

Code

<button class="meetergo-modal-button" link="https://cal.meetergo.com/ihr-buchungslink">
  Jetzt buchen
</button>

<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Funktioniert mit jedem Element

<!-- Button -->
<button class="meetergo-modal-button" link="https://cal.meetergo.com/ihr-link">
  Gespräch vereinbaren
</button>

<!-- Link -->
<a class="meetergo-modal-button" link="https://cal.meetergo.com/ihr-link">
  Beratung buchen
</a>

<!-- Div -->
<div class="meetergo-modal-button" link="https://cal.meetergo.com/ihr-link">
  Klicken zum Buchen
</div>

---

3. Floating Action Button

Ein Button, der in einer Ecke Ihrer Seite schwebt. Unterstützt Animationen und vollständige Anpassung.

Code

<script>
  window.meetergoSettings = {
    floatingButton: {
      position: "bottom-right",
      link: "https://cal.meetergo.com/ihr-buchungslink",
      text: "Termin buchen",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF",
      animation: "pulse"
    }
  };
</script>
<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Optionen

---

4. Einklappbare Sidebar

Ein professionelles Seitenpanel, das bei Klick herausgleitet. Unterstützt Links- oder Rechts-Positionierung.

Code

<script>
  window.meetergoSettings = {
    sidebar: {
      position: "right",
      link: "https://cal.meetergo.com/ihr-buchungslink",
      buttonText: "Meeting buchen",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF"
    }
  };
</script>
<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Optionen

---

5. Video-Widget

Ein interaktiver Videoplayer mit Buchungs-Call-to-Action. Enthält Stummschaltung und Fortschrittsbalken.

Code

<script>
  window.meetergoSettings = {
    videoEmbed: {
      videoSrc: "https://example.com/ihr-video.mp4",
      posterImage: "https://example.com/thumbnail.jpg",
      bookingLink: "https://cal.meetergo.com/ihr-link",
      bookingCta: "Demo buchen",
      bookingCtaColor: "#4F46E5",
      position: "bottom-right",
      isRound: true
    }
  };
</script>
<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

---

Globale Konfiguration

Konfigurieren Sie meetergo mit dem window.meetergoSettings-Objekt vor dem Laden des Skripts:

<script>
  window.meetergoSettings = {
    company: "ihre-firma",
    enableAutoResize: true,
    iframeAlignment: "center",

    // Formularfelder vorausfüllen
    prefill: {
      firstname: "Max",
      lastname: "Mustermann",
      email: "max@beispiel.de"
    },

    // Callbacks
    onSuccess: function(data) {
      console.log("Buchung erstellt:", data);
    },
    onEvent: function(event) {
      console.log("Event:", event);
    }
  };
</script>
<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

---

JavaScript-API

Steuern Sie die Einbettung programmatisch:

// Formulardaten vorausfüllen
window.meetergo.setPrefill({
  firstname: "Anna",
  lastname: "Müller",
  email: "anna@beispiel.de"
});

// Buchungs-Modal programmatisch öffnen
window.meetergo.launchScheduler("https://cal.meetergo.com/ihr-link", prefillData);

// Modal öffnen/schließen
window.meetergo.openModal();
window.meetergo.closeModal();

// Iframes nach DOM-Updates neu parsen
window.meetergo.parseIframes();

// Bereinigung (Speicherverwaltung)
window.meetergo.destroy();

---

Formularfelder vorausfüllen

Übergeben Sie Teilnehmerdaten, um Formularfelder zu überspringen:

Über URL-Parameter

https://cal.meetergo.com/ihr-link?firstname=Max&lastname=Mustermann&email=max@beispiel.de

Über JavaScript

window.meetergoSettings = {
  prefill: {
    firstname: "Max",
    lastname: "Mustermann",
    email: "max@beispiel.de",
    phone: "+491234567890"
  }
};

Siehe Formulare mit URL-Parametern vorausfüllen für alle verfügbaren Felder.

---

Callbacks

Behandeln Sie Buchungsereignisse in Ihrem Code:

onSuccess

Wird aufgerufen, wenn eine Buchung abgeschlossen ist:

window.meetergoSettings = {
  onSuccess: function(data) {
    // data enthält Buchungsdetails
    console.log("Termin-ID:", data.appointmentId);
    console.log("Terminart:", data.meetingTypeName);

    // Conversion tracken
    analytics.track("buchung_abgeschlossen", data);
  }
};

onEvent

Wird für verschiedene Einbettungs-Events aufgerufen:

window.meetergoSettings = {
  onEvent: function(event) {
    console.log("Event-Typ:", event.type);
  }
};

---

Plattform-spezifische Anleitungen

• WordPress
• Webflow
• Squarespace

---

Fehlerbehebung

Einbettung erscheint nicht

1. Verifizieren Sie, dass die Skript-URL korrekt ist
2. Prüfen Sie, dass window.meetergoSettings vor dem Skript-Laden definiert ist
3. Stellen Sie sicher, dass die Buchungslink-URL gültig ist
4. Prüfen Sie die Browser-Konsole auf Fehler

Modal öffnet sich nicht

1. Bestätigen Sie, dass das Element class="meetergo-modal-button" hat
2. Verifizieren Sie, dass das link-Attribut vorhanden ist
3. Prüfen Sie auf JavaScript-Konflikte

Auto-Resize funktioniert nicht

1. Stellen Sie sicher, dass data-resize nicht auf false gesetzt ist
2. Prüfen Sie, ob der übergeordnete Container keine feste Höhe hat
3. Rufen Sie window.meetergo.parseIframes() nach dynamischen DOM-Updates auf

Vorausfüllen funktioniert nicht

1. Prüfen Sie, ob Feldnamen exakt übereinstimmen (Groß-/Kleinschreibung)
2. Stellen Sie sicher, dass prefill vor dem Skript-Laden gesetzt wird oder verwenden Sie die setPrefill()-API
3. URL-kodieren Sie Sonderzeichen in URL-Parametern

---

Vollständige Dokumentation

Für TypeScript-Typen, erweiterte Konfiguration und weitere Beispiele siehe das meetergo-integration Repository.