Webflow
Ein Produktkonfigurator für Webflow in einem Embed
Binden Sie einen 3D-Produktkonfigurator in Webflow per Embed-Element ein, auf einer normalen Seite oder einem CMS-Template. Veröffentlichen, Platzierung und CMS-Felder.
Kein Plugin nötigPasst zu Ihrem ThemeAnfragen landen in Ihrer Pipeline
Einrichten
In wenigen Minuten in Webflow einbinden
- Bauen Sie Ihr Produkt oder öffnen Sie es in Ihrer Verwaltung, und kopieren Sie die Einbettungszeile.
- Öffnen Sie im Webflow Designer das Add-Panel und ziehen Sie ein Embed-Element (in manchen Versionen Code Embed) in den Abschnitt, in den der Konfigurator gehört.
- Fügen Sie die Zeile im Code-Editor ein und speichern Sie.
- Stellen Sie den übergeordneten Abschnitt auf volle Breite und lassen Sie die Höhe auf auto.
- Veröffentlichen Sie auf Ihre webflow.io-Testdomain, testen Sie, und veröffentlichen Sie danach auf Ihrer eigenen Domain.
Webflow führt im Designer keine eigenen Skripte aus, dort sehen Sie also einen Platzhalter. Das ist normal. Funktionen für eigenen Code hängen von Ihrem Webflow-Tarif ab; prüfen Sie das vorab.
<script src="https://store.nextconfigurator.com/static/embed.js" data-calipy="https://store.nextconfigurator.com/p/YOUR-STORE/embed/YOUR-PRODUCT"></script>Beispiel. Ihre eigene Zeile steht auf der Produktseite in Ihrer Verwaltung unter „Auf anderen Websites einbetten“ und auf der Seite nach dem Bauen.
Einen 3D-Produktkonfigurator binden Sie in Webflow ein, indem Sie ein Embed-Element auf die Seite oder das CMS-Template ziehen, die Einbettungszeile einfügen und veröffentlichen; der Konfigurator erscheint auf der veröffentlichten Website, nicht im Designer. Angebotsanfragen landen in Ihrer Pipeline bei Next Configurator.
Was es ist
Ein Produktkonfigurator für Webflow ist ein 3D-Planer in Ihrem Webflow-Layout, in dem Kunden ein Produkt auf Maß bringen, Optionen wählen und eine Anfrage senden. Webflow-Websites sind oft sorgfältig gestaltet, deshalb passt die Einbettung gut: ein Element in Ihrem eigenen Abschnitt, gestaltet nach Ihren Vorstellungen, ohne den Rest der Website zu berühren.
Veröffentlichen
Testen Sie zuerst auf der Testdomain. Haben Sie die Einbettung des Produkts auf Ihre eigenen Websites beschränkt, tragen Sie neben Ihrer eigenen Domain auch die webflow.io-Adresse ein, sonst bleibt der Test leer. Öffnen Sie nach dem Veröffentlichen die Seite abgemeldet und senden Sie eine Testanfrage.
Platzierung auf CMS-Templates
Pflegen Sie Ihre Produkte in einer CMS Collection, zum Beispiel ein Eintrag pro Lamellendach-Modell, setzen Sie das Embed-Element auf die Collection-Template-Seite. Der Embed-Editor auf einer Template-Seite kann CMS-Felder in den Code einfügen. Legen Sie in der Collection ein Textfeld mit der Einbettungs-URL des Produkts an und setzen Sie es in das Attribut data-calipy ein; so lädt jeder Eintrag aus einem Template seinen eigenen Konfigurator.
Lassen Sie das Feld bei Einträgen ohne Konfigurator leer und blenden Sie den Abschnitt dort über bedingte Sichtbarkeit aus.
Was der Kunde sieht
Der Konfigurator steht in Ihrem Design. Der Kunde stellt Breite und Tiefe der Pergola ein, wählt Lamellen oder ein festes Dach, eine RAL-Farbe und Beleuchtung, sieht das Modell in 3D und per AR auf dem Smartphone und sendet eine Anfrage. Preise erscheinen live, als „ab“-Preis oder gar nicht, je Produkt.
Wo die Anfragen ankommen
Anfragen landen in Ihrer Pipeline bei Next Configurator, nicht bei den Formulareinsendungen von Webflow. Aus jeder Anfrage machen Sie ein nummeriertes Angebot mit Varianten und Online-Angebotsseite, und Follow-ups behalten offene Anfragen im Blick.
Worauf Sie achten sollten
- Feste Höhen. Ein Abschnitt mit fester Höhe oder verstecktem Overflow schneidet den Konfigurator ab. Nutzen Sie auto.
- Cookie-Banner. Lassen Sie den Konfigurator als funktionales Skript zu.
- Mehrere Seiten. Ein Embed pro Konfigurator; auf CMS-Templates ein Feld pro Eintrag.
Fragen und Antworten
Noch unentschlossen? Wir gehen es mit Ihrem eigenen Produkt gemeinsam durch.
Demo-Termin buchenWarum sehe ich den Konfigurator nicht im Designer?
Webflow führt im Designer keine eigenen Skripte aus. Veröffentlichen Sie und prüfen Sie die Test- oder Live-Website.
Kann ein CMS-Template alle meine Produkte bedienen?
Ja. Speichern Sie die Einbettungs-URL jedes Produkts in einem CMS-Feld und setzen Sie es im Embed-Code der Template-Seite ein.
Beeinflusst das meine Webflow-Interaktionen?
Nein. Der Konfigurator läuft in einem eigenen Frame innerhalb des Elements und lässt Ihre Interaktionen unberührt.
Kann ich den Konfigurator in Webflow gestalten?
Den Abschnitt drumherum gestalten Sie in Webflow. Farben und Schriften im Konfigurator kommen aus den Einstellungen Ihres Shops bei Next Configurator.
In drei Minuten live. Ihr Konfigurator für 499 € im Monat.
14 Tage kostenlos, dann ein Tarif mit allem drin. In etwa drei Minuten live. Monatlich kündbar.