meetergomeetergo Help

Terminbuchung in Framer einbetten

Füge meetergo-Terminbuchungen zu deiner Framer-Website hinzu — mit dem meetergo-Plugin oder Code-Komponenten

Aktualisiert am 5. Februar 2026

Wenn du meetergo-Terminbuchungen direkt auf deiner Framer-Website anbieten möchtest, hast du zwei Möglichkeiten: das meetergo Framer-Plugin (empfohlen) oder Code-Komponenten, die du manuell einfügst. Beides ermöglicht deinen Besuchern, Termine zu buchen, ohne deine Seite zu verlassen.

Option 1: meetergo Framer-Plugin (Empfohlen)

Das meetergo-Plugin integriert sich direkt in den Framer-Editor. Es führt dich durch einen einfachen Assistenten, um dein Buchungs-Embed zu konfigurieren und auf deiner Seite einzufügen.

Schritt 1: Plugin installieren

  1. Öffne dein Framer-Projekt
  2. Gehe zu Plugins in der Toolbar (oder drücke ⌘ + / und suche nach „meetergo")
  3. Finde meetergo und klicke auf Installieren

Schritt 2: Plugin öffnen

  1. Klicke auf das meetergo-Plugin in deinem Plugin-Panel
  2. Gib deine meetergo-Buchungs-URL ein (z. B. https://cal.meetergo.com/dein-link)
  3. Klicke auf Weiter

Schritt 3: Embed-Typ wählen

Wähle einen der vier Embed-Typen:

Embed-TypBeschreibungIdeal für
Inline EmbedBuchungsseite direkt in deinem LayoutDedizierte Buchungsseiten
Popup-ButtonButton, der ein Buchungs-Modal öffnetCTAs, Landingpages
Floating ButtonSchwebender Button in einer Ecke mit AnimationImmer sichtbare Buchungsoption
SidebarAusklappbares Panel am linken oder rechten RandProfessionelle Websites

Schritt 4: Anpassen

Je nach gewähltem Embed-Typ kannst du Folgendes konfigurieren:

  • Button-Text — Beschriftung auf Buttons und Tabs
  • Hintergrundfarbe — Button-/Tab-Hintergrund
  • Textfarbe — Button-/Tab-Text
  • Position — Ecke (Floating Button) oder Seite (Sidebar)
  • Animation — Pulsieren, Hüpfen oder Hereingleiten (Floating Button)
  • Panel-Breite — Sidebar-Breite (z. B. 400px)
  • Eckenradius — Abrundung der Button-Ecken (Popup)

Schritt 5: Einfügen

Klicke auf Zur Seite hinzufügen. Das Plugin erstellt eine Code-Komponente in deinem Projekt und platziert sie auf deiner Seite. Du kannst sie wie jede andere Ebene verschieben und in der Größe ändern.

Option 2: Code-Komponenten (Manuell)

Wenn du kein Plugin installieren möchtest, kannst du vorgefertigte Code-Komponenten verwenden.

Schnellstart: Remix-Link

Am schnellsten geht es mit unserem Remix-Link — er kopiert alle 4 Komponenten mit einem Klick in dein Projekt:

meetergo-Komponenten in Framer öffnen

Nach dem Remixen findest du die Komponenten unter Assets → Code im linken Panel. Ziehe sie auf deine Seite und konfiguriere die Buchungs-URL im rechten Panel.

Manuell: Code-Komponente hinzufügen

Wenn du Komponenten einzeln hinzufügen möchtest:

  1. Gehe im Framer-Editor zu Assets → Code → Neue Code-Komponente
  2. Füge einen der unten stehenden Codes ein
  3. Ziehe die Komponente aus dem Assets-Panel auf deine Seite
  4. Konfiguriere sie über die Steuerelemente im rechten Panel

Inline Embed

Zeigt die vollständige Buchungsseite direkt auf deiner Framer-Seite an.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) return
  const s = document.createElement("script")
  s.src = SCRIPT_URL
  s.async = true
  document.body.appendChild(s)
}

export default function MeetergoInline({ bookingUrl, minHeight, alignment }) {
  const loaded = useRef(false)

  useEffect(() => {
    loadScript()
    loaded.current = true
  }, [])

  useEffect(() => {
    if (!loaded.current) return
    window.meetergo?.parseIframes?.()
  }, [bookingUrl, alignment])

  return (
    <div
      className="meetergo-iframe"
      link={bookingUrl}
      data-align={alignment}
      style={{ width: "100%", minWidth: 330, minHeight }}
    />
  )
}

MeetergoInline.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/dein-buchungslink",
  minHeight: 700,
  alignment: "center",
}

addPropertyControls(MeetergoInline, {
  bookingUrl: {
    type: ControlType.String,
    title: "Buchungs-URL",
    placeholder: "https://cal.meetergo.com/...",
  },
  minHeight: {
    type: ControlType.Number,
    title: "Mindesthöhe",
    defaultValue: 700,
    min: 300,
    max: 1400,
    step: 50,
    unit: "px",
  },
  alignment: {
    type: ControlType.Enum,
    title: "Ausrichtung",
    options: ["left", "center", "right"],
    optionTitles: ["Links", "Zentriert", "Rechts"],
    defaultValue: "center",
  },
})

Popup-Button

Ein Button, der die Buchungsseite als Modal öffnet.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) return
  const s = document.createElement("script")
  s.src = SCRIPT_URL
  s.async = true
  document.body.appendChild(s)
}

export default function MeetergoPopupButton({ bookingUrl, buttonText, backgroundColor, textColor, borderRadius, fontSize }) {
  const loaded = useRef(false)

  useEffect(() => {
    loadScript()
    loaded.current = true
  }, [])

  useEffect(() => {
    if (!loaded.current) return
    window.meetergo?.parseIframes?.()
  }, [bookingUrl])

  return (
    <button
      className="meetergo-modal-button"
      link={bookingUrl}
      style={{
        backgroundColor,
        color: textColor,
        borderRadius,
        fontSize,
        padding: "12px 24px",
        border: "none",
        cursor: "pointer",
        fontWeight: 600,
        fontFamily: "inherit",
        width: "100%",
      }}
    >
      {buttonText}
    </button>
  )
}

MeetergoPopupButton.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/dein-buchungslink",
  buttonText: "Termin buchen",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
  borderRadius: 8,
  fontSize: 16,
}

addPropertyControls(MeetergoPopupButton, {
  bookingUrl: { type: ControlType.String, title: "Buchungs-URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Button-Text", defaultValue: "Termin buchen" },
  backgroundColor: { type: ControlType.Color, title: "Hintergrund", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Textfarbe", defaultValue: "#FFFFFF" },
  borderRadius: { type: ControlType.Number, title: "Radius", defaultValue: 8, min: 0, max: 50, unit: "px" },
  fontSize: { type: ControlType.Number, title: "Schriftgröße", defaultValue: 16, min: 12, max: 28, unit: "px" },
})

Floating Button

Ein schwebender Button in einer Ecke mit konfigurierbarer Position und Animation.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  return new Promise((resolve) => {
    if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) { resolve(); return }
    const s = document.createElement("script")
    s.src = SCRIPT_URL
    s.async = true
    s.onload = () => resolve()
    document.body.appendChild(s)
  })
}

export default function MeetergoFloatingButton({ bookingUrl, buttonText, position, backgroundColor, textColor, animation }) {
  const initialized = useRef(false)

  useEffect(() => {
    window.meetergoSettings = {
      ...(window.meetergoSettings || {}),
      floatingButton: {
        position,
        text: buttonText,
        link: bookingUrl,
        backgroundColor,
        textColor,
        animation: animation === "none" ? undefined : animation,
      },
    }
    if (!initialized.current) {
      loadScript().then(() => { initialized.current = true })
    } else {
      window.meetergo?.init?.()
    }
    return () => {
      if (window.meetergoSettings) delete window.meetergoSettings.floatingButton
    }
  }, [bookingUrl, buttonText, position, backgroundColor, textColor, animation])

  return (
    <div style={{ padding: 16, fontSize: 13, color: "#666", textAlign: "center" }}>
      Der Floating Button wird auf der veröffentlichten Seite angezeigt
    </div>
  )
}

MeetergoFloatingButton.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/dein-buchungslink",
  buttonText: "Termin buchen",
  position: "bottom-right",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
  animation: "pulse",
}

addPropertyControls(MeetergoFloatingButton, {
  bookingUrl: { type: ControlType.String, title: "Buchungs-URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Button-Text", defaultValue: "Termin buchen" },
  position: { type: ControlType.Enum, title: "Position", options: ["bottom-right", "bottom-left", "top-right", "top-left"], optionTitles: ["Unten Rechts", "Unten Links", "Oben Rechts", "Oben Links"], defaultValue: "bottom-right" },
  backgroundColor: { type: ControlType.Color, title: "Hintergrund", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Textfarbe", defaultValue: "#FFFFFF" },
  animation: { type: ControlType.Enum, title: "Animation", options: ["none", "pulse", "bounce", "slide-in"], optionTitles: ["Keine", "Pulsieren", "Hüpfen", "Hereingleiten"], defaultValue: "pulse" },
})

Sidebar

Ein ausklappbares Seitenpanel, das vom linken oder rechten Rand herausgleitet.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  return new Promise((resolve) => {
    if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) { resolve(); return }
    const s = document.createElement("script")
    s.src = SCRIPT_URL
    s.async = true
    s.onload = () => resolve()
    document.body.appendChild(s)
  })
}

export default function MeetergoSidebar({ bookingUrl, buttonText, sidebarPosition, sidebarWidth, backgroundColor, textColor }) {
  const initialized = useRef(false)

  useEffect(() => {
    window.meetergoSettings = {
      ...(window.meetergoSettings || {}),
      sidebar: {
        position: sidebarPosition,
        width: sidebarWidth,
        link: bookingUrl,
        buttonText,
        buttonPosition: sidebarPosition === "left" ? "middle-left" : "middle-right",
        backgroundColor,
        textColor,
      },
    }
    if (!initialized.current) {
      loadScript().then(() => { initialized.current = true })
    } else {
      window.meetergo?.init?.()
    }
    return () => {
      if (window.meetergoSettings) delete window.meetergoSettings.sidebar
    }
  }, [bookingUrl, buttonText, sidebarPosition, sidebarWidth, backgroundColor, textColor])

  return (
    <div style={{ padding: 16, fontSize: 13, color: "#666", textAlign: "center" }}>
      Der Sidebar-Tab wird auf der veröffentlichten Seite angezeigt
    </div>
  )
}

MeetergoSidebar.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/dein-buchungslink",
  buttonText: "Termin buchen",
  sidebarPosition: "right",
  sidebarWidth: "400px",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
}

addPropertyControls(MeetergoSidebar, {
  bookingUrl: { type: ControlType.String, title: "Buchungs-URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Tab-Text", defaultValue: "Termin buchen" },
  sidebarPosition: { type: ControlType.Enum, title: "Seite", options: ["left", "right"], optionTitles: ["Links", "Rechts"], defaultValue: "right" },
  sidebarWidth: { type: ControlType.String, title: "Panel-Breite", defaultValue: "400px" },
  backgroundColor: { type: ControlType.Color, title: "Hintergrund", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Textfarbe", defaultValue: "#FFFFFF" },
})

FAQ

Brauche ich das Plugin oder reichen die Code-Komponenten?

Beides funktioniert. Das Plugin ist einfacher — es führt dich durch die Einrichtung und fügt die Komponente automatisch ein. Code-Komponenten bieten dir mehr Kontrolle, wenn du den Quellcode direkt anpassen möchtest.

Funktioniert das Buchungsformular auf Mobilgeräten?

Ja, alle meetergo-Embeds sind vollständig responsiv und passen sich jeder Bildschirmgröße an.

Kann ich Farben und Styling anpassen?

Ja. Alle Embed-Typen unterstützen benutzerdefinierte Hintergrund- und Textfarben. Du kannst das Aussehen deiner Buchungsseite auch in deinen meetergo-Kontoeinstellungen anpassen.

Warum sehe ich den Floating Button oder die Sidebar nicht im Framer-Editor?

Der Floating Button und die Sidebar werden global vom meetergo-Script eingefügt und erscheinen nur auf der veröffentlichten Seite. Im Editor siehst du einen Platzhalter. Veröffentliche deine Seite, um das Live-Verhalten zu testen.

Kann ich mehrere Embeds auf derselben Seite verwenden?

Ja. Du kannst mehrere Inline-Embeds oder Popup-Buttons auf derselben Seite verwenden. Für den Floating Button und die Sidebar ist jeweils nur einer möglich, da sie globale Widgets sind.

Wo finde ich meine Buchungs-URL?

Gehe zu Terminseiten, klicke auf Teilen neben der gewünschten Terminseite und kopiere den Buchungslink.

War dieser Artikel hilfreich?

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