3D-Konfigurator in die eigene Website einbetten: iframe, Popup oder eigene Seite?
3D-Konfigurator in die Website einbetten: iframe, Popup oder eigene Seite. Welche Variante wann passt und was bei WordPress und TYPO3 zählt.
· 8 Min. Lesezeit
Einen 3D-Konfigurator in die eigene Website einbetten können Sie auf drei Wegen: als iframe direkt in der Produktseite, als Popup hinter einem Button oder als eigene, verlinkte Konfigurator-Seite. Für alle drei genügt ein HTML-Schnipsel von wenigen Zeilen, die bestehende Website muss dafür nicht umgebaut werden. Ein vierter, nicht öffentlicher Weg sind Freigabe-Links für einzelne Kunden.
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. Muss auch niemand. Welche Variante passt, hängt weniger von der Technik ab als von der Rolle, die der Konfigurator in Ihrem Vertrieb spielen soll.
Wie bindet man einen Konfigurator per iframe in die Produktseite ein?
Per iframe sitzt der Konfigurator als eingebettetes Fenster mitten in der bestehenden Produktseite. 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.
Wann ist ein Popup hinter einem Button die bessere Wahl?
Ein Popup passt, wenn die Produktseite schlank bleiben soll oder das Layout wenig Platz lässt. 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.
Wann braucht der Konfigurator eine eigene Seite?
Eine eigene Seite lohnt sich, sobald der Konfigurator selbst zum Ziel wird, auf das Mails, Flyer und Kampagnen verlinken. Er bekommt dann eine eigene Adresse, etwa konfigurator.ihrefirma.de oder eine Unterseite, und wird aus Navigation, Produktseiten und E-Mail-Signaturen verlinkt. Der Vertrieb schickt den Link in Angebots-Mails, druckt ihn als QR-Code auf Messeflyer, und Kampagnen landen direkt dort. 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 beim Einbetten eines Konfigurators 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.
Braucht ein eingebetteter Konfigurator eine Cookie-Einwilligung?
Nicht zwingend: Kommt der Konfigurator ohne Marketing-Tracker und Werbe-Cookies aus und erhebt seine Auswertungen anonym, muss Ihre bestehende Einwilligungslösung in der Regel nicht umgebaut werden. Die Frage kommt trotzdem in jedem Projekt, und zu Recht. Ein eingebetteter Konfigurator ist ein externer Inhalt auf Ihrer Seite und gehört damit in Ihre Datenschutzbetrachtung. Fragen Sie den Anbieter konkret, welche Daten der eingebettete Frame erhebt und wohin sie fließen, und lassen Sie sich das schriftlich geben.
Wie teilt man einen Konfigurator nur mit einzelnen Kunden?
Mit Freigabe-Links: Ein geschützter Link zeigt genau ein Produkt oder ein Bündel, lässt sich jederzeit widerrufen und optional befristen. Dieser vierte Weg ist im B2B oft der wertvollste und wird selten mitgedacht. 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. Der Vertrieb verschickt den Link 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.
Unterm Strich ist die Einbettung 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 WordPress oder TYPO3 ein?
Ein browserbasierter 3D-Konfigurator kommt über einen HTML-Schnipsel in WordPress, TYPO3 oder jedes andere CMS: in WordPress etwa über einen HTML-Block, in TYPO3 über ein HTML-Inhaltselement. Der Schnipsel enthält einen iframe oder einen Popup-Button. Plugins oder Änderungen am Webserver sind nicht nötig, solange der Konfigurator vollständig im Browser läuft und beim Anbieter gehostet wird.
Verlangsamt ein eingebetteter 3D-Konfigurator die Website?
Ein sauber gebauter 3D-Konfigurator bremst die Website nicht spürbar. Er läuft in einem eigenen Frame, und die 3D-Modelle laden erst, wenn der Konfigurator sichtbar wird oder jemand ihn öffnet. Die Modelle sind komprimiert und bringen meist nur wenige Megabyte mit. Text, Bilder und Navigation der Produktseite laden unabhängig davon wie gewohnt.
Was bedeutet White-Label bei einem Konfigurator?
White-Label heißt, dass ein eingebetteter Konfigurator ausschließlich die Marke des Herstellers zeigt: kein Logo, kein Schriftzug und kein Link des Technologieanbieters. Farben, Schrift und Logo kommen aus dem eigenen Erscheinungsbild. Für Besucher wirkt der Konfigurator dadurch wie ein fester Teil der Website und nicht wie ein fremdes Werkzeug, das in die Produktpräsentation eingeklinkt wurde.
Ist eine eigene Konfigurator-Seite besser für SEO als ein iframe?
Für Suchmaschinen ist eine eigene, verlinkbare Seite die sauberere Lösung, weil sie eine eigene Adresse, einen eigenen Titel und eine eigene Beschreibung bekommt. Inhalte in einem iframe werden der einbettenden Seite nicht zuverlässig zugerechnet. Ranken sollten ohnehin vor allem Produktseiten mit Text und technischen Daten, die in den Konfigurator führen. Viele Hersteller kombinieren deshalb beides.
Was tun, wenn keine geeignete Website für den Konfigurator da ist?
Ohne passende Website braucht es beides, den Konfigurator und die Seite darum. Manche Anbieter lösen das über Partner, die den Webauftritt mitbauen, sodass Einbettung und Relaunch ein Projekt bleiben statt zwei. Das spart Abstimmungsschleifen zwischen zwei Dienstleistern. Fragen Sie danach, bevor Sie zwei Verträge parallel verhandeln und am Ende niemand für die Schnittstelle zuständig ist.