NexDeck
Zurück zur Übersicht

Booking-Widget auf eigener Website einbetten

Buchungs-Seite als iframe in die eigene Website integrieren — abgesichert über eine Embed-Origin-Allowlist.

Booking-Widget auf eigener Website einbetten

Die Online-Terminbuchung gibt es ab dem Tarif Pro.

Statt Besucher auf nexdeck.app/book/... weiterzuleiten, können Sie das Buchungs-Widget direkt in Ihre eigene Website einbetten (iframe). Das fühlt sich nahtloser an und bleibt unter Ihrer Domain.

Zielgruppe: Owner / Admin mit Zugriff auf den HTML-Code der eigenen Website Aufwand: ~10 Minuten Voraussetzung: Online-Terminbuchung ist bereits aktiviert (siehe Online-Terminbuchung aktivieren)

Wie funktioniert iframe-Embedding?

Das Buchungs-Widget wird über einen <iframe>-Tag in Ihre Website eingebunden. Der iframe lädt die Buchungs-Seite von nexdeck.app und zeigt sie eingebettet an. Slot-Auswahl, Kontaktformular und Bestätigung laufen vollständig im iframe.

Vorteile gegenüber dem Direkt-Link:

  • Besucher bleibt visuell auf Ihrer Website
  • Anpassbar an Ihr Design (Theme, Farbe)

Rechtliche Links auf der Buchungsseite:

  • Unter dem Formular stehen Links auf Ihre hinterlegte Datenschutzerklärung und Ihr Impressum, daneben „Plattform-Hinweise NexDeck"
  • Im Seitenfuß stehen Impressum, Datenschutz und Cookie-Hinweis von NexDeck
  • Alle Links öffnen im Hauptfenster, nicht im iframe

Schritt 1 — Embed-Origin in NexDeck freigeben

Eine Buchung über Ihre Website nimmt NexDeck nur an, wenn die Website vorher freigegeben ist.

  1. Einstellungen → Öffentliche Terminbuchung → Tab Übersicht
  2. Feld „Domains die einbetten dürfen (iframe)"
  3. Tragen Sie Ihre Website-Domain ein, z.B. https://www.ihr-betrieb.de
    • Mit Protokoll (https://)
    • Eine Zeile pro Domain (Subdomains separat eintragen, z.B. https://www.ihr-betrieb.de UND https://ihr-betrieb.de)
  4. Einstellungen speichern

Wichtig: Ohne Eintrag zeigt Ihre Website das Buchungsfenster zwar an, nimmt aber keine Buchung an. Besucher sehen dann „Die Terminbuchung ist für diese Website nicht freigegeben." Die Domain muss genau übereinstimmen.

Schritt 2 — Embed-Code generieren

Im selben Tab, Abschnitt „Auf eigener Website einbetten" (erscheint, sobald URL-Kennung und mindestens ein Termin-Typ angelegt sind):

  1. Variante wählen: Script (empfohlen) — embed.js, passt die Höhe automatisch an — oder iframe mit fester Höhe, ganz ohne JavaScript
  2. Darstellung (Theme): Hell / Dunkel / Automatisch
  3. Akzent-Farbe (optional, Hex-Code) — überschreibt den Standard
  4. Für jeden Termin-Typ steht darunter ein eigener Embed-Code — zum Beispiel:
<iframe
  src="https://www.nexdeck.app/book/maler-schroeder/beratung?theme=light"
  width="100%"
  height="760"
  style="border: 0; max-width: 600px;"
  title="Termin buchen bei Ihre Firma"
  sandbox="allow-scripts allow-forms allow-same-origin"
  referrerpolicy="strict-origin"
></iframe>
  1. Beim gewünschten Termin-Typ „Kopieren" → in Ihre Website-Vorlage einfügen, dort wo das Widget erscheinen soll

Schritt 3 — Auf Website einfügen

WordPress

Im Block-Editor: „Benutzerdefiniertes HTML"-Block hinzufügen → Embed-Code einfügen → Vorschau prüfen.

Webflow / Wix / Squarespace

Element „Embed" oder „HTML einbetten" → Embed-Code einfügen → Veröffentlichen.

Eigenes HTML

An gewünschter Stelle im Quellcode einfügen.

Mobile-Responsive-Check

Der iframe ist mit width="100%" responsiv und max-width: 600px begrenzt — passt sich an die Spalten-Breite Ihrer Website an. Breite und Höhe stellen Sie beim Erzeugen des Codes ein; der Code übernimmt sie. Passt der Inhalt auf kleinen Bildschirmen nicht, erhöhen Sie dort die Höhe oder nutzen Sie die Script-Variante mit automatischer Höhe.

Test: Öffnen Sie Ihre eingebettete Buchungs-Seite auf einem echten Smartphone. Falls Inhalte am unteren Rand abgeschnitten werden, erhöhen Sie die Höhe und übernehmen Sie den neuen Code.

Datenschutz

Für die Buchungsanfragen sind Sie als Betrieb verantwortlich; NexDeck verarbeitet sie in Ihrem Auftrag (Vertrag zur Auftragsverarbeitung, AGB § 11 Abs. 1).

NexDeck erstellt und prüft Ihre Datenschutzerklärung nicht und gibt dafür keinen Mustertext vor. Die folgenden Angaben beschreiben, was die Buchungsseite technisch tut. Ob und wie Sie das in Ihrer Datenschutzerklärung darstellen, klären Sie mit Ihrer Datenschutzberatung.

Welche Daten die Buchungsseite erhebt

  • Eingaben der buchenden Person: Name und E-Mail-Adresse (Pflichtfelder), Telefon, Firma und Nachricht (freiwillig, bis 2.000 Zeichen), Zusatzfelder Ihres Termin-Typs und der gewählte Termin.
  • Technische Angaben je Anfrage: ein Hashwert der IP-Adresse (die IP-Adresse selbst wird nicht gespeichert), die Browserkennung (gekürzt), ein Prüfwert der Sicherheitsabfrage, ob ein für Menschen unsichtbares Feld ausgefüllt wurde, und bei Einbettung die Adresse der einbettenden Website.
  • Abgewiesene Anfragen (zum Beispiel gesperrte Domains, Wegwerf-Adressen, nicht freigegebene Website oder Bot-Erkennung) speichert NexDeck ebenfalls, mit Name, E-Mail, Telefon und dem Anfang der Nachricht, zur Missbrauchsabwehr.
  • Einwilligung in Werbung: Haben Sie die Einwilligungs-Checkbox eingeschaltet und hakt die Person sie an, geht eine eigene Bestätigungs-Mail (Double-Opt-in) heraus.

Wohin die Daten gehen

  • NexDeck und seine Unterauftragsverarbeiter, insbesondere:
    • Vercel als Hosting-Dienstleister; beim Aufruf der Seite gehen IP-Adresse und Browserkennung dorthin
    • Supabase für die Datenbank
    • Upstash für das Anfragelimit; dort wird ein Hashwert der IP-Adresse gezählt
    • Amazon Web Services für die E-Mails (Bestätigungslink je nach Einstellung, Terminbestätigung mit Kalenderdatei, Absage)
    • Sitz, Verarbeitungsort und Übermittlungsgrundlagen stehen verbindlich und aktuell nur unter Unterauftragsverarbeiter — übernehmen Sie sie von dort, nicht aus dieser Seite
  • Ihr Team: Nach der Bestätigung entstehen ein Termin im Kalender (mit Kontaktangaben und Nachricht in der Beschreibung) und ein Interessent im CRM. Der zuständige Mitarbeiter bekommt eine Push-Nachricht mit dem Namen der buchenden Person.
  • Externer Kalender (wenn verbunden): Hat der zuständige Mitarbeiter einen Google- oder Microsoft-Kalender verbunden, trägt NexDeck den Termin über die Kalenderanbindung (Unipile) dort ein; Google bzw. Microsoft wird damit Empfänger. Ohne Online-Termin enthält der Eintrag die Terminbeschreibung mit den Kontaktangaben. Bei Online-Terminen steht dort nur ein kurzer Hinweis, und es entsteht ein Google-Meet- bzw. Teams-Link; die Buchungsseite zeigt dazu selbst einen Hinweis.
  • Logo von fremder Adresse: Tragen Sie als Logo eine Adresse außerhalb von NexDeck ein, lädt der Browser jeder buchenden Person das Bild direkt von dort, und deren IP-Adresse geht an diesen Anbieter.

Zugriffe auf den Browser-Speicher

Die Buchungsseite zeigt kein Einwilligungsbanner und schreibt nichts in den Browser-Speicher. Sie liest dort aber beim Laden zwei Einträge: ob die Seite in der NexDeck-App läuft und die gewählte Farbdarstellung (hell/dunkel). Eine frühere Einwilligung auf nexdeck.app liest sie nicht: Auf der Buchungsseite ist die Fehleranalyse im Browser fest ausgeschaltet, auch wenn jemand auf nexdeck.app zuvor eingewilligt hat. In einem iframe auf Ihrer Website sind diese Einträge in der Regel leer, gelesen wird trotzdem. § 25 Abs. 1 TDDDG nennt neben dem Speichern auch den „Zugriff auf Informationen, die bereits in der Endeinrichtung gespeichert sind".

Schriften und die Sicherheitsabfrage werden über NexDeck ausgeliefert, nicht von einem weiteren Anbieter nachgeladen.

Wie lange NexDeck Buchungsanfragen speichert

Ein Lauf prüft das täglich:

Anfrage Was geschieht
Bestätigt 90 Tage nach der Bestätigung gelöscht. Termin und Interessent sind davon nicht betroffen; für sie gelten die Regeln in Kalender und CRM.
Automatisch abgewiesen oder nie bestätigt (Bestätigungslink nicht geklickt, auch wenn die Anfrage danach abgelehnt oder storniert wurde oder der Link nicht versandt werden konnte) 30 Tage nach Eingang gelöscht
Alle übrigen Der IP-Hashwert wird 90 Tage nach Eingang geleert.

Gezählt wird ab dem Zeitpunkt des Ereignisses in vollen Tagen zu 24 Stunden. Abgelehnte und stornierte Anfragen, deren Bestätigungslink geklickt wurde, sowie noch nicht entschiedene Anfragen löscht NexDeck derzeit nicht automatisch. Besteht für Ihren Betrieb eine Aufbewahrungssperre, bleiben alle Anfragen stehen, bis sie aufgehoben ist.

Checkliste: Was Art. 13 DSGVO abfragt

Art. 13 DSGVO zählt auf, welche Informationen bei der Erhebung zu geben sind. Die Liste ordnet zu, wo Sie die Angaben zur Buchungsseite finden; ob Ihre Erklärung sie abdeckt, bewertet NexDeck nicht.

  • Verantwortlicher und Kontaktdaten (Abs. 1 lit. a), gegebenenfalls Datenschutzbeauftragter (lit. b): Ihre Angaben
  • Zwecke und Rechtsgrundlagen (lit. c): Terminanfrage, Missbrauchsabwehr, gegebenenfalls Werbe-Einwilligung und Messung von Öffnungen und Klicks, soweit Sie diese eingeschaltet haben
  • Berechtigte Interessen, soweit Sie sich darauf stützen (lit. d)
  • Empfänger (lit. e): NexDeck als Auftragsverarbeiter, die Unterauftragsverarbeiter, gegebenenfalls Google/Microsoft (Kalender, Meet/Teams) und der Anbieter eines fremd gehosteten Logos
  • Übermittlung in Drittländer (lit. f): Länder und Grundlagen stehen unter Unterauftragsverarbeiter
  • Speicherdauer (Abs. 2 lit. a): die Fristen oben und Ihre eigenen Fristen für Termine und Interessenten
  • Rechte der Betroffenen (lit. b), Widerruf einer Einwilligung (lit. c), Beschwerderecht bei einer Aufsichtsbehörde (lit. d)
  • Pflichtangaben (lit. e): Name und E-Mail sind Pflichtfelder, ohne sie kommt keine Buchung zustande
  • Automatisierte Entscheidungen (lit. f): Die Buchungsseite weist Anfragen automatisch ab (Wegwerf-Adressen, gesperrte Domains, Bot-Erkennung, Anfragelimit). Wie Sie das einordnen, klären Sie mit Ihrer Datenschutzberatung.
  • Zugriff auf den Browser-Speicher (§ 25 TDDDG, siehe oben)

Die Plattform-Hinweise von NexDeck zur Terminbuchung (Datenschutzerklärung, Abschnitt 4a) sind unter jeder Buchung verlinkt.

Häufige Probleme

Buchung wird abgelehnt: „Die Terminbuchung ist für diese Website nicht freigegeben"

  • Domain steht NICHT in der Liste → Schritt 1 prüfen
  • Domain enthält Tippfehler (z.B. htttps:// statt https://)
  • Subdomain fehlt (z.B. ihr-betrieb.de eingetragen, aber Website läuft auf www.ihr-betrieb.de)

iframe ist abgeschnitten / Scrollbalken erscheint

  • Höhe beim Erzeugen des Codes erhöhen und den neuen Code einsetzen
  • Alternativ die Script-Variante mit automatischer Höhenanpassung nutzen

Bestätigungs-Link öffnet in NexDeck statt in eigener Website

Das ist gewollt. Der Link öffnet eine Bestätigungs-Seite bei NexDeck. Besucher können anschließend zur eigenen Website zurückkehren.

Darstellung passt nicht zur Website

?theme=dark oder ?theme=light im iframe-URL setzen, oder im Generator „Automatisch" wählen.

Verwandte Themen

Für die vollständige Hilfe mit Ihren eigenen Einstellungen: im Programm anmelden.