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.
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 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:
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.
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 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.
Stahlfux – ein Anbieter für individuelle Edelstahlgeländer übernahm einen Großteil der Einrichtung des Geländer-Konfiguratorseigenständig. Durch die fertige Branchenlösung erfolgte eine schnelle Integration in Webseite und zeitnaher Veraufseinsatz.
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 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 der K3 Produktkonfigurator-Software in Online-Shops / Webseiten
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 K3 Produktkonfigurator-Software kann in jedes Shop-System integriert werden. Für die gängigsten Shop-Systeme wie Shopify, WooCommerce oder Shopware besteht bereits Plugins. Eine offene API untersützt die Konfigurator-Integration in alle anderen Shops.
Für die gängigsten Shop- bzw. Webseiten-Systeme müssen keine Programmieraufwände erfolgen. Der K3-Konfigurator wird per Plugin mit bestehenden Onlin-Shopsystem verbunden. Programmierkenntnisse sind erst dann erforderlich, wenn der Online-Shop indvidual entwickelt wurde. Unser K3-Support unterstützt gerne bei diesem Fall.
Der K3-Konfigurator funktioniert selbstverständlich auch auf einer Webseite (Wordpress etc.). Es ist nicht zwingend notwendig einen Online-Shop zu besitzen. Mit dem K3-Konfigurator verkaufen Sie nicht nur, sondern können hochwertige Leads sammeln. Statt an den Warenkorb wird der Konfigurator an Ihr CRM angebunden und optimiert die Leadgenerierung.
Seit 2014 realisieren wir 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.
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.
