3D-Konfigurator in die eigene Website einbetten: iframe, Popup oder eigene Seite?
iframe, Popup oder eigene Seite? Die drei Wege, einen 3D-Konfigurator in Ihre Website zu bringen, mit Vor- und Nachteilen aus der Praxis.
· 7 Min. Lesezeit
Der Konfigurator ist fertig, das Produkt dreht sich, der Preis rechnet live. Und dann kommt die Frage, an der überraschend viele Projekte ins Stocken geraten: Wie kommt das Ding jetzt auf unsere Website? Die Firmenwebsite läuft auf WordPress oder TYPO3, wurde vor vier Jahren von einer Agentur gebaut, und niemand möchte sie anfassen. Die gute Nachricht vorweg: Für die Einbettung eines browserbasierten Konfigurators muss die bestehende Website nicht umgebaut werden. Es gibt drei bewährte Wege, und die Wahl hängt weniger von der Technik ab als von der Rolle, die der Konfigurator in Ihrem Vertrieb spielen soll.
Variante 1: Der iframe direkt in der Produktseite
Die direkteste Form: Der Konfigurator wird per iframe, also als eingebettetes Fenster, mitten in die bestehende Produktseite gesetzt. Ein HTML-Schnipsel von wenigen Zeilen genügt, den jedes Content-Management-System aufnehmen kann. Der Besucher scrollt durch die Produktseite und kann das Produkt an Ort und Stelle drehen, konfigurieren und anfragen, ohne die Seite zu verlassen.
Die Stärke dieser Variante ist die niedrigste denkbare Hürde: Niemand muss klicken, um den Konfigurator zu entdecken, er ist einfach da. Das macht sie ideal für die wichtigsten Produktseiten, auf denen Sie die volle Aufmerksamkeit auf das Produkt lenken wollen. Zu beachten ist der Platz: Ein 3D-Viewer braucht Fläche, auf mobilen Geräten sollte der Frame die volle Breite bekommen und hoch genug sein, damit Bedienelemente nicht abgeschnitten werden.
Variante 2: Das Popup hinter einem Button
Die zweite Variante hält die Produktseite schlank: Ein Button mit der Aufschrift Jetzt konfigurieren öffnet den Konfigurator als bildschirmfüllendes Overlay. Der Besucher bekommt die volle Fläche für die 3D-Ansicht und alle Optionen, und nach dem Schließen ist er exakt dort, wo er war.
Diese Variante spielt ihre Stärke aus, wenn das Seitenlayout eng ist oder der Konfigurator auf vielen Seiten verfügbar sein soll, etwa auf jeder Baureihen-Seite eines Katalogs. Der Klick auf den Button ist zugleich ein Messpunkt: Sie sehen genau, wie viele Besucher aktiv in die Konfiguration einsteigen. Der Preis dafür ist eben dieser eine Klick als Hürde, ein Teil der Besucher drückt den Button nie.
Variante 3: Die eigene Konfigurator-Seite
Der dritte Weg: Der Konfigurator bekommt eine eigene Adresse, etwa konfigurator.ihrefirma.de oder eine Unterseite, und wird aus Navigation, Produktseiten und E-Mail-Signaturen verlinkt. Das ist die richtige Wahl, wenn der Konfigurator selbst zum Ziel wird: Der Vertrieb schickt den Link in Angebots-Mails, druckt ihn als QR-Code auf Messeflyer, und Kampagnen können direkt auf ihn verlinken. Auch für die Auffindbarkeit über Suchmaschinen ist eine eigene, verlinkbare Seite die sauberste Lösung. In der Praxis schließen sich die Varianten übrigens nicht aus: Viele Hersteller kombinieren die eigene Seite als Hauptzugang mit iframes auf den wichtigsten Produktseiten.
Worauf müssen Sie unabhängig von der Variante achten?
- White-Label: Der Konfigurator sollte ausschließlich Ihre Marke zeigen. Ein Logo oder Link des Technologieanbieters mitten in Ihrer Produktpräsentation wirkt wie ein fremder Aufkleber auf Ihrer Maschine und lenkt Interessenten vom eigentlichen Produkt ab.
- Performance: Die 3D-Daten dürfen die eigentliche Seite nicht ausbremsen. Sauber gebaut lädt der Konfigurator seine Modelle erst, wenn er sichtbar wird oder geöffnet wird, und die Modelle selbst sind komprimiert, sodass auch Mobilbesucher in Sekunden ein drehbares Produkt sehen.
- Mobiltauglichkeit: Im B2B kommt ein erheblicher Teil der Besuche vom Smartphone, oft direkt aus der Werkhalle. Touch-Bedienung, lesbare Preise und ein Anfrageformular, das sich mit dem Daumen ausfüllen lässt, sind Pflicht.
- Anfragen und Links müssen durch die Einbettung hindurch funktionieren: Das Angebots-PDF, der teilbare Konfigurations-Link und das Anfrageformular müssen auch im iframe und im Popup vollständig nutzbar sein.
Ein Wort noch zum Datenschutz, weil die Frage in jedem Projekt kommt: Ein eingebetteter Konfigurator ist ein externer Inhalt auf Ihrer Seite und gehört damit in Ihre Datenschutzbetrachtung. Sauber gelöst ist das, wenn der Konfigurator ohne Marketing-Tracker auskommt, keine Cookies für Werbezwecke setzt und seine Auswertungen anonym erhebt. Dann bleibt die Einbettung rechtlich unspektakulär, und Ihre bestehende Cookie-Einwilligung muss nicht umgebaut werden. Fragen Sie den Anbieter konkret, welche Daten der eingebettete Frame erhebt und wohin sie fließen.
Der vierte Weg: Freigabe-Links für einzelne Kunden
Neben den drei öffentlichen Varianten gibt es einen Weg, der im B2B oft der wertvollste ist und selten mitgedacht wird: der nicht öffentliche Konfigurator. Nicht jedes Produkt gehört auf die Website. Eine neue Baureihe vor dem Marktstart, eine kundenspezifische Sondervariante oder Projektpreise für einen Rahmenvertragskunden sollen gezielt eine Person erreichen, nicht den Wettbewerb. Dafür eignen sich Freigabe-Links: Ein geschützter Link zeigt genau ein Produkt oder ein Bündel, lässt sich jederzeit widerrufen und optional befristen. Der Vertrieb verschickt ihn wie ein Dokument, nur dass der Empfänger ein interaktives 3D-Produkt öffnet statt eines PDFs.
Bei Configro sind alle vier Wege eingebaut: Für jedes Produkt lassen sich fertige Einbettungs-Schnipsel für Inline-iframe und Popup-Button erzeugen, die Einbettung läuft komplett white-label ohne Fremd-Branding, und Freigabe-Links für einzelne Produkte oder Bündel sind widerrufbar und optional befristet. Da die Engine vollständig im Browser läuft, braucht Ihre Website keine Plugins und keine Server-Änderungen: Der Schnipsel ins CMS, fertig. Wie sich das anfühlt, zeigt die Live-Demo unter configro.de/demo.
Das Fazit: Die Einbettung ist der einfachste Teil eines Konfigurator-Projekts, wenn sie von Anfang an mitgeplant wird. Ein HTML-Schnipsel bringt den Konfigurator in jede bestehende Website, ganz gleich welches CMS dahinter läuft. Die eigentliche Entscheidung ist eine Vertriebsfrage: Wo sollen Interessenten Ihrem Produkt begegnen, und wer darf was sehen?
Häufige Fragen
Wie bindet man einen 3D-Konfigurator in eine bestehende Website ein?
Üblich sind drei Wege: als iframe direkt in einer Produktseite, als Popup hinter einem Button oder als eigene verlinkte Konfigurator-Seite. Alle drei funktionieren ohne Umbau der bestehenden Website, ein HTML-Schnipsel genügt.
Verlangsamt ein eingebetteter 3D-Konfigurator meine Website?
Nicht, wenn er sauber gebaut ist. Der Konfigurator lädt in einem eigenen Frame und die 3D-Daten erst, wenn er sichtbar wird oder geöffnet wird. Die eigentliche Seite bleibt davon unberührt.
Was bedeutet White-Label bei einem Konfigurator?
Der eingebettete Konfigurator zeigt ausschließlich Ihre Marke: kein Logo, kein Branding und kein Link des Technologieanbieters. Für Besucher wirkt er wie ein nativer Teil Ihrer Website.
Kann ich einen Konfigurator nur für einzelne Kunden freigeben?
Ja, über Freigabe-Links: Ein geschützter Link zeigt genau ein Produkt oder ein Produktbündel, ist widerrufbar und optional befristet. So lassen sich neue Baureihen oder kundenspezifische Varianten gezielt teilen, ohne sie öffentlich zu machen.