← Zurück zum CutOptim ConfiguratorEinbindung · eine Zeile Code

Ein Produktkonfigurator für den Onlineshop, eingebunden mit einer Zeile Code

Der CutOptim Configurator ist ein Produktkonfigurator für Plattenmaterial, der direkt in Ihren eigenen Shopseiten läuft. Sie fügen ein Script-Tag und ein Element ein; der Konfigurator öffnet sich auf der Seite, als Pop-up, als Seitenleiste oder als eigene Seite und gibt die Bestellung an Ihren Shop zurück.

Live-Demo ausprobieren →Kostenlose Sandbox starten Zum Konfigurator Configurator-API-Referenz: Schnellstart →

Vier Arten, ihn zu öffnen

Sie wählen, wie der Konfigurator erscheint; derselbe Code bedient alle vier, und die Shop-Einstellung bestimmt den Standard.

— Auf der Seite (inline): Der Konfigurator ist Teil der Produktseite.
— Pop-up (modal): Ein Button wie „Diese Platte zuschneiden“ öffnet ihn über der Seite.
— Seitenleiste (drawer): Er fährt von der Seite herein und lässt die Produktseite sichtbar.
— Eigene Seite: ein Konfigurator über die ganze Seite, der den Kunden bei der Bestellung in Ihren Warenkorb zurückführt.

Vier Arten, ihn im Shop zu zeigen

Dieselbe Codezeile – Sie wählen, wie er sich öffnet.

Ein Script und ein Element

Der Konfigurator ist eine Web Component: Ein Script-Tag lädt ihn, und ein <cutoptim-configurator>-Element mit Ihrem öffentlichen Schlüssel platziert ihn. Ein Button mit data-cutoptim-open öffnet ein Pop-up oder eine Seitenleiste und kann die Platte der Produktseite, auf der sich der Kunde befindet, vorauswählen.

Der Code, den Sie in Ihren Shop einfügen

<script type="module" src="https://cfg.cutoptim.com/embed/assets/cutoptim-configurator.js"></script>

<button data-cutoptim-open="#cut">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_your_publishable_key" lang="de">
</cutoptim-configurator>

Ihre Marke, Ihre Texte

Farben, Schriften, Ecken und das helle oder dunkle Design folgen Ihrer Marke. Benannte ::part-Anker erlauben es Ihrem eigenen Stylesheet, Buttons, Karten und Felder anzupassen, und jeder kundensichtbare Text lässt sich je Sprache ändern. Der Konfigurator läuft in einer eigenen, isolierten Ebene: Ihre Seitenstile stören ihn nicht, und er stört Ihre Seite nicht.

Die Bestellung kommt in Ihren Shop zurück

Bestellt der Kunde, erhält die Seite ein cutoptim:order-Ereignis mit der Bestellung und ihrem signierten Angebot, sodass Ihr Shop sie in den Warenkorb legen kann. Ihr Server kann die Signatur unter /cfg/v1/quote/verify prüfen, bevor er den Preis akzeptiert. Im Modus „eigene Seite“ wird der Kunde mit der Bestellung in Ihren Warenkorb zurückgeschickt.

Standardmäßig sicher

Ihr Schlüssel funktioniert nur auf den Webadressen, die Sie angeben; eine andere Seite kann Ihren Konfigurator also nicht mit Ihren Preisen einbinden. Preise werden bei uns berechnet und signiert, nie im Browser.

Öffnen Sie vor dem Einbinden den Demo-Shop: Er zeigt den genauen Code für jede der vier Arten, den Konfigurator zu öffnen.

Häufige Fragen

Wie füge ich den Konfigurator meiner Website hinzu?

Fügen Sie ein Script-Tag und ein <cutoptim-configurator>-Element mit Ihrem öffentlichen Schlüssel in die Seite ein, auf der er erscheinen soll. Sie wählen, ob er auf der Seite, als Pop-up, als Seitenleiste oder als eigene Seite angezeigt wird. Der Demo-Shop zeigt den Code für alle vier Arten.

Funktioniert er mit meinem Shopsystem?

Er funktioniert auf jeder Seite, auf der Sie HTML und ein Script einfügen können – in einem Shop auf einer gängigen Plattform genauso wie in einem Eigenbau. Die Bestellung erreicht Ihre Seite als cutoptim:order-Ereignis und im Modus „eigene Seite“ als Rückkehr in Ihren Warenkorb. Für WooCommerce gibt es ein Plug-in im Early Access; ein eigener Shop oder ein ERP prüft den signierten Webhook auf seinem Server.

Kann ich ihn so gestalten, dass er zu meinem Shop passt?

Ja. Sie legen Farben, Schriften, Eckenradius und helles oder dunkles Design fest, passen Teile über benannte ::part-Anker mit Ihrem eigenen Stylesheet an und ändern jeden kundensichtbaren Text in jeder der zehn Sprachen.

Macht er meine Produktseite langsamer?

Der Konfigurator startet mit einem kleinen Script und lädt den Code jedes Schritts erst, wenn dieser Schritt gebraucht wird. Zeigt eine Seite ihn als Pop-up oder Seitenleiste, fällt die aufwendige Ladearbeit daher nur für Kunden an, die auf den Button klicken.

Kann jemand anderes meinen Konfigurator einbinden?

Nein. Ihr öffentlicher Schlüssel funktioniert nur auf den Webadressen, die Sie dafür angeben, und jeder Preis wird bei uns signiert. Eine andere Seite, die Ihren Schlüssel verwendet, wird abgewiesen, und ein im Browser geänderter Preis besteht die Signaturprüfung nicht.

Mehr zum Konfigurator

CutOptim Configurator →

Der Zuschnitt-Konfigurator für Ihren Webshop – Zuschnittplan und Preis live, Bestellungen direkt in Ihren Shop.

Live-Demo →

Teile in einem Demo-Shop eingeben und zusehen, wie sich Zuschnittplan und Preis beim Tippen ändern.

Preisregeln →

Je Platte, je m², je Meter Schnitt, Kanten, Bearbeitungen, Mehrwertsteuer und Mindestwert – Ihre Preise, live.

Eigene Plattform →

Signiertes Angebot und signierten Webhook auf Ihrem eigenen Server prüfen, mit Beispielen in Node und PHP.

Möbelvorlagen →

Vom Schrank, Regal oder Kleiderschrank aus starten: Teile, Plan und Preis folgen dem Maß.

Für Zuschnittbetriebe →

Plattenhändler, Zuschnittbetriebe und Plattenshops: Kunden bestellen online, mit Live-Plan und Ihren Preisen.

WooCommerce-Plugin →

Ein Zuschnitt-Button an Ihren WooCommerce-Produkten; nur ein geprüftes Angebot wird zur Warenkorbposition.

Configurator-API-Referenz: Schnellstart →

Einbetten, auf Ihrem Server prüfen, den signierten Webhook empfangen: drei Schritte.

Sie brauchen nur die Zuschnitt-Engine? Zur Engine API

RechtlichesKonfigurator-Bedingungen (EN) ·Auftragsverarbeitungsvertrag (EN) ·Datenschutzhinweis für Käufer ·Drittanbieter-Lizenzen (EN)