Auf dieser Seite · 6 Abschnitte
- Einbinden heißt: Snippet in einen HTML-Block einfügen, veröffentlichen, fertig.
- Ein iframe isoliert die Styles; ein kleines Begleit-Script übernimmt die Brücke zur Host-Seite.
- Klären Sie vorab, ob Conversion-Events aus dem Embed Ihre bestehenden Pixel auslösen.
- WordPress, Shopify und Webflow folgen derselben Abfolge, ohne DNS- oder Hosting-Änderung.
- Eine eigene Domain lohnt sich, wenn Sie ohnehin eine veraltete Website ersetzen.
Einen Konfigurator in WordPress, Shopify oder Webflow einzubinden heißt: ein Snippet in einen HTML-Block kopieren und veröffentlichen, ohne Plattformwechsel und ohne Entwickler. Wichtig sind dabei zwei Entscheidungen: iframe oder Script, und ob Ihre Werbe-Pixel die Anfragen aus dem Embed tatsächlich sehen. Dieser Ratgeber erklärt beides, gibt die Schritte je Plattform und vergleicht das Embed mit einem eigenen Storefront auf eigener Domain. Zum Schluss steht eine Checkliste für den Start.
Was „Einbinden“ hier bedeutet
Ein Embed ist ein Code-Schnipsel, den Sie in eine bestehende Seite einfügen (einen WordPress-Beitrag, eine Shopify-Produktseite, eine Webflow-Seite) und der den Konfigurator innerhalb dieser Seite lädt, eingepasst in Ihr bestehendes Layout. Der Kunde merkt nicht, dass er Ihre Seite verlassen hat, weil er das nicht hat: Der Konfigurator läuft in einem Frame auf Ihrer Seite. Das unterscheidet sich von einem eigenständigen Storefront auf eigener Domain, bei dem der Konfigurator die gesamte Seite auf einer eigenen Domain oder Subdomain ist (dazu weiter unten mehr).
Iframe vs. Script: der eigentliche Unterschied
Zwei technische Ansätze werden beide „Embed“ genannt.
Ein iframe lädt den Konfigurator als Seite-in-der-Seite: Sie fügen ein <iframe src="...">-Tag ein, und der Browser rendert darin ein eigenständiges Dokument. Das ist einfach, isoliert Style-Konflikte (das CSS des Konfigurators kollidiert nicht mit dem Ihres Themes und umgekehrt) und ist der gängigere Ansatz für eine 3D-Anwendung. Der Nachteil: Ein iframe ist standardmäßig ein abgeschotteter Kontext, daher braucht alles, was etwas über die umgebende Seite wissen muss (etwa ein Tracking-Pixel, das so aussehen soll, als käme es von Ihrer Seite), eine ausdrückliche Brücke.
Ein Script-Embed fügt ein <script>-Tag ein, das die Konfigurator-Oberfläche direkt in ein Container-Element auf Ihrer Seite baut, im DOM Ihrer eigenen Seite. Das fühlt sich “nativer” an und vereinfacht manche Tracking-Integrationen, weil der Code im selben Kontext läuft wie die Scripts Ihrer eigenen Seite. Der Nachteil: Es gibt mehr Angriffsfläche für Konflikte mit dem CSS oder JavaScript Ihres Themes, ein sauber gebautes Script-Embed muss seine Styles daher sorgfältig kapseln.
Die meisten Konfigurator-Plattformen, Next Configurator eingeschlossen, setzen für die eigentliche 3D-Canvas standardmäßig auf einen iframe (wegen Isolation und Performance) mit einem kleinen begleitenden Script (embed.js), das die Brücke übernimmt. Es gibt Konfigurations-Events und Conversion-Daten an die Host-Seite weiter, sodass Ihre bestehende Analytics und Ihre Ad-Pixel trotzdem korrekt auslösen. Sie müssen sich nicht zwischen beiden entscheiden; das Embed-Snippet des Anbieters sollte beide Teile für Sie übernehmen.
Tracking über das Embed hinweg
Das ist der Teil, der am häufigsten übersehen wird. Konfiguriert ein Kunde eine Pergola und fordert innerhalb des iframes ein Angebot an, und Ihr Google-Ads- oder Meta-Pixel sitzt auf der Host-Seite (Ihrer WordPress- oder Shopify-Seite), muss dieses Pixel erfahren, dass die Conversion stattgefunden hat. Sonst sieht Ihre Werbeplattform das „Lead“-Ereignis nie, und Ihre Kampagnen wirken, als würden sie nicht konvertieren, obwohl Anfragen tatsächlich hereinkommen.
Ein sauber gebautes Embed löst das über eine Messaging-Brücke: Der Konfigurator meldet innerhalb des iframes Events (Ansicht → Konfiguration → Hinzufügen → Lead/Anfrage → Registrierung) an das Embed-Script, das dann die eigenen Pixel der Host-Seite auslöst, mit den Attributen, die Sie am Embed-Tag gesetzt haben (zum Beispiel ein data-google-ads="AW-.../label"-Attribut mit Ihrem Conversion-Label). So feuert das Pixel der Werbeplattform, als wäre die Conversion direkt auf Ihrer Seite passiert. Denn für Tracking-Zwecke ist genau das der Fall.
Bevor Sie irgendwo einbinden, klären Sie mit Ihrem Anbieter: Leitet das Embed-Snippet Conversion-Events an meine bestehenden Pixel weiter, oder muss ich Tracking doppelt einrichten (einmal für meine Seite, einmal innerhalb der Plattform)? Im zweiten Fall wird Ihr Kampagnen-Reporting zu niedrig ausfallen.
Schritte je Plattform
WordPress. Fügen Sie im Block-Editor einen Custom-HTML-Block oder ein Custom-HTML-Widget auf der Seite oder im Beitrag ein, in dem der Konfigurator erscheinen soll, fügen Sie das Embed-Snippet ein, veröffentlichen Sie. Beschränkt Ihr Theme rohes HTML in manchen Bereichen, löst ein Plugin, das beliebige HTML/Script-Blöcke erlaubt, das Problem. Kein Serverzugriff nötig.
Shopify. Bearbeiten Sie im Theme-Editor die passende Vorlage (üblicherweise eine Produktseiten-Vorlage oder eine eigenständige Seite), fügen Sie einen „Custom Liquid“- oder „Custom HTML“-Abschnitt hinzu, fügen Sie das Snippet ein. Da Shopify-Produktseiten eigene Preis- und Warenkorblogik mitbringen, legen die meisten Verkäufer den Konfigurator auf eine eigene Seite statt die Produktseite komplett zu ersetzen, und verlinken von den Produktlisten dorthin.
Webflow. Fügen Sie der Seite ein Embed-Element hinzu, fügen Sie das Snippet in dessen HTML-Panel ein, veröffentlichen Sie. Webflows Embed-Element verhält sich wie ein abgeschotteter Container, das ist also ein unkompliziertes Einfügen.
In allen drei Fällen ist die Abfolge gleich: Seite finden, einen Roh-HTML/Embed-Block hinzufügen, ein Snippet einfügen, veröffentlichen. Keine Code-Änderungen an anderer Stelle der Website, kein neues Hosting, keine DNS-Änderungen.
Die Alternative: eigenständiger Storefront auf eigener Domain
Statt in eine bestehende Seite einzubinden, betreiben manche Verkäufer den Konfigurator als gesamten Storefront auf einer eigenen Domain oder Subdomain (etwa shop.ihredomain.de, oder die Hauptdomain selbst, falls die Konfigurator-Plattform einen vollständigen Storefront mit Page-Builder unterstützt und nicht nur ein Konfigurator-Widget). Das ist eine andere Entscheidung als iframe-vs-Script. Es geht um „will ich ein Widget auf meiner bestehenden Seite, oder einen vollständigen Storefront, der meine Seite ist.“
Eine eigene Domain ist sinnvoll, wenn Sie ohnehin eine veraltete Seite ersetzen, die eingebauten Seiten der Plattform wollen (Page-Builder, Angebotsseiten, Bewertungen, Projektgalerie) statt nur das Konfigurator-Widget, oder ein System wollen, das alles von der Startseite bis zum Angebot abdeckt. Einbinden ist sinnvoll, wenn Ihre bestehende Seite für Marke und Inhalt bereits funktioniert und Sie nur den Konfigurator selbst ergänzen müssen.
Next Configurator unterstützt beides: ein Embed-Snippet für eine bestehende WordPress-, Shopify- oder Webflow-Seite, oder einen vollständigen Storefront auf Ihrer eigenen Domain, gebaut im Page-Builder. Mehr dazu unter Einbettung und 3D-Konfigurator.
Was Sie vor dem Einbinden prüfen sollten
Haken Sie vor dem Start ab:
- Ladeverhalten: Lädt die 3D-Canvas nachgelagert, sodass sie den Rest der Seite nicht ausbremst?
- Mobile Darstellung: Funktioniert der Konfigurator auf dem Handy? Der meiste Konfigurator-Traffic ist mobil.
- Cookie-Consent: Respektiert das Embed den Consent-Status Ihrer Seite, bevor Tracking-Scripts laden?
- Conversion-Events: Leitet das Embed Anfragen an Ihre bestehenden Pixel weiter?
- Mehrere Embeds: Werden mehrere Embeds auf verschiedenen Seiten (eines pro Produkt) unterstützt, falls Sie mehr als eine Produktlinie verkaufen?
Die größere Kaufentscheidung, zu der dieser Artikel gehört, behandelt unser Kaufratgeber für 3D-Produktkonfiguratoren. Um ein Embed auf einer Testseite auszuprobieren, bauen Sie Ihren Konfigurator: Das Snippet haben Sie in wenigen Minuten. Für eine Führung an Ihrer eigenen Website buchen Sie 30 minuten mit uns.
nextconfiguratorEmbed und eigene Domain sind bei Next Configurator im selben Plan enthalten: 499 € pro Monat oder 4.999 € pro Jahr zzgl. MwSt., alle Funktionen inklusive, 14 Tage kostenlos testen, keine Einrichtungsgebühr. Siehe Preise.
