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 Produktkonfigurator.
Lesezeit:
8 Minuten
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.
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.
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.
In einem neuen Tab steht dem Endkunden der Online-Shop Konfigurator in full-size zur Verfügung:
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.
Wir haben uns seit 2014 auf Konfiguratoren spezialisiert.
Diese Erfahrung teilen wir gerne mit Ihnen.
Wir klären in einem unverbindlichen Videotermin:
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.
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.
Sie haben unsere Cookies abgelehnt – deshalb können wir das Video nicht direkt hier anzeigen. Sie können das ändern oder direkt zu Vimeo wechseln.
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 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.
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.
Im ersten Teil des Artikels haben wir erfahren, wie ein Konfigurator 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:
Ein Konfigurator wird dafür genutzt, komplexe Produkte direkt online zu verkaufen. Die Produktkonfiguration übernimmt dabei der Konfigurator. Die Abwicklung der Bezahlung und der Bestellung übernimmt die Shopsoftware. 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-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.
Im nächsten Verkaufsschritt öffnet der Nutzer den Warenkorb und findet seine vorige Konfiguration vor.
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:
Sie haben unsere Cookies abgelehnt – deshalb können wir das Video nicht direkt hier anzeigen. Sie können das ändern oder direkt zu Vimeo wechseln.
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 auf seiner Webseite für die Leadgenerierung.
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.
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.
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.
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 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.
Zusammengefasst:
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 Verkaufseinsatz.
Sie haben unsere Cookies abgelehnt – deshalb können wir das Video nicht direkt hier anzeigen. Sie können das ändern oder direkt zu Vimeo wechseln.
Die Konfigurator-Integration 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 der K3 Produktkonfigurator-Software
Wir haben uns seit 2014 auf Konfiguratoren spezialisiert.
Diese Erfahrung teilen wir gerne mit Ihnen.
Wir klären in einem unverbindlichen Videotermin:
Es bestehen die Möglichkeiten den Konfigurator per iframe, Hyperlink oder Webhook an Shop oder Webseite einzubinden.
Die Integration per Hyperlink ist besonders einfach und schnell umzusetzen. Der Konfigurator wird auf einer externen URL gehostet und über einen Link auf der Website oder im Shop aufgerufen. Beim Klick öffnet sich der Konfigurator in einem neuen Tab und ermöglicht eine ungestörte Fullscreen-Nutzung.
Zusammengefasst:
- Keine technischen Kenntnisse nötig
- Fullscreen-Darstellung für maximale Nutzerfokussierung
- Minimaler Integrationsaufwand
Die iFrame-Variante wirkt nahtloser und ermöglicht eine verbesserte Customer Journey ohne Medienbruch. Sie verlangt allerdings mehr technisches Feingefühl bei der Umsetzung.
Hard facts:
Tipps für die iFrame-Integration:
Für die gängigsten CMS- und Shopsysteme müssen keine Programmieraufwände erfolgen. Der K3-Konfigurator wird per Plugin mit bestehenden Online-Shopsystem verbunden.
Programmierkenntnisse sind erst dann erforderlich, wenn der Online-Shop indvidual entwickelt wurde. Unser K3-Support unterstützt gerne bei diesem Fall.
Im K3-Konfigurator-Backend stehen fertige Plugins für die gängigsten Shopsysteme zur Verfügung. Alternativ kann die Integration individuell über die API oder Webhooks erfolgen.
Die Konfigurator-Integration beschreibt die technische und visuelle Einbindung eines Produktkonfigurators in Website oder Online-Shop. Dabei kann es sich um eine einfache Verlinkung (Hyperlink), eine iFrame-Einbettung oder eine tiefergehende Anbindung an das Backend des Shops handeln.
Mit der K3-Konfigurator-Software stehen verschiedene Wege offen, die sowohl benutzerfreundlich als auch technisch flexibel sind.
In diesem Artikel erfahren Sie, warum der Megatrend Individualisierung längst zum neuen Standard geworden ist. Kunden erwarten Produkte, die sich an ihre Wünsche anpassen – nicht umgekehrt. Digitale Konfiguratoren und Mass Customization machen genau das möglich. Wer nicht mitzieht, verliert.
In diesem Artikel erfahren Sie, wie digitaler Vertrieb Ihre Verkaufsprozesse automatisiert und transparenter macht. Kunden werden so zu aktiven Mitgestaltern – für mehr Erfolg und Nähe.
In diesem Artikel erfahren Sie, wie Mass Customization die Vorteile individueller Produktgestaltung mit effizienter Serienfertigung verbindet. Sie lernen, wie ein 3D-Produktkonfigurator kundenindividuelle Anpassungen ermöglicht und aktives Customer Empowerment unterstützt.