Mit dem HTML-Snippet bindest du einen Konfigurator in jede Website ein – WordPress, TYPO3, Joomla, Jimdo oder selbst gebautes HTML. Du brauchst dafür kein Shop-Plugin und keinen Entwickler: ein <script>-Tag und ein <div> mit ein paar Attributen genügen. Das Snippet lädt immer die Frontend-Engine V3.
Wann das HTML-Snippet passt
Das HTML-Snippet eignet sich, wenn du
- den Konfigurator auf einer normalen Webseite zeigen willst, etwa als Angebots- oder Anfrage-Werkzeug,
- ein CMS ohne Shop nutzt,
- die Anfrage über den Aktions-Button abschließt – als E-Mail, PDF oder an deine eigene URL.
Für Magento 2, Shopware 6 und Shopify gibt es fertige Plugins. Sie übernehmen Preis und Konfiguration in den Warenkorb – das kann das Snippet allein nicht. Siehe Magento-Plugin installieren, Shopware-Plugin installieren und Shopify-Plugin installieren.
Schritt 1: Token erzeugen
- Öffne im Admin Einstellungen und dort den Reiter Integrationen.
- Suche die Karte HTML5 (V3 Beta).
- Klicke auf Erzeugen. Du bekommst ein Token und darunter das V3-JavaScript-Snippet mit deiner Kunden-ID und deinem Token.
- Kopiere das Snippet mit Kopieren.
Die Karte hat keinen Schalter – sobald ein Token existiert, funktioniert das Snippet.
Erneuern erzeugt ein neues Token und macht alle bisherigen sofort ungültig. Danach lädt der Konfigurator auf keiner Seite mehr, bis du dort das neue Snippet eingesetzt hast.
Schritt 2: Domäne freigeben
Unter Einstellungen → Domänen trägst du die Domänen ein, auf denen der Konfigurator laufen darf – ohne https://, z. B. www.meineseite.de. Eine eingetragene Domäne gilt auch für ihre Unterdomänen. Änderungen wirken nach wenigen Minuten. Mehr dazu unter Globale Einstellungen.
Das ist keine Formalie: Dein Token steht im Quelltext deiner Seite und ist damit für jeden lesbar. Geschützt wird es durch diese Liste. Auf einer nicht eingetragenen Domäne zeigt der Konfigurator „Komponente konnte nicht geladen werden (HTTP 401)“ und darunter Requesting host not authorized. Testest du auf einer Staging-Domäne, trage auch diese ein.
Schritt 3: Komponenten-ID herausfinden
Die ID steht in der Komponenten-Übersicht neben jeder Komponente, z. B. ID 10722. Steht dort ID —, ist die Komponente noch nicht veröffentlicht. Veröffentliche sie zuerst – das Snippet zeigt immer den zuletzt veröffentlichten Stand.
Schritt 4: Snippet einfügen
Ersetze im kopierten Snippet YOUR_TEMPLATE_ID durch die ID der Komponente:
<script src="https://cloud.configento.app/configento-v3/configento.js" defer></script>
<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"
></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.
Füge das Snippet dort ein, wo dein CMS eigenen HTML-Code erlaubt – meist ein eigener HTML-Block oder ein HTML-Element. Viele CMS entfernen <script>-Tags aus normalen Textblöcken; nimm deshalb nicht den Fließtext-Editor.
Das <script>-Tag gehört nur einmal auf die Seite, auch wenn mehrere Konfiguratoren darauf liegen.
Schritt 5: Testen
Öffne die Seite im Browser. Der Konfigurator erscheint mit allen Merkmalen. Ohne weitere Attribute zeigt das Snippet keinen Preis, keine Zusammenfassung und keinen Titel – siehe nächster Abschnitt. Klappt etwas nicht, hilft die Fehlersuche.
Preis, Zusammenfassung und Produktbild platzieren
Auf einer Webseite gehören Preis und Zusammenfassung meist an eine bestimmte Stelle im Layout, z. B. neben die Produktüberschrift. Deshalb zeigt das Snippet sie nur dort, wo du es sagst. Du legst eigene Elemente an und verweist per CSS-Selektor darauf:
<div id="mein-bild"></div>
<h1>Mein Produkt</h1>
<div id="mein-preis"></div>
<div id="meine-zusammenfassung"></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-summary-mount="#meine-zusammenfassung"
data-configento-combined-image-mount="#mein-bild"
></div>- Preis (
price-mount): Gesamtpreis mit Steuerhinweis. Darunter erscheinen auch Fehler und Hinweise aus deinen Regeln. - Zusammenfassung (
summary-mount): die gewählten Merkmale und Werte. An eigener Stelle ist sie anfangs aufgeklappt; mitdata-configento-summary-open="false"startet sie zugeklappt. - Produktbild (
combined-image-mount): das kombinierte Produktbild. Ohne dieses Attribut erscheint es innerhalb des Konfigurators – der Selektor verschiebt es nur.
Alles aktualisiert sich live bei jeder Auswahl. Das Ziel-Element muss beim Laden der Seite schon im HTML stehen; ein Element, das erst später per JavaScript entsteht, findet der Konfigurator nicht. Findet der Selektor kein Element, bleibt die Anzeige weg – der Konfigurator selbst funktioniert trotzdem.
Alles im Konfigurator zeigen
Willst du Titel, Preis und Zusammenfassung einfach im Konfigurator selbst haben, wie in der Vorschau im Admin, setze:
data-configento-embed-mode="admin-preview"Dann erscheinen Titel der Komponente, Preisleiste und Zusammenfassung innerhalb des Konfigurators. price-mount und summary-mount funktionieren zusätzlich und verschieben das jeweilige Element an deine Stelle.
Sprachen
data-configento-locale legt die Sprache fest – für die Texte der Komponente und für die Beschriftungen des Konfigurators („Gesamt“, „Bitte wählen“). Fehlt ein Text in dieser Sprache, nimmt der Konfigurator dieselbe Sprache einer anderen Region (z. B. en_US statt en_GB), sonst eine andere vorhandene Übersetzung.
Sprachauswahl vorschalten
Liegt deine Komponente in mehreren Sprachen vor, kann der Konfigurator den Besucher zuerst fragen. Er zeigt dann je Sprache eine Kachel mit Flagge und Sprachnamen und startet nach dem Klick in dieser Sprache.
data-configento-language-selectAngeboten werden die Sprachen der Komponente. Für einen bestimmten Auftritt schränkst du sie ein:
data-configento-language-select
data-configento-languages="de_DE, en_GB"Einen Text über den Flaggen setzt du so:
data-configento-language-select-title="Wähle jetzt deine Sprache"Der Text erscheint genau so, wie du ihn schreibst. Da der Besucher noch keine Sprache gewählt hat, schreibst du ihn bei mehreren Märkten am besten in allen Sprachen, z. B. „Sprache wählen / Choose your language“.
Soll der Besucher die Sprache später wechseln können, rufst du showLanguageSelect() auf, etwa aus einem Button:
<button type="button" onclick="Configento.first().showLanguageSelect()">Sprache wechseln</button>Die Fahnen erscheinen erneut, die bisherige Auswahl im Konfigurator bleibt erhalten. Mehr dazu unter JavaScript-Schnittstelle (V3).
Gut zu wissen:
- Bei nur einer Sprache erscheint keine Auswahl.
- Die Wahl gilt für die Browsersitzung: Wer die Seite neu lädt oder zurückkommt, wird nicht erneut gefragt.
- Die Wahl des Besuchers hat Vorrang vor
data-configento-locale.
Zum Ausprobieren: Demo „Mehrsprachigkeit“.
Alle Attribute
Grundlagen
| Attribut | Bedeutung |
|---|---|
data-configento |
Markiert das Element als Platz für einen Konfigurator. Ohne Wert. |
data-component-id |
ID der Komponente |
data-configento-customer |
Deine Kunden-ID – steht im Snippet |
data-configento-token |
Dein Token aus der Karte HTML5 (V3 Beta) |
data-configento-cloud-base-url |
cloud.configento.app – unverändert übernehmen |
data-configento-tax-rate |
Steuersatz, auf den der Konfigurator die Preise umrechnet, z. B. 19. Entspricht er dem Steuersatz deiner Komponente, bleiben die Preise unverändert; 0 zeigt Nettopreise. Ohne das Attribut zeigt der Konfigurator die Preise so, wie sie in der Komponente angelegt sind. |
data-configento-locale |
Sprache, z. B. de_DE oder en_GB |
Darstellung
| Attribut | Bedeutung |
|---|---|
data-configento-price-mount |
CSS-Selektor für den Preis. Ohne dieses Attribut kein Preis. |
data-configento-summary-mount |
CSS-Selektor für die Zusammenfassung. Ohne dieses Attribut keine Zusammenfassung. |
data-configento-summary-open |
Zusammenfassung anfangs auf- (true) oder zugeklappt (false) |
data-configento-combined-image-mount |
CSS-Selektor für das kombinierte Produktbild |
data-configento-embed-mode |
admin-preview zeigt Titel, Preis und Zusammenfassung im Konfigurator |
data-configento-min-height |
Hält beim Laden die Höhe frei, z. B. 640px, damit die Seite nicht springt. Mit data-configento-min-height-keep bleibt sie auch danach. |
data-configento-wizard-nav |
Navigation im Wizard: full, buttons oder none – siehe Wizard und Gruppen steuern |
Sprachen
| Attribut | Bedeutung |
|---|---|
data-configento-language-select |
Sprachauswahl vor dem Konfigurator. Ohne Wert. |
data-configento-language-select-title |
Text über den Flaggen der Sprachauswahl |
data-configento-languages |
Angebotene Sprachen, durch Komma getrennt |
data-configento-content-locale |
Sprache nur für die Texte der Komponente, wenn sie von den Beschriftungen abweichen soll. Selten nötig. |
Selten gebraucht
| Attribut | Bedeutung |
|---|---|
data-configento-config |
Alle Einstellungen als JSON (siehe unten) |
data-configento-currency |
Währungscode, z. B. EUR, wenn er von der Komponente abweichen soll |
data-configento-component-json |
Die Komponente direkt in der Seite statt Abruf beim Laden – siehe Schneller laden |
Weitere Attribute wie data-configento-token-endpoint und data-configento-asset-base-url setzen die Shop-Plugins. Im HTML-Snippet lässt du sie weg. Alle Attribute mit ihren JSON-Namen stehen in der JavaScript-API-Referenz.
Bei Ja/Nein-Attributen gilt das Attribut ohne Wert als „ja“. Erlaubt sind außerdem true/false, 1/0 und yes/no.
Mehrere Konfiguratoren auf einer Seite
Du kannst beliebig viele data-configento-Elemente auf eine Seite setzen. Jedes lädt seine eigene Komponente und rechnet für sich. Das Skript bindest du nur einmal ein.
Gib jedem Element eine eigene id und verweise mit price-mount und den anderen Selektoren auf jeweils eigene Ziele. Über die id sprichst du die Konfiguratoren auch per JavaScript an.
Einstellungen als JSON
Wenn dein CMS viele Attribute unhandlich macht, fasst du sie in einem Attribut zusammen:
<div data-configento data-configento-config='{
"componentId": "10722",
"customer": "DEINE-KUNDEN-ID",
"token": "DEIN-TOKEN",
"cloudBaseUrl": "cloud.configento.app",
"taxRate": "19",
"uiLocale": "de_DE",
"priceMount": "#mein-preis"
}'></div>Die Namen im JSON: componentId, customer, token, cloudBaseUrl, taxRate, uiLocale, contentLocale, currency, priceMount, summaryMount, summaryOpen, combinedImageMount, embedMode, languageSelect, languageSelectTitle, languages (als Liste, z. B. ["de_DE", "en_GB"]), minHeight, minHeightKeep, wizardNav, productAttributes und component. Steht eine Einstellung im JSON und zusätzlich als Einzelattribut, gilt das JSON.
Achte auf die einfachen Anführungszeichen außen, damit die doppelten im JSON erhalten bleiben.
JavaScript-Schnittstelle
Für eigene Logik auf der Seite – etwa einen eigenen Anfrage-Knopf, ein Formular oder den Preis in deiner Kaufleiste – stellt der Konfigurator window.Configento bereit:
<script>
window.addEventListener('DOMContentLoaded', function () {
Configento.ready.then(function () {
var konfigurator = Configento.first();
konfigurator.on('price', function (p) {
console.log('Neuer Gesamtpreis:', p.total, p.currency);
});
});
});
</script>Alle Methoden und Ereignisse, das Speichern und Laden von Konfigurationen und den Umstieg von Legacy-Code beschreibt JavaScript-Schnittstelle (V3).
Das klassische Snippet
Konten mit der klassischen Cloud sehen unter Integrationen zusätzlich die Karte HTML5. Sie hat einen Schalter, ein eigenes Sicherheitstoken und im eingeschalteten Zustand ein JavaScript-Snippet (mit _configentoSettings und html5.js) und ein iFrame-Snippet. Beide laden die Frontend-Engine Legacy.
Bestehende Einbindungen mit dem klassischen Snippet laufen unverändert weiter. Für neue Einbindungen nimm das V3-Snippet: Nur dort gibt es Sprachauswahl, eigene Plätze für Preis, Zusammenfassung und Bild, die JavaScript-Schnittstelle und V3-Funktionen wie das Captcha.
Zum Umstellen ersetzt du das alte Snippet vollständig durch das neue – die beiden lassen sich nicht mischen. Die Kunden-ID bleibt gleich, das Token ist ein anderes: Es kommt aus der Karte HTML5 (V3 Beta). Was sich mit dem Wechsel der Engine ändert, steht in Frontend-Engine: Legacy oder V3. Hast du eigenen JavaScript-Code für das klassische Snippet, hilft Von Legacy umsteigen.
Fehlersuche
| Was du siehst | Ursache und Lösung |
|---|---|
| Gar nichts, kein Kasten | Das CMS hat das <script>-Tag entfernt. Nimm einen HTML-Block statt eines Textblocks. |
„Komponente konnte nicht geladen werden (HTTP 401)“ mit Requesting host not authorized |
Die Domäne fehlt unter Einstellungen → Domänen – auch Staging-Domänen eintragen. |
„Komponente konnte nicht geladen werden (HTTP 401)“ mit Token invalid |
Das Token stimmt nicht oder wurde mit Erneuern ersetzt. Kopiere das Snippet neu aus der Karte HTML5 (V3 Beta). |
| „Komponente konnte nicht geladen werden (HTTP 404)“ | YOUR_TEMPLATE_ID nicht ersetzt, falsche ID oder Komponente noch nicht veröffentlicht |
| Konfigurator da, aber kein Preis | data-configento-price-mount fehlt, oder der Selektor findet kein Element. Alternativ data-configento-embed-mode="admin-preview". |
| Preise zu niedrig, wie netto | data-configento-tax-rate steht auf 0 oder auf einem niedrigeren Steuersatz als in der Komponente |
| Änderungen aus dem Admin fehlen | Die Komponente ist nach der Änderung noch nicht veröffentlicht. |
| Sprachauswahl erscheint nicht | Die Komponente hat nur eine Sprache, oder der Besucher hat in dieser Sitzung schon gewählt. |
| Ein Merkmal zeigt „Unbekannter Merkmal-Typ“ | Die Komponente nutzt eine Funktion, die es nur in Legacy gibt – siehe Frontend-Engine: Legacy oder V3. |
Weitere Hinweise gibt die Browser-Konsole: Meldungen des Konfigurators beginnen mit [Configento].