Den Konfigurator in Ihren Shop einbetten

Der Konfigurator besteht aus einem Script und einem HTML-Element. Zum Einbetten installieren Sie nichts auf Ihrem Server. Alles Folgende lässt sich vor dem Livegang in einer Sandbox proben.

Der Code

Die Kategorie Embedding code der Konsole schreibt Ihnen das Snippet in der gewählten Form: reines HTML (vier Varianten), WordPress, ein WooCommerce-SKU-Button oder ein eigenständiger Link mit QR-Code. Seine Form ist:

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

<cutoptim-configurator mode="inline" key="YOUR_PUBLISHABLE_KEY"
  api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>

Schlüssel, Dienstadresse und Sprache stammen aus Ihrer Konsole. Ein Pop-up oder eine Seitenleiste wird mit einem Button geöffnet:

<button data-cutoptim-open="#cut" data-material="MDF-18">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="YOUR_PUBLISHABLE_KEY"
  api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>

Modi und Attribute

Attribut	Bedeutung
`mode`	`inline` (Standard), `modal` (Pop-up) oder `drawer` (Seitenleiste)
`key`	Ihr öffentlicher Schlüssel
`lang`	die kundenseitige Sprache
`material`	eine Platte Ihres Katalogs, per ID oder exaktem Namen; der Ablauf beginnt dann bei der Zuschnittliste
`thickness`	grenzt `material` in Millimetern ein; allein wählt es nichts aus
`template`	eine Möbelvorlage als Start
`start`	`catalog`, `cutlist` oder `template`
`project`	ein zu ladendes gespeichertes Projekt
`customer-token`	Ihre eigene opake Referenz auf den angemeldeten Kunden, bis zu 128 Zeichen
`width`, `height`	die Größe der Host-Box, als einfache CSS-Längen

Ein Pop-up oder eine Seitenleiste lädt erst beim ersten Öffnen etwas, sodass ein Produktraster mit vielen Buttons schlank bleibt. Mehrere Konfiguratoren auf einer Seite arbeiten unabhängig voneinander. Ein Attribut mit ungültigem Wert wird verworfen, nie halb angewendet.

Per Script bietet das Element open(), close(), setMaterial(), loadProject() und setCustomerToken(). Es löst auf sich selbst Ereignisse aus: cutoptim:ready, step, quote, order, project, error, open und close.

Eigenständige Seite, QR-Code und iframe

Derselbe Konfigurator kann als eigene Seite laufen: Verlinken Sie darauf, drucken Sie den QR-Code für eine Ladentheke oder einen Kiosk oder senden Sie ihn einem Kunden. Eine Seite, die kein Script laden kann, kann diese Seite in einem iframe zeigen; nur die von Ihnen aufgelisteten Domains dürfen ihn einbetten, und Nachrichten zwischen dem Frame und Ihrer Seite werden nur von diesen Domains akzeptiert.

Erlaubte Domains

Der öffentliche Schlüssel funktioniert nur von den für ihn aufgelisteten Domains. Sie listen die Domains Ihres Shops, einschließlich einer Staging-Domain, beim Erstellen des Schlüssels in der Kategorie Keys & embedding auf; eine Anfrage von einem anderen Ursprung wird abgewiesen.

Branding

Farben, Eckenradius, Schrift, hell oder dunkel und alle kundensichtbaren Texte in zehn Sprachen werden in der Konsole festgelegt und gelten, ohne dass Sie Ihre Seite bearbeiten. Die Seite kann Teile des Widgets außerdem über CSS-::part-Selektoren gestalten.

Eine fixierte Version mit Integritätsprüfung

Standardmäßig lädt das Snippet den beweglichen Build latest. Wo der Dienst Versionen vorhält, kann die Konsole stattdessen ein fixiertes Snippet anbieten: eine bestimmte nummerierte Version mit einem integrity-Hash, sodass der Browser eine geänderte Datei ablehnt. Eine strengere Variante fixiert auch die nachgeladenen Teile. Die Versionen sind signiert, eine veröffentlichte Version ändert sich nie, und eine frühere Version bleibt verfügbar, sodass Sie sie so lange fixieren können, wie Sie brauchen. Für eine strenge Content Security Policy zeigt die Konsole die zu erlaubenden Direktiven. Fixierte Snippets setzen voraus, dass der Dienst Versionen vorhält; bis dahin bietet die Konsole nur das bewegliche Snippet an.

Gespeicherte Projekte

Ein Kunde kann eine Zuschnittliste speichern und später darauf zurückkommen. Das erste Speichern erzeugt ein privates Token, das der Browser behält, sodass ein Projekt standardmäßig nur in diesem Browser verfügbar ist. Es gibt keine anmeldebasierte Synchronisierung über Geräte hinweg, und der Kunde kann ein gespeichertes Projekt nicht löschen; nicht bestellte Projekte werden nach Ablauf Ihrer Aufbewahrungsfrist gelöscht.

Rückkehr in Ihren Warenkorb

Bestellt der Kunde, löst der Konfigurator das Bestellereignis auf Ihrer Seite aus. Auf der eigenständigen Seite kann er den Kunden nach einer erfolgreichen Bestellung auch in Ihren Shop zurückschicken: Sie legen eine Rücksprungadresse fest (nur https, auf Ihrer eigenen Domain), und der Kunde sieht eine kurze Bestätigung mit einem Button „Zurück zum Shop“. Der Preis darf nie aus dem Browser oder aus der Rücksprungadresse übernommen werden: Ihr Server prüft zuerst das Angebot. Wie, steht auf der Seite zu Bestellungen; ein fertiges Plug-in für WooCommerce finden Sie auf dessen eigener Seite, und den Referenzcode für jeden anderen Shop auf der Seite zu individuellen Plattformen.

FAQ

Was füge ich in meine Seite ein?

Ein Script-Tag, das den Konfigurator lädt, und ein cutoptim-configurator-Element mit Ihrem öffentlichen Schlüssel. Die Konsole erzeugt beides unter Embedding code in der von Ihnen gewählten Form. Der öffentliche Schlüssel ist dafür gedacht, in der Seite zu stehen; der geheime Schlüssel gehört nie dorthin.

Welche Darstellungsarten gibt es?

Vier: inline auf der Seite, als Pop-up (modal), als Seitenleiste (drawer) oder als eigene eigenständige Seite, auf die Sie verlinken oder die Sie als QR-Code zeigen. Eine Seite, die kein Script laden kann, kann die eigenständige Seite in einem iframe einbetten.

Kann der Button auf einer Produktseite den Konfigurator mit der bereits gewählten Platte dieses Produkts öffnen?

Ja. Setzen Sie data-cutoptim-open auf einen Button sowie data-material (und optional data-thickness) mit der ID oder dem exakten Namen der Platte. Der Konfigurator startet dann bei der Zuschnittliste mit gewählter Platte. Eine Platte, die in Ihrem Katalog nicht existiert, wählt nichts aus.

Kann jeder meinen Konfigurator auf seiner eigenen Website einbinden?

Nein. Anfragen mit Ihrem öffentlichen Schlüssel werden nur von den Domains auf der Erlaubnisliste des Schlüssels angenommen, und der iframe kann nur von diesen Domains eingebettet werden. Eine Seite auf einer anderen Domain wird abgewiesen.

Was bedeutet es, eine Version zu fixieren?

Jeder Build des Konfigurators wird als unveränderliche, nummerierte Version mit einem Integritäts-Hash pro Datei veröffentlicht. Die Konsole kann Ihnen ein Snippet geben, das auf eine Version zeigt und den Hash trägt, sodass der Browser eine geänderte Datei ablehnt. Die Alternative ist der bewegliche Kanal latest, der immer den neuesten Build ausliefert und keinen Hash hat. Fixierte Snippets werden angeboten, wenn der Dienst Versionen vorhält.

Wie erfährt meine Seite, dass der Kunde bestellt hat?

Das Element löst Ereignisse aus, darunter ein cutoptim:order-Ereignis mit der Bestell-ID und der signierten Bestellung. Behandeln Sie es nur als Benachrichtigung: Ihr Server muss das Angebot prüfen und die Bestellung von CutOptim abrufen, bevor er etwas abbucht. Siehe die Seite zu Bestellungen.