Docs  /  Integrationen  /  HTML-Snippet Integration

HTML-Snippet Integration

Zuletzt aktualisiert: 01. Oktober 2026

Dieser Artikel erklärt wie du den Konfigurator per HTML-Snippet in deine Website oder dein CMS einbindest — ohne Webshop-System. Du brauchst dafür keinen Entwickler: ein <script>-Tag und ein <div> mit ein paar Attributen genügen.

Wann ist das HTML-Snippet die richtige Wahl?

Das HTML-Snippet eignet sich wenn du:

  • keinen Magento-, Shopware- oder Shopify-Shop betreibst
  • den Konfigurator auf einer Webseite als Angebots- oder Produktpräsentationstool einsetzen möchtest
  • ein CMS wie WordPress, TYPO3, Joomla oder Jimdo nutzt

Für die drei Shopsysteme gibt es fertige Plugins — die bringen Warenkorb-Anbindung und Preisübernahme mit, was das Snippet allein nicht leisten kann.

Schritt 1: HTML5-Integration aktivieren

Im Backend unter Einstellungen → Integrationen findest du die Karte HTML5 (V3 Beta). Aktiviere sie, falls noch nicht aktiv. Dort steht auch das fertige Snippet mit deiner Kunden-ID und deinem Token — vorausgefüllt, du musst nur die Komponenten-ID ersetzen.

Daneben liegt die ältere Karte HTML5 ohne Zusatz. Sie gehört zur Vorgängerversion des Konfigurators; welche du brauchst, steht weiter unten unter „Das ältere Snippet".

Schritt 2: Domain freischalten

Unter Einstellungen → Domänen trägst du die Domain(s) ein, auf denen der Konfigurator laufen soll. Trage sie ohne Protokoll ein, also www.meineseite.de oder meineseite.de.

Das ist keine Formalie: Dein Token steht im Quelltext der Seite und ist damit für jeden lesbar. Was ihn schützt, ist genau diese Liste — Anfragen von einer nicht eingetragenen Domain beantwortet der Dienst mit „Requesting host not authorized", und der Konfigurator bleibt leer. Steht deine Seite auf einer Staging-Domain, trage diese mit ein.

Schritt 3: Komponenten-ID herausfinden

Die ID deiner Komponente siehst du in der Komponenten-Übersicht — sie steht direkt unter dem Komponentennamen (z. B. „ID 10722"). Diese ID kommt ins Snippet.

Schritt 4: Das Snippet

<script src="https://cloud.configento.app/configento-v3/configento.js" defer></script>

<div
    data-configento
    data-component-id="YOUR_TEMPLATE_ID"
    data-configento-customer="DEINE-KUNDEN-ID"
    data-configento-token="DEIN-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="19"
    data-configento-locale="de_DE"
></div>

So funktioniert es: Das Skript sucht beim Laden jedes Element mit dem Attribut data-configento und baut dort einen Konfigurator auf. Alles Weitere liest es aus den data-configento-*-Attributen desselben Elements.

Das <div> darf überall stehen, wo dein CMS HTML erlaubt — das Skript selbst nur einmal pro Seite, auch wenn mehrere Konfiguratoren darauf liegen.

Alle Attribute im Überblick

Grundlagen

Attribut Bedeutung
data-configento Markiert das Element als Konfigurator-Platz. Ohne Wert.
data-component-id Welche Komponente geladen wird.
data-configento-customer Deine Kunden-ID. Steht im Snippet im Backend.
data-configento-token Dein Token. Steht im Snippet im Backend.
data-configento-cloud-base-url cloud.configento.app — unverändert übernehmen.
data-configento-tax-rate Steuersatz für die Preisanzeige, z. B. 19.
data-configento-locale Sprache, z. B. de_DE. Steuert Komponententexte und die Beschriftungen des Konfigurators.

Darstellung an eigener Stelle

Attribut Bedeutung
data-configento-price-mount CSS-Selektor: Dort erscheint der laufende Preis. Ohne dieses Attribut zeigt das Snippet keinen Preis.
data-configento-summary-mount CSS-Selektor: Dort erscheint die Zusammenfassung. Ohne das Attribut gibt es keine.
data-configento-summary-open Zusammenfassung anfangs aufgeklappt (true/false). Wirkt nur zusammen mit summary-mount.
data-configento-combined-image-mount CSS-Selektor: Das zusammengesetzte Produktbild erscheint dort.

Sprachen

Attribut Bedeutung
data-configento-language-select Fragt den Besucher nach seiner Sprache, bevor der Konfigurator erscheint. Ohne Wert.
data-configento-languages Schränkt die angebotenen Sprachen ein, z. B. de_DE, en_GB.
data-configento-content-locale Sprache nur für die Komponententexte, getrennt von der Oberfläche. Selten nötig.

Selten gebraucht

Attribut Bedeutung
data-configento-config Alle Einstellungen als JSON-Objekt statt als Einzelattribute.
data-configento-currency Währungscode, wenn er vom Standard der Komponente abweicht.
data-configento-asset-base-url Abweichender Ort für Bilder.
data-configento-token-endpoint Adresse, an der sich der Konfigurator selbst kurzlebige Tokens holt. Das nutzen die Shop-Plugins; beim HTML-Snippet bleibt es leer.

Zusatzfunktionen

Preis und Zusammenfassung platzieren — wichtig

Ohne weitere Angabe zeigt das HTML-Snippet weder Preis noch Zusammenfassung. Das ist Absicht: Auf einer Webseite gehören diese beiden Elemente ins Layout der Seite, nicht in einen fremden Kasten mittendrin. Du bestimmst also selbst, wo sie erscheinen — aber du musst es tun, sonst fehlen sie.

Du legst dafür eigene Elemente an und verweist per CSS-Selektor darauf:

<div id="mein-bild"></div>
<h1>Mein Produkt</h1>
<div id="mein-preis"></div>

<div
    data-configento
    data-component-id="10722"
    data-configento-customer="DEINE-KUNDEN-ID"
    data-configento-token="DEIN-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="19"
    data-configento-locale="de_DE"
    data-configento-price-mount="#mein-preis"
    data-configento-combined-image-mount="#mein-bild"
></div>

Preis und Bild aktualisieren sich dort live mit jeder Auswahl. Findet der Selektor kein Element, bleibt die Stelle leer — ein Tippfehler legt den Konfigurator nicht lahm, kostet dich aber die Anzeige.

Das zusammengesetzte Produktbild verhält sich anders als Preis und Zusammenfassung: Es erscheint auch ohne combined-image-mount, dann innerhalb des Konfigurators. Der Selektor verschiebt es lediglich.

Für die Zusammenfassung gilt dasselbe Muster mit data-configento-summary-mount. data-configento-summary-open steuert dann, ob sie aufgeklappt startet — allein, ohne summary-mount, bewirkt das Attribut nichts, weil es dann keine Zusammenfassung gibt, die es aufklappen könnte.

Sprachauswahl vorschalten

Liegt deine Komponente in mehreren Sprachen vor, kann der Konfigurator den Besucher zuerst fragen, welche er möchte. Er zeigt dann je Sprache eine Kachel mit Flagge und Sprachnamen; nach dem Klick startet der Konfigurator in dieser Sprache — Komponententexte wie Beschriftungen.

<div data-configento
     data-component-id="10722"
     data-configento-language-select></div>

Welche Sprachen angeboten werden, liest der Konfigurator aus der Komponente selbst. Die Liste kann also nicht von dem abweichen, was wirklich übersetzt ist. Soll ein bestimmter Auftritt nur zwei davon zeigen, nenne sie ausdrücklich:

data-configento-language-select
data-configento-languages="de_DE, en_GB"

Gut zu wissen:

  • Bei nur einer Sprache erscheint keine Auswahl — ein Klick, der nichts fragt, wäre nur eine Hürde.
  • Die Wahl gilt für die Sitzung: Wer auf eine andere Seite wechselt und zurückkommt, wird nicht erneut gefragt. Ein Besuch am nächsten Tag beginnt wieder mit der Frage.
  • Die Wahl des Besuchers hat Vorrang vor data-configento-locale. Dieses Attribut ist deine Vorgabe, die Auswahl ist seine Entscheidung.

Zum Ausprobieren: Demo „Mehrsprachigkeit".

Mehrere Konfiguratoren auf einer Seite

Du kannst beliebig viele data-configento-Elemente auf einer Seite platzieren — jedes lädt seine eigene Komponente und rechnet eigenständig. Das Skript bindest du trotzdem nur einmal ein.

Vergib in diesem Fall je Element eine eigene id, damit du sie später per JavaScript auseinanderhalten kannst, und verweise mit price-mount & Co. auf unterschiedliche Ziele.

Einstellungen als JSON

Wenn dein CMS viele Attribute am selben Element unhandlich macht, kannst du sie gebündelt angeben:

<div data-configento data-configento-config='{
    "componentId": "10722",
    "customer": "DEINE-KUNDEN-ID",
    "token": "DEIN-TOKEN",
    "cloudBaseUrl": "cloud.configento.app",
    "taxRate": "19",
    "uiLocale": "de_DE"
}'></div>

Achte auf die einfachen Anführungszeichen außen, damit die doppelten im JSON erhalten bleiben.

JavaScript-API

Für eigene Logik auf der Seite — etwa einen „Angebot anfordern"-Knopf im Seitendesign — stellt der Konfigurator eine kleine Schnittstelle unter window.Configento bereit:

<script>
  Configento.ready.then(function () {
      var konf = Configento.first();

      // Auf jede Preisänderung reagieren
      konf.on('price', function (p) {
          console.log('Neuer Gesamtpreis:', p.total);
      });

      // Aktuelle Auswahl auslesen
      console.log(konf.getSelections());
  });
</script>
  • Configento.ready — ein Promise, das erfüllt ist, sobald die Konfiguratoren der Seite bereitstehen. Dein Code gehört hinein; davor gibt es nichts abzufragen.
  • Configento.first() — der erste Konfigurator der Seite. Bei mehreren: Configento.forElement('#meine-id').
  • on('change', …) — jede Änderung der Auswahl.
  • on('price', …) — jede Preisänderung, mit Gesamtpreis und Differenz zum Vorwert.
  • getSelections(), getState(), getPriceBreakdown() — Auswahl, Gesamtzustand und Preisaufschlüsselung auslesen.
  • getSummary() — die Zusammenfassung als HTML, z. B. für ein eigenes Formular.
  • finalize() — schließt die Konfiguration ab und liefert das Ergebnis zurück; damit speicherst du sie in deinem eigenen Prozess.

Schritt 5: Snippet einbinden

Füge das Snippet an der gewünschten Stelle in deine Website ein:

  • WordPress — HTML-Block im Gutenberg-Editor
  • TYPO3 — HTML-Element
  • Jimdo — Widget „Eigener HTML-Code"
  • Sonstige — direkt in den Quellcode der Seite

Manche CMS-Editoren entfernen <script>-Tags aus normalen Textblöcken. Nutze deshalb immer den ausdrücklichen HTML-/Code-Block, nicht den Fließtext-Editor.

Schritt 6: Testen

Öffne die Seite im Browser und prüfe, ob der Konfigurator lädt. Im Backend kannst du unter Bearbeiten → Vorschau ebenfalls testen — die Vorschau setzt eine aktive HTML5-Integration voraus.

Bei Problemen:

Symptom Ursache
Konfigurator bleibt leer, Meldung „Requesting host not authorized" Domain nicht unter Einstellungen → Domänen eingetragen (auch die Staging-Domain!)
Gar nichts passiert, kein Kasten <script>-Tag vom CMS entfernt — HTML-Block statt Textblock verwenden
„Komponente konnte nicht geladen werden" YOUR_TEMPLATE_ID nicht ersetzt, oder die Komponente ist noch nicht veröffentlicht
Konfigurator da, aber kein Preis zu sehen data-configento-price-mount fehlt — siehe „Preis und Zusammenfassung platzieren"
Preis erscheint nicht an der gewünschten Stelle Das Element mit der im Selektor genannten id fehlt oder steht erst nach dem Konfigurator im HTML
Sprachauswahl erscheint nicht Die Komponente führt nur eine Sprache, oder es wurde bereits in dieser Sitzung gewählt

Das ältere Snippet

Einbindungen, die mit _configentoSettings und html5.js arbeiten, stammen aus der Vorgängerversion und laufen unverändert weiter — du musst nichts überstürzt umstellen.

Neue Einbindungen solltest du aber mit dem oben gezeigten Snippet aufbauen. Nur dort gibt es die neueren Funktionen wie die Sprachauswahl, die eigenen Platzierungen für Preis und Produktbild sowie die JavaScript-Schnittstelle. Auch einzelne Merkmalstypen funktionieren ausschließlich im neuen Konfigurator; die Komponenten-Einstellungen weisen im Backend darauf hin.

Zum Umstellen tauschst du das alte Snippet komplett gegen das neue — die beiden Varianten lassen sich nicht mischen. Kunden-ID und Token bleiben dieselben.

Nächste Schritte

← Alle Artikel 14 Tage kostenlos testen