meetergomeetergo Help

Einbettungs-Übersicht

Füge meetergo-Terminplanung mit Inline-Embeds, Popups, Sidebars und Video-Widgets zu deiner Website hinzu

Aktualisiert am 22. Juli 2026

Bette deine meetergo-Buchungsseite direkt auf deiner Website ein, damit Besucher Termine buchen können, ohne deine Seite zu verlassen. meetergo bietet fünf verschiedene Einbettungsmethoden, die zu deinem Design passen.

Embed-Code holen

meetergo erzeugt für jede Terminseite einen fertigen Code-Schnipsel, du musst das HTML also nicht selbst schreiben:

  1. Gehe zu Terminseiten.
  2. Klicke neben der Terminseite, die du einbetten möchtest, auf Teilen.
  3. Öffne den Tab Embed/Website.
  4. Wähle den gewünschten Stil (Inline Embed ist am einfachsten, daneben gibt es Popup-Button, Text-Popup, Sidebar und Video).
  5. Klicke auf Code kopieren.

Der kopierte Schnipsel enthält bereits deinen Buchungslink und das Integrations-Skript. Füge ihn auf deiner Website an der Stelle ein, an der das Buchungsformular erscheinen soll, oder folge einer der plattform-spezifischen Anleitungen.

Schnellstart

Wenn du den Code lieber selbst schreibst, füge dieses Skript vor </body> auf deiner Website ein:

<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Konfiguriere dann deine Einbettung mit einer der unten beschriebenen Methoden.

Einbettungsmethoden

MethodeBeschreibungIdeal für
Inline IframeBuchungsseite in deine Seite eingebettetDedizierte Buchungsseiten
Modal-ButtonJedes Element öffnet ein Buchungs-ModalBenutzerdefinierte Buttons, Links
Floating ButtonEck-Widget, das Modal öffnetImmer sichtbarer CTA
SidebarEinklappbares SeitenpanelProfessionelle Websites
Video-WidgetVideoplayer mit Buchungs-CTASales-Seiten

1. Auto-Resize Iframe (Inline)

Zeige deine Buchungsseite direkt im Content deiner 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://cdn.meetergo.com/v4/integration.js"></script>

Optionen

AttributBeschreibungBeispiel
linkdeine Buchungsseiten-URLhttps://cal.meetergo.com/ihrname
data-alignHorizontale Ausrichtungcenter, left, right
data-resizeAuto-Resize aktivierentrue (Standard), false

Beispiel mit Optionen

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

2. Modal-Buchungsbuttons

Verwandle jedes HTML-Element in einen Buchungs-Trigger. Bei Klick öffnet sich deine Buchungsseite in einem Modal-Overlay.

Code

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

<script src="https://cdn.meetergo.com/v4/integration.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 deiner Seite schwebt. Unterstützt Animationen und vollständige Anpassung.

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    floatingButton: {
      position: "bottom-right",
      link: "https://cal.meetergo.com/ihr-buchungslink",
      text: "Termin buchen",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF",
      animation: "pulse"
    }
  });
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Optionen

OptionWerteBeschreibung
positionbottom-right, bottom-left, top-right, top-leftButton-Platzierung
textStringButton-Beschriftung
linkURLdeine Buchungsseite
backgroundColorHex-FarbeButton-Hintergrund
textColorHex-FarbeTextfarbe
animationpulse, bounce, slide-in, noneButton-Animation
iconIcon-NameAnzuzeigendes Lucide-Icon

4. Einklappbare Sidebar

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

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    sidebar: {
      position: "right",
      link: "https://cal.meetergo.com/ihr-buchungslink",
      buttonText: "Meeting buchen",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF"
    }
  });
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Optionen

OptionWerteBeschreibung
positionleft, rightWelche Bildschirmseite
linkURLdeine Buchungsseite
buttonTextStringText auf dem eingeklappten Tab
buttonIconIcon-NameLucide-Icon
backgroundColorHex-FarbeTab-Hintergrund
textColorHex-FarbeTab-Textfarbe
widthCSS-WertPanel-Breite (z.B. 400px)

5. Video-Widget

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

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    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://cdn.meetergo.com/v4/integration.js"></script>

Globale Konfiguration

Konfiguriere 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://cdn.meetergo.com/v4/integration.js"></script>

JavaScript-API

Steuere 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

Übergib 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

Behandle Buchungsereignisse in deinem 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

Fehlerbehebung

Einbettung erscheint nicht

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

Modal öffnet sich nicht

  1. Bestätige, dass das Element class="meetergo-modal-button" hat
  2. Verifiziere, dass das link-Attribut vorhanden ist
  3. Prüfe auf JavaScript-Konflikte

Auto-Resize funktioniert nicht

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

Vorausfüllen funktioniert nicht

  1. Prüfe, ob Feldnamen exakt übereinstimmen (Groß-/Kleinschreibung)
  2. Stelle sicher, dass prefill vor dem Skript-Laden gesetzt wird, oder verwende die setPrefill()-API
  3. URL-kodiere Sonderzeichen in URL-Parametern

Vollständige Dokumentation

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

War dieser Artikel hilfreich?

Lass uns wissen, ob dieser Artikel deine Fragen beantwortet hat.

Passende Artikel