Integration

Eingebunden mit einem Code-Schnipsel.

Für Agenturen und Shopbetreiber: wie der Konfigurator auf die Website kommt, wie er aussieht und wie Anfragen weiterlaufen.

01 / Einbinden

Skript laden, Element setzen.

Der Konfigurator ist eine Web-Komponente mit dem Element <ring-configurator>. Sie funktioniert auf jeder Website, die ein Skript einbinden kann, in jedem Framework und jedem Baukasten mit HTML-Block, und kapselt ihr Styling, damit nichts mit Ihrer Seite kollidiert.

HTML, Beispiel
<script type="module" src="…/ring-configurator.js"></script>

<ring-configurator
  tenant="ihr-juwelier"
  catalog-url="/katalog.json"
  locale="de-DE"
></ring-configurator>

Attribute

tenant
Kennung Ihres Mandanten.
catalog-url
Adresse Ihres Katalogs mit Sortiment und Preisen.
locale
Sprache und Zahlenformat, etwa de-DE.
quality
Darstellungsqualität für schwächere Geräte.

Die Beispiele zeigen den Aufbau. Die Adresse des Skripts, die Kennung Ihres Mandanten und die vollständige Referenz aller Attribute, CSS-Variablen und Events erhalten Sie mit der Einrichtung.

02 / Theming

In der Optik Ihres Shops.

Farben, Schrift, Rundungen und Abstände setzen Sie über CSS-Variablen in Ihrem eigenen Stylesheet. Für weitergehende Anpassungen sind die Hauptbereiche einzeln über ::part ansprechbar.

CSS, Beispiel
ring-configurator {
  --rc-color-accent: #a98a56;
  --rc-font-body: "Ihre Hausschrift", sans-serif;
  --rc-font-heading: "Ihre Hausschrift", serif;
  --rc-radius: 4px;
}
03 / Event-API

Anfragen dorthin, wo Sie sie brauchen.

Der Konfigurator meldet Änderungen, Preise und abgeschickte Anfragen als Events. Damit übergeben Sie Konfigurationen an Warenkorb, Warenwirtschaft oder CRM.

JavaScript, Beispiel
const configurator = document.querySelector('ring-configurator');

configurator.addEventListener('request-checkout', (event) => {
  // Konfiguration, Preis und Share-Link der Anfrage
  sendeAnShop(event.detail);
});

Events

change
Die Konfiguration hat sich geändert.
quote
Ein neuer Preis liegt vor, aufgeschlüsselt je Ring.
request-checkout
Die Kundin oder der Kunde sendet die Anfrage ab, mit Konfiguration, Preis, Share-Link und dem Weg bei noch unsicherer Ringgröße.
contact
Die Kundin oder der Kunde nutzt einen Beratungsweg Ihres Juweliers: Telefon, WhatsApp, E-Mail oder Termin.
04 / Plattformen

Läuft heute überall, wo HTML läuft.

Für verbreitete Plattformen bereiten wir fertige Anbindungen vor, die ohne Code auskommen.

  • Verfügbar

    Web-Komponente

    Für jede Website, die ein Skript einbinden kann: eigene Seiten, Shopsysteme und Baukästen mit HTML-Block.

  • In Vorbereitung

    Shopify

    Konfigurierte Ringe landen mit berechnetem Preis direkt im Warenkorb Ihres Shopify-Shops.

  • In Vorbereitung

    Website-Baukästen

    Fertige Bausteine für verbreitete Baukästen, eingerichtet ohne Code.

05 / Ladezeit und Zugänglichkeit

Schnell da, für alle bedienbar.

  • Die Bedienoberfläche lädt zuerst, ihr Größenbudget liegt bei 57 KB gzip-komprimiert. Die 3D-Darstellung folgt im Hintergrund. Das Budget prüft unsere Build-Pipeline bei jeder Änderung.
  • Vollständig per Tastatur bedienbar, mit sichtbarem Fokus und Beschriftungen.

Alle Funktionen

Demo

Technische Fragen klären wir direkt mit Ihrer Agentur.

Schreiben Sie uns, welches System Ihre Website nutzt. Wir zeigen, wie die Einbindung dort aussieht.

Demo anfragen