Ein Online-Shop Konfigurator ist unverzichtbar für den Verkauf individuell anpassbarer Produkte. Er ermöglicht es Endkunden, ihre Wunschprodukte direkt nach ihren Vorstellungen zu gestalten. Doch wie wird ein solcher Konfigurator in einen Online-Shop oder eine Webseite integriert? In diesem Artikel erfahren Sie anhand praktischer Beispiele, wie die Integration gelingt. Außerdem zeigen wir, wie Unternehmen erfolgreich Konfiguratoren nutzen, um ihre Kunden zu begeistern. Lassen Sie sich inspirieren und holen Sie sich wertvolle Tipps für Ihren eigenen Online-Shop Konfigurator.
Erfolgreiche Integration eines Online-Shop Konfigurators – Inspirationen und Best Practices
Bild: Integration des Outdoorküchen-Konfigurator auf der out4Kitchen Webseite
Sowohl die technische Integration als auch das Design des Konfigurators im Online-Shop oder auf der Webseite spielen eine entscheidende Rolle für den Verkaufserfolg.
Wir haben die wichtigsten Themen für Sie zusammengefasst, um die erfolgreiche Integration Ihres Konfigurators zu unterstützen.
- So wird der Konfigurator auf Ihrer Seite / Ihren Online-Shop eingebunden
- Einfach & effektiv: Konfigurator-Integration via Hyperlink
- Flexibel & benutzerfreundlich: Nahtlose Konfigurator-Integration via iFrame
- Perfekte Integration: Tipps für eine optimale Customer Experience mit Konfigurator
- Corporate Identity im Fokus: Den Konfigurator optimal gestalten
- Schnellerer Einstieg für Nutzer: fertige Inspirationsvorlagen
- Optimierung Ihrer Verkaufsprozesse durch Konfigurator-Integration
- Konfigurator-Integration: Sind technische Kenntnisse nötig?
- Fazit: Optimale Konfigurator-Integration in Shop & Webseite
1. So wird der Konfigurator auf Ihrer Seite/ Ihren Online-Shop eingebunden
Die größte Frage gilt es zu Anfang zu beantworten:
Wie wird so ein Konfigurator auf meiner Website angezeigt? Fachleute sprechen dann von einer Integration in Ihre Website.
Dabei ist egal, ob Sie den Konfigurator in einen Online-Shop, eine Website über ein CMS, oder eine individuell programmierte Website nutzen.
All diese Systeme nutzen im Browser das gleiche Prinzip um angezeigt zu werden.
Ein Konfigurator lässt sich hier problemlos auf mehrere Weisen anzeigen.
Einfach & effektiv: Konfigurator-Integration via Hyperlink
Die simpelste Methode ist die Verlinkung des Konfiguratorsytems.
So ein Konfigurator wird unter einer URL im Web zur Verfügung gestellt. Menü- und CTA-Buttons öffnen dann den Konfigurator in einem neuen Tab, was für Online-Shops und Webseiten gleichermaßen funktioniert.
Der Sofa-Hersteller Livinda verlinkt im Menü sowie auf den Produktseiten auf den separaten Sofa-Konfigurator.
Konfigurator-Verlinkung im Menü
Konfigurator-Verlinkung direkt beim Produkt
In einem neuen Tab steht dem Endkunden der Online-Shop Konfigurator in full-size zur Verfügung:
Der Online-Shop Konfigurator von Livinda
Flexibel & benutzerfreundlich: Nahtlose Konfigurator-Integration via iFrame
Oft ist gewünscht, dass Nutzer den Konfigurator nicht in einem neuen Tab öffnen. Auch das ist möglich.
Dann spricht man von einer nahtlosen Integration.
Diese wird ermöglicht, indem man im Quellcode Ihrer Website ein iFrame-Element einfügt. Stellen Sie sich dieses Prinzip so vor, wie ein Bild auf Ihrer Website. Dieses Bild liegt auch an einer anderen Stelle (typischerweise auf Ihrem Server) und wird dann auf Ihrer Seite angezeigt. Genauso verhält es sich mit dem Konfigurator, der auch an einer anderen Stelle liegt, aber dann auf Ihrer Seite angezeigt wird.
Der Terrassendach-Hersteller KD-Überdachung hat einen Konfigurator in der Website integriert. Erkennbar ist das am Header oben auf der Seite. Über den Header kommt man auf eine Unterseite, auf der der Konfigurator eingebettet ist. Er öffnet sich aber nicht in einem neuen Tab, sondern direkt auf der Webseite.
Nahtlose Integration des Konfigurators auf der Kundenwebsite mit einem iFrame-Element.
Perfekte Integration: Tipps für eine optimale Customer Experience mit Konfigurator
Beide Integrationsmöglichkeiten bieten Ihre Vorteile.
Die Weiterleitung via Hyperlink funktioniert sehr simpel und bringt kaum Arbeit mit sich. Zusätzlich ist es von Vorteil, dass der Konfigurator full-screen angezeigt wird, sodass der Nutzer keine Ablenkungen hat und keine Probleme wegen eines zu kleinen Fensters erhält.
Die nahtlose Konfigurator-Integration in die Seite ist etwas komplizierter, erzeugt aber das vertrauenwürdigere Bild für den Nutzer, was oft hilfreich für die Conversion ist.
Zudem bleibt der Nutzer technisch auf der Seite, was spätere Analysen, beispielsweise mit Google Analytics, erleichtert.
Video: Konfigurator-Einbettung per Hyperlink vs. iFrame
Es ist allerdings mit einigen Tipps möglich, die Vorteile der Hyperlink-Integration auch im Falle der nahtlosen Integration zu nutzen. Dafür sollten Sie:
- Die Seite mit der Konfigurator-Integration möglichst von ablenkenden Dingen befreien.
- Entfernen Sie z.B. die Möglichkeit des Scrollings und bieten Sie nur einen Header mit Konfigurator unterhalb an.
- Nutzen Sie die gesamte Höhe und Breite der Website.
- Arbeiten Sie nicht mit Container-Elementen, um dem Konfigurator möglichst viel Platz einzuräumen.
- Achten Sie auch auf die mobile Integration des Konfigurators (s. Bild), sodass dieser auch auf kleinen Geräten gut bedienbar bleibt.
Mobile Ansicht: nahtlose Konfigurator-Integration
Corporate Identity im Fokus: Den Konfigurator optimal gestalten
Die Konvertierung Ihrer Websitebesucher unterliegt vielen Faktoren. Ein Konfigurator ist dabei enorm hilfreich. Es gilt aber:
Umso besser sich der Konfigurator an Ihr vorhandenes Design anpasst, umso mehr Vertrauen hat der Nutzer in die Qualität Ihrer Leistungen.
Fertige Konfigurator-Lösungen bieten meist die Möglichkeit die wichtigsten Merkmale Ihrer Corporate Identity schnell und simpel einzustellen. Darunter Schriftart, das anzuzeigende Logo oder die zu verwendenden Farben im gesamten System.
Es kann aber oft auch darüber hinaus gehen, und es sind sehr detallierte Einstellungen gewünscht. Beispielsweise die Rahmendicke eine selektierten Auswahl. Für diese Fälle bietet sich das Customizing mit CSS an. Eine der drei Standardsprachen im Web. Gute Konfigurator-Lösungen bieten die Möglichkeit über selektierbare Klassen an allen verfügbaren Stellen das Design des Konfigurators anzupassen.
Der Medizintechnik-Hersteller Systec & Solutions aus Berlin hat den HMI-Konfigurator vollständig mit CSS an die Corporate Identity Merkmale angepasst. So bieten Sie ihren Nutzern ein Maximum an nahtloser Integration in die Website.
Der Konfigurator von Systec & Solutions: nahtloses Erscheinungsbild
Schnellerer Einstieg für Nutzer: fertige Inspirationsvorlagen
Je nachdem, wie Sie den Konfigurator einbinden, kann es sinnvoll sein, Inspirationen zu verwenden. Eine Inspiration ist eine durch Sie erstellte Konfiguration, die als Einstiegspunkt für den Nutzer gilt. Sie möchten beispielsweise, dass der Nutzer initial immer mit einer voreingestellten Breite oder Farbe Ihres Produktes startet.
Inspirationen diesen aber häufig auch noch einem anderen Zweck. Wenn Sie den Nutzer auf Ihrer Website vor Einstieg in den Konfigurator bereits mit Bildern unterstützen möchten.
So ist es möglich, dem Nutzer erstmal eine Reihe an Bildern von verschiedenen Produktvariationen zu zeigen. Klickt der Nutzer auf eines dieser Bilder, startet er mit der auf dem Bild sichtbaren Inspiration direkt im Konfigurator.
Das bringt u.a. die Vorteile, dass die Customer Journey nicht unterbrochen und die Absprungrate verringert wird.
Darscht-Überdachungen bietet eine solche Inspirationsseite an und erleichtert seinen Nutzern den Konfigurator-Einstieg. Mit einem Klick auf „Inspiration ansehen“ öffnet sich umgehend der Konfigurator mit der fertigen Inspirationsvorlage.
Screenshot: Darscht-Überdachungen bietet initial eine Auswahl der Top-Produkte als fertige Inspirationsvorlagen an.
Screenshot: Der Nutzer startet im Konfigurator mit der ausgewählten Inspiration
2. Optimierung Ihrer Verkaufsprozesse durch Konfigurator-Integration
Im ersten Teil des Artikels haben wir erfahren, wie ein Konfigurator auf Ihrer Seite bzw. in Ihren Online-Shop eingebunden werden kann. Allerdings geht es in häufigen Fällen darüber hinaus. Wie sollte der Prozess aussehen, wenn der Nutzer seine Konfiguration abgeschlossen hat?
Produktkonfiguratoren bieten dafür meist mehrere Möglichkeiten, die wir folgend beleuchten:
- Online-Shop Konfigurator: Anbindung an den Warenkorb
- Leadgenerierung im Produktkonfigurator mit E-Mail und PDF-Versand
- Beispiel: Integration per Shopify-Konfigurator App
- Volle Flexibilität durch Webhooks
Online-Shop Konfigurator: Anbindung an den Warenkorb
Ein Online-Shop Konfigurator wird dafür genutzt, komplexe Produkte direkt online zu verkaufen. Die Konfiguration übernimmt dabei der Konfigurator. Die Abwicklung der Bezahlung und der Bestellung übernimmt der Online-Shop. Konfiguratoren müssen also die Möglichkeit bieten, dass ein Nutzer am Ende der Konfiguration das fertige Produkt in den Warenkorb legen kann.
Technisch bedeutet das an dieser Stelle, dass die Server beider Systeme miteinander sprechen müssen. In einigen Fällen bieten Konfigurator-Hersteller bereits fertige Plugins für eine Vielzahl an Online-Shops (z.B. WooCommerce, Magento, Shopify, Shopware, Presta etc.) an. Diese müssen im jeweiligen Online-Shop Store installiert und verknüpft werden, dann ist bereits alles erledigt.
In den Fällen von individuell entwickelten Konfiguratoren muss diese Shop-Anbindung meist kostenintensiv programmiert werden.
Im Livinda Online-Shop konfigurieren Nutzer erst ihr Traum-Sofa.
Nachdem Klick auf „In den Warenkorb“ werden alle Konfigurationsdaten an das Shopsystem übermittelt und in den Warenkorb transferiert.
Screenshot: Sofa-Konfigurator im Livinda Online-Shop
Im nächsten Verkaufsschritt öffnet der Nutzer den Warenkorb und findet seine vorige Konfiguration vor.
Die Warenkorb-Anbindung im Online-Shop Konfigurator ermöglicht eine nahtlose Customer Journey.
Screenshot: Warenkorb mit übermittelter Konfiguration.
Beispiel: Integration per Shopify-Konfigurator App
Mit der Shopify-Konfigurator App ist es möglich, direkt aus dem Shopify-Store einen Online-Shop Konfigurator zu installieren. Wie einfach eine Shop-Anbindung für einen Shopify Produktkonfigurator erfolgen kann, sehen Sie in diesem Video:
Mehr zur Integration des Online-Shop Konfigurators in Shopify hier: Wie binde ich Shopify ein?
Leadgenerierung im Produktkonfigurator mit E-Mail und PDF-Versand
Konfiguratoren werden gerne zur Leadgenerierung eingesetzt. Dafür eignen sich im Konfigurator Funktionen wie „Merken“ oder „Anfragen“. Nach der Betätigung dieser Funktion sollte das Konfigurator-System in der Lage sein eine E-Mail zu versenden. In dieser E-Mail sollte dem Nutzer die Möglichkeit gegeben werden, die Konfiguration erneut wieder aufzurufen.
Konfiguratoren sind auch in der Lage an dieser E-Mail ein PDF mit zu versenden. Dieses PDF kann eine Zusammenfassung der Konfiguration beinhalten, oder sogar ein ganzes Angebot beinhalten, das vom Konfigurator automatisiert erstellt wurde.
Der Terrassendach-Händler Darscht-Überdachungen nutzt den Konfigurator im Onlineshop.
Es wird neben der Warenkorb-Funktion aber auch die Möglichkeit zum Speichern und zur Anfrage angeboten.
Im Falle der Anfrage erhält der Nutzer innerhalb weniger Minuten per E-Mail ein Angebot.
Screenshot: Leadgenerierung im Konfigurator mit CTA „Anfragen“
Screenshot: Klick auf „Anfragen“ öffnet Übersicht
Screenshot: im 2. Schritt erscheint das Kontaktformular
Volle Flexibilität durch Webhooks
Oft wird mit der Shop-Anbindung oder dem E-Mail und PDF-Versand schon ein großer Vorteil geboten. In manchen Fällen können die Anforderungen aber noch individueller auf die Unternehmensprozesse zugeschnitten werden.
Dafür ein Beispiel:
KD-Überdachung nutzt den Konfigurator zur Leadgewinnung.
Wenn ein Kunde anfragt, erhält KD-Überdachung eine Benachrichtigung über die Anfrage an eine zentrale E-Mail im Unternehmen.
KD-Überdachung verfügt aber Europaweit über Filialen und möchte diese Anfragen entsprechend der Postleitzahl des Nutzers automatisch an die entsprechende Filiale senden.
Screenshot: Filialauswahl vor Konfiguration bei KD Überdachungen
Der Konfigurator nutzt also weder die Shop-Anbindung noch die out-of-the-box angebotene E-Mail Funktion. Stattdessen werden Webhooks benutzt.
Webhooks ermöglichen es, einer Server-Software mitzuteilen, dass ein bestimmtes Ereignis eingetreten ist und dann eine Reaktion auszulösen.
Im Falle von KD-Überdachung teilt der Konfigurator also einem anderen System mit, dass eine Anfrage ausgelöst wurde. Dieses andere System übernimmt dann die weiteren Schritte, d.h. die Zuteilung nach Postleitzahl und den E-Mail-Versand.
Einige Konfigurator-Hersteller bieten die Möglichkeit von Webhooks direkt in der Software an. Im Fall von individuell entwickelten Systemen ist aber meist eine manuelle Entwicklung notwendig.
Es gibt mittlerweile eine Vielzahl an Server-Systemen die solche Prozesse mit Leichtigkeit umsetzen können. Die Prominentesten sind Zapier, Make.io oder n8n.
3. Konfigurator-Integration: Sind technische Kenntnisse nötig?
Ja und Nein! Wir haben die beiden Integrationswege Hyperlink und iFrame detailliert erklärt. Vor- und Nachteile besitzen beide Lösungen. Wird die iFrame-Einbettung gewählt, sollte diese mit einem technischen Ansprechpartner aus der Webagentur oder internen Marketingabteilung betreut werden.
Die optimale Einbettung funktionier full-size und dafür müssen technische Details beachtet werden. Die Einbindung mittels Hyperlink kann ohne technische Kenntnisse erfolgen.
Eine etablierte Produktkonfigurator-Software, wie z.B. K3, ist ideal für die Selbstverwaltung ausgelegt. Ein Konfigurator wird entweder in Eigenregie oder durch eine Webagentur in den Online-Shop integriert und verwaltet.
Diese Lösung bietet eine einfache Integration u.a. per Shop-Plugin. Eine ausführliche Dokumentation, vorgefertigte Templates im Konfigurator (s. Bild) oder auch ein Video-Kurs können bei der Einrichtung unterstützen.
Screenshot: Templates und Branchenlösungen in der K3-Verwaltungsoberfläche
Erfolgreich mit schlüsselfertiger Konfiguratorlösung
Stahlfux – ein Anbieter für individuelle Edelstahlgeländer übernahm einen Großteil der Einrichtung des Geländer-Konfigurators eigenständig. Durch die fertige Branchenlösung erfolgte eine schnelle Integration in Webseite und zeitnaher Veraufseinsatz.
Lesen Sie dazu mehr in der Success Story:
Geländer-Konfigurator automatisiert Verkaufsprozess
Video: Geländer-Konfigurator von Stahlfux im Einsatz
4. Fazit: Optimale Konfigurator-Integration in Shop & Webseite
Die Integration eines Online-Shop-Konfigurators ermöglicht es Unternehmen, individuelle Produktlösungen anzubieten und Verkaufsprozesse zu optimieren.
Zwei gängige Einbindungswege – die Verlinkung per Hyperlink oder die nahtlose Integration via iFrame – bieten Flexibilität für unterschiedliche Anforderungen.
Die Hyperlink-Einbindung lässt sich schnell und ohne technisches Wissen umsetzen. Die iFrame-Integration sorgt hingegen für ein professionelleres Erscheinungsbild und eine verbesserte Customer Journey. Wichtig sind eine ablenkungsfreie Darstellung, optimale Nutzung der Bildschirmfläche und die Anpassung an das Corporate Design.
Zusätzlich unterstützt ein Konfigurator Prozesse wie Warenkorb-Anbindung, Leadgenerierung per E-Mail und PDF-Versand oder automatisierte Lösungen durch Webhooks. Moderne Produktkonfigurator-Software wie die K3-Konfigurator-Plattform ermöglicht eine einfache Integration in Shopsysteme wie Shopify, WooCommerce oder Shopware.
Eine durchdachte Konfigurator-Integration verbessert die Nutzererfahrung, steigert das Vertrauen und erhöht die Conversion-Rate.
Bildquellen: Kunden- und Nutzerbeispiel aus Produktkonfigurator-Integrationen mit K3 in Online-Shop / Webseiten
Zur ObjectCode GmbH:
Seit 2014 realisieren wir Online-Shop Konfiguratoren für B2B- und B2C-Unternehmen, sowohl national als auch international. Unsere bewährte Produktkonfigurator-Software K3 ermöglicht es uns, zeitnah und kalkulierbar die passende Lösung für Sie zu finden.
