Einen Website-Builder in Ihr Produkt einbetten: wie die Teile zusammenpassen

White Label / Eingebetteter Builder

Wenn Sie ein SaaS-Produkt für Friseursalons, Fitnessstudios, Handwerksbetriebe oder Restaurants betreiben, fragen Ihre Kunden nach einer Website, und Sie möchten nicht, dass sie dafür Ihr Produkt verlassen. Ob Sie einbetten oder weiterleiten sollten, behandeln unsere Seite für SaaS-Plattformen und der Vergleich White Label vs. API. Diese Seite richtet sich an das Team, das sich bereits fürs Einbetten entschieden hat: wie der Sitzungs-Handshake funktioniert, was Sie absichern, welche Funktionen Sie freigeben, was in einem iframe kaputtgeht und wie Sie auf Ereignisse reagieren.

Demo buchen · Die Preise richten sich nach deinem Volumen und Setup, und deinen genauen Preis erfährst du im Gespräch. 0% Transaktionsgebühr.

Aktualisiert: 25. Oktober 2026

Kurz gesagt

Ihr Server fordert mit Client-ID und Secret ein kurzlebiges Sitzungstoken an; Ihr Frontend übergibt nur dieses Token an das Embed-Skript. Das Secret erreicht nie den Browser.
Jede Embed-Konfiguration listet die HTTPS-Origins, die sie nutzen dürfen, welche Builder-Bereiche sichtbar sind, Theme, Logo und Limits pro Nutzer.
Rechnen Sie mit iframe-spezifischen Problemen: Blockierung von Drittanbieter-Cookies in Safari und Firefox, Ihre eigene frame-ancestors-Richtlinie und Origin-Prüfungen bei postMessage.
Webhooks auf Markenebene sind mit HMAC-SHA256 samt Zeitstempel signiert, werden bei Fehlern wiederholt und nach wiederholten Fehlschlägen abgeschaltet. Vereinbaren Sie eine Demo, um die Embed-Konsole zu sehen.

Beginnen Sie mit der Entscheidung, die Sie bereits getroffen haben

Es gibt drei Wege, Ihren Nutzern eine Website zu geben: sie zu einem Builder mit Ihrer Marke unter eigener Adresse schicken, eine API aufrufen und eine eigene Oberfläche bauen oder einen fertigen Builder in Ihr Produkt einbetten. Die Abwägungen behandeln unsere Seite für SaaS-Plattformen und White Label vs. API, die Endpunkt-Referenz steht auf der API-Seite. Hier gehen wir davon aus, dass der Builder in Ihrer eigenen App erscheinen soll, unter Ihrer eigenen Navigation und angemeldet als Ihr Nutzer.

Bildschirm Embedded SDK in der Markenkonsole, mit der Schaltfläche Neue Embed-Konfiguration und einem leeren Zustand, der erklärt, dass jede Konfiguration eigene Client-Zugangsdaten und Anpassungsoptionen hat

*Der Bereich Embedded SDK der Markenkonsole. Jede Embed-Konfiguration erhält eigene Client-Zugangsdaten.*

Der Sitzungs-Handshake

Beim Einbetten geht am häufigsten die Anmeldung schief. Das Muster, das We.Inc nutzt, hält Ihre Nutzer nur in Ihrem Produkt angemeldet, ohne ein zweites Konto, das verwaltet werden müsste:

Ihr Backend ruft den Embed-Sitzungsendpunkt mit der Client-ID der Konfiguration, ihrem Client-Secret und der ID Ihres eigenen Nutzers auf (E-Mail und Name sind optional).
Die Antwort enthält ein Sitzungstoken, die Adresse des Builders, die Projekt-ID für diesen Nutzer und einen Ablaufzeitpunkt.
Ihr Backend gibt nur das Sitzungstoken an Ihr Frontend zurück.
Ihr Frontend lädt das Embed-Skript, verweist es auf ein Container-Element und initialisiert es mit dem Token. Optionale Callbacks werden ausgelöst, wenn der Builder bereit ist, ein Projekt gespeichert wird, bei Fehlern und wenn die Sitzung abläuft.
Bei Ablauf fordert Ihr Frontend bei Ihrem Backend ein neues Token an, genau wie in Schritt 1.

Daraus folgende Regeln:

Das Client-Secret ist ein Server-Geheimnis. Bewahren Sie es in Ihrem Secret Store auf, nie in Frontend-Code, mobilen Apps oder einem öffentlichen Repository. Es wird beim Anlegen der Konfiguration einmal angezeigt.
Ihre Nutzer-ID ist der Schlüssel. Dieselbe ID liefert dasselbe Projekt des Nutzers zurück, verwenden Sie also eine stabile interne ID, keine E-Mail-Adresse, die sich ändern kann.
Cachen Sie Tokens nicht nutzerübergreifend. Fordern Sie eines pro Nutzersitzung an.

Erlaubte Origins

Jede Embed-Konfiguration hat eine Liste erlaubter Origins: die exakten HTTPS-Adressen (oder Platzhaltermuster für Subdomains) der Produktseiten, die den Builder einbinden. Kommt eine Sitzungsanfrage mit einem Origin-Header, der nicht auf der Liste steht, wird sie abgelehnt.

Planen Sie die Liste pro Umgebung. Ein häufiger Fehler ist eine einzige Konfiguration für Produktion, Staging und lokale Entwicklung, sodass die Produktionskonfiguration Testadressen erlauben muss. Legen Sie stattdessen eine Konfiguration pro Umgebung an, jede mit eigenen Zugangsdaten, damit ein Widerruf von Staging nie die Produktion berührt.

Was Sie freigeben

Jede Konfiguration legt fest, welche Builder-Bereiche Ihre Nutzer erhalten. Die Optionen in der Konsole:

Bereich	Was er tut	Typische Wahl für eine vertikale SaaS
KI-Chat	Nutzer beschreiben Änderungen in einfachen Worten, und die KI setzt sie um	An: die wichtigste Bearbeitungsmethode für nicht technische Nutzer
Vorschau	Live-Vorschau der Website	An
Dateibaum	Projektdateien durchsuchen	Für die meisten Zielgruppen aus
Terminal	Terminalzugang im Builder	Aus, es sei denn, Ihre Nutzer sind Entwickler
Deploy	Die Website veröffentlichen	An, oder aus, wenn Sie aus Ihrer eigenen Oberfläche veröffentlichen
Export	Den Quellcode herunterladen	Ihre Entscheidung: An gibt Nutzern einen Ausweg, Aus hält sie in Ihrem Produkt

Konfigurationen enthalten außerdem ein Theme (Primärfarbe, Schrift, Eckenradius, Dunkelmodus), ein optionales eigenes Logo, einen Schalter für das „powered by“-Zeichen, eine maximale Anzahl Projekte pro Nutzer und eine maximale Anzahl KI-Nachrichten pro Sitzung. Legen Sie die Obergrenze für KI-Nachrichten bewusst fest; sie ist der wichtigste Hebel für die Nutzungskosten eines Tarifs mit Website.

Bildschirm API und Webhooks mit Bereichen für API-Schlüssel und Webhook-Endpunkte, beide leer

*API-Schlüssel und Webhook-Endpunkte liegen in der Markenkonsole neben den Embed-Einstellungen.*

Was in einem iframe kaputtgeht

Eingebettete Builder laufen in einem Frame auf Ihrer Seite. Planen Sie die folgenden Punkte vor dem Start ein, nicht nach dem ersten Support-Ticket.

Drittanbieter-Cookies. Der vollständige Cookie-Schutz von Firefox und der Tracking-Schutz von Safari isolieren oder blockieren Cookies, die eine eingebettete Website von einer anderen Domain setzt. Ein Handshake per Sitzungstoken vermeidet die Abhängigkeit von Nutzer-Cookies auf der Domain des Builders, testen Sie aber während Ihres Pilotprojekts den gesamten Ablauf in aktuellem Safari und Firefox, auch in privaten Fenstern.
Ihre eigene Frame-Richtlinie. Setzt Ihre App eine Content Security Policy, muss deren frame-src (oder child-src) die Adresse des Builders erlauben. Wird der Builder jemals unter Ihrer Domain ausgeliefert, prüfen Sie frame-ancestors und X-Frame-Options, damit Sie sich nicht selbst blockieren.
Nachrichten zwischen Frames. Embed-Skript und Builder kommunizieren per postMessage. Wenn Sie eigene Listener hinzufügen, halten Sie sich an die Standardregeln: Prüfen Sie den Origin des Ereignisses gegen die Adresse des Builders, validieren Sie die Nachrichtenstruktur und senden Sie nie sensible Daten an ein Platzhalterziel.
Höhe und Scrollen. Geben Sie dem Container eine explizite Höhe. Ein Builder in einer 400 Pixel hohen Box auf einer scrollenden Seite ist auf einem Laptop eine Qual; die meisten Produkte geben ihm den gesamten Inhaltsbereich.
Mobilgeräte. Eine Website auf dem Handy innerhalb einer anderen App zu bearbeiten, ist für alle schwierig. Viele Produkte zeigen auf Mobilgeräten Vorschau und KI-Chat und überlassen die Detailbearbeitung dem Desktop.

Auf Ereignisse reagieren

Für ein einbettendes Produkt zählen zwei Arten von Ereignissen.

Auf der Seite: Die Callbacks des Embed-Skripts (bereit, gespeichert, Fehler, Sitzung abgelaufen) lassen Ihre Oberfläche sofort reagieren, etwa indem Ihr eigener Header „Gespeichert“ anzeigt.

Auf Ihrem Server: Webhooks auf Markenebene melden Kundenereignisse: Kunde hat sich registriert, erste Website erstellt, Website veröffentlicht, sieben Tage nach dem Beitritt nichts veröffentlicht, Kunde hat jemanden geworben, Zahlung erhalten und Kunde pausiert. Jede Zustellung ist ein JSON-Body mit einer Zustell-ID (über Wiederholungen hinweg stabil), dem Ereignisnamen, einem Zeitstempel und den Daten.

Webhook-Einstellungen mit einem Feld für den Endpunkt, Kontrollkästchen für Ereignisse und einem Hinweis, dass fehlgeschlagene Zustellungen wiederholt werden

*Webhook-Ereignisse auswählen. Der Hinweis rechts nennt die Regel für Wiederholung und automatische Abschaltung.*

So empfangen Sie sie sicher:

Prüfen Sie die Signatur. Jede Anfrage enthält eine HMAC-SHA256-Signatur des Bodys (der ursprüngliche Header) und eine zweite Signatur über Zeitstempel und Body sowie den Zeitstempel selbst. Prüfen Sie die Signatur mit Zeitstempel und lehnen Sie Anfragen ab, die älter als wenige Minuten sind; das verhindert Replays.
Seien Sie idempotent. Wiederholungen verwenden dieselbe Zustell-ID; speichern Sie verarbeitete IDs und ignorieren Sie Duplikate.
Antworten Sie schnell. Bestätigen Sie zügig und erledigen Sie langsame Arbeit in einem Hintergrundjob. Fehlgeschlagene Zustellungen werden bis zu sechsmal über etwa fünfzehn Stunden wiederholt, und ein Endpunkt, der fünfzehnmal in Folge fehlschlägt, wird abgeschaltet, mit einer E-Mail an den Markeninhaber.

Typische Anwendungen: Markieren Sie das Konto in Ihrem Produkt als „Website live“, wenn Website veröffentlicht eintrifft; starten Sie einen Onboarding-Anstoß bei sieben Tagen ohne Veröffentlichung; gleichen Sie pausierte Kunden mit Ihrem eigenen Abostatus ab.

Berechtigungen und der Rest der Plattform

Das Embed ist ein Zugangsweg. Dasselbe Markenkonto hat außerdem Kundenkonten mit Schaltern pro Kunde (Veröffentlichen, eigene Domain, Code-Ansicht, Blog, Shop, Formulare, SEO und Freigabe vor dem Veröffentlichen), ein Audit-Protokoll der Organisationsaktionen und ein Portal mit Ihrer Marke, das Sie neben dem Embed für Nutzer anbieten können, die einen separaten Tab bevorzugen.

Einstellungen eines Kunden mit Schaltern für Veröffentlichen, eigene Domain, Codezugriff, Blog, Shop, Formulare, SEO und Freigabe vor dem Veröffentlichen

*Schalter pro Kunde in der Markenkonsole, unabhängig von der Embed-Konfiguration.*

Der Builder unter der Marke, mit einer Vorlagen-Website in der Vorschau

*Der Builder selbst, hier unter der eigenen Adresse der Marke. Eingebettet sitzt derselbe Builder in Ihrem Produkt.*

Websites sind echter Code (React, Vite, TypeScript, Tailwind), und der Code jeder Website lässt sich herunterladen oder mit GitHub synchronisieren. Das zählt, wenn Sie je die Plattform wechseln oder ein Kunde nach seinen Dateien fragt.

Code-Bereich mit Dateibaum und geöffnetem Komponenten-Quellcode

*Der Code-Bereich: Die Website ist Quellcode, kein geschlossenes Format.*

Checkliste vor dem Start

Kopieren Sie diese in Ihr Launch-Ticket.

[ ] Eine Embed-Konfiguration pro Umgebung, jede mit eigenen Zugangsdaten und Origins.
[ ] Client-Secret nur serverseitig gespeichert; Rotationsverfahren schriftlich festgehalten.
[ ] Stabile interne Nutzer-IDs an den Sitzungsaufruf übergeben.
[ ] Callback bei abgelaufener Sitzung holt ohne Neuladen der Seite ein neues Token.
[ ] Bereiche pro Tarifstufe gewählt; Terminal und Dateibaum aus, sofern nicht nötig.
[ ] Obergrenze für KI-Nachrichten und Projekte pro Nutzer für jede Stufe festgelegt.
[ ] Ihre CSP erlaubt den Builder in frame-src; getestet in Chrome, Safari und Firefox, auch in einem privaten Fenster.
[ ] Webhook-Endpunkt prüft die Signatur mit Zeitstempel und speichert Zustell-IDs.
[ ] „Website veröffentlicht“ und „nach 7 Tagen nicht veröffentlicht“ mit Ihrem Produkt oder CRM verbunden.
[ ] Support-Leitfaden für „Meine Website lädt nicht“, der zuerst Origin, Token-Ablauf und Datenschutzeinstellungen des Browsers prüft.
[ ] Entscheidung dokumentiert, ob Nutzer ihren Code exportieren dürfen und was mit Websites passiert, wenn ein Kunde kündigt.

Wie es weitergeht

Wenn Sie noch zwischen Einbetten und einem Portal mit Ihrer Marke wählen, beginnen Sie mit der Seite für SaaS-Plattformen. Brauchen Sie Endpunkt-Details zur Bereitstellung von Kunden, sehen Sie auf der API-Seite nach. Wenn Sie bereit sind, das Embed mit Ihrem eigenen Produkt in einer Testumgebung auszuprobieren, vereinbaren Sie eine Demo, und wir richten gemeinsam mit Ihnen eine Konfiguration ein.

Quellen

Zuletzt geprüft am 2026-10-25.

MDN Web Docs, Content-Security-Policy: frame-ancestors directive.
MDN Web Docs, Window: postMessage() method, Sicherheitsaspekte.
MDN Web Docs, Third-party cookies.

Richten Sie eine Embed-Konfiguration für Ihr Produkt ein

Buche eine 30-minütige Demo. Wir zeigen dir den Baukasten unter deiner Marke, sehen uns an, wie viele Kunden-Websites du betreiben willst, und nennen dir deinen genauen Preis.

Demo buchen

Lieber erst die ganze Tour? Den White-Label-Website-Baukasten ansehen

Fragen, die Käufer stellen

Brauchen meine Nutzer einen separaten Login für den eingebetteten Builder?

Nein. Ihr Server fordert mit Client-ID und Secret der Konfiguration ein kurzlebiges Sitzungstoken für Ihre eigene Nutzer-ID an, und Ihr Frontend initialisiert das Embed mit diesem Token.

Kann ich Teile des Builders vor meinen Nutzern ausblenden?

Ja. Jede Embed-Konfiguration legt fest, welche Bereiche sichtbar sind: KI-Chat, Vorschau, Dateibaum, Terminal, Deploy und Export. Sie bestimmt außerdem Theme, Logo, das powered-by-Zeichen, Projekte pro Nutzer und KI-Nachrichten pro Sitzung.

Wie sind Webhooks abgesichert?

Jede Zustellung ist mit HMAC-SHA256 signiert, einschließlich einer Variante, die einen Zeitstempel zusammen mit dem Body signiert, damit Sie Replays ablehnen können. Zustellungen tragen eine stabile ID zur Deduplizierung und werden bis zu sechsmal über etwa fünfzehn Stunden wiederholt.

Funktioniert das Embed in Safari?

Der Handshake per Sitzungstoken vermeidet die Abhängigkeit von den eigenen Cookies des Builders, aber Browser schränken Drittanbieter-Speicher immer weiter ein. Testen Sie daher vor dem Start den gesamten Ablauf in aktuellem Safari und Firefox, auch in privaten Fenstern.

Unterscheidet sich das von der We.Inc API?

Mit der API bauen Sie Ihre eigene Oberfläche und stellen Kunden aus Ihren Systemen bereit. Das Embed bringt den fertigen Builder in Ihr Produkt. Viele Teams nutzen die API für die Bereitstellung und das Embed für die Bearbeitung.