Mit dem HTML-Snippet zeigst du deinen configento.app-Konfigurator auf jeder WordPress-Seite – als Angebots- oder Anfrage-Werkzeug auf deiner Website. Du brauchst dafür kein Plugin: ein <script>-Tag und ein <div> im Block Individuelles HTML genügen. Besucher stellen ihr Produkt zusammen, sehen den Preis sofort und schicken dir die Anfrage über den Aktions-Button – als E-Mail, PDF oder an deine eigene URL.
WooCommerce-Plugin im 4. Quartal 2026: Für WooCommerce-Shops bringen wir im vierten Quartal 2026 ein eigenes Plugin heraus. Es legt die Konfiguration mit dem geprüften Preis in den Warenkorb. Bis dahin funktioniert das Snippet auch auf WooCommerce-Seiten, aber nur als Anfrage-Werkzeug – siehe WooCommerce.
Was du brauchst
- Einen Zugang zu configento.app – das HTML-Snippet ist ab dem Paket Basic enthalten, zum Ausprobieren reicht der 14-tägige Test.
- Mindestens eine veröffentlichte Komponente. Das Snippet zeigt immer den zuletzt veröffentlichten Stand.
- Ein WordPress-Benutzerkonto mit der Rolle Administrator oder Redakteur – siehe Wer Skripte einfügen darf.
Schritt 1: Snippet und Domäne vorbereiten
- Öffne im Admin Einstellungen → Integrationen, klicke in der Karte HTML5 (V3 Beta) auf Erzeugen und kopiere das V3-JavaScript-Snippet mit Kopieren.
- Trage unter Einstellungen → Domänen die Domäne deiner WordPress-Website ein, ohne
https://, z. B.www.meineseite.de. Testest du auf einer Staging-Website, trage auch deren Domäne ein. - Ersetze im Snippet
YOUR_TEMPLATE_IDdurch die ID deiner Komponente. Sie steht in der Komponenten-Übersicht, z. B. ID 10722.
Die Schritte im Detail stehen in HTML-Snippet Integration.
Schritt 2: Snippet in WordPress einfügen
Im Block-Editor
- Öffne die Seite oder den Beitrag im Editor.
- Füge an der gewünschten Stelle den Block Individuelles HTML ein (über das + oder indem du
/htmltippst). - Füge das Snippet in den Block ein.
- Speichere die Seite und öffne sie im Browser.
Nimm nicht den Absatz-Block oder einen anderen Textblock: Dort entfernt WordPress das <script>-Tag.
Im klassischen Editor
Wechsle oben rechts auf den Reiter Text (nicht Visuell) und füge das Snippet dort ein.
Mit einem Page-Builder
Page-Builder haben ein eigenes Element für HTML-Code, etwa das Widget HTML in Elementor oder das Modul Code in Divi. Füge das Snippet dort ein. Manche Builder zeigen den Konfigurator erst in der Vorschau oder auf der veröffentlichten Seite, nicht im Bearbeitungsmodus.
Auf mehreren Seiten
Das <script>-Tag gehört nur einmal auf jede Seite. Liegen mehrere Konfiguratoren auf einer Seite, braucht jeder nur sein eigenes <div data-configento …>. Nutzt du denselben Konfigurator auf vielen Seiten, speichere den HTML-Block als synchronisierte Vorlage – dann änderst du ihn an einer Stelle.
Wer Skripte einfügen darf
WordPress erlaubt <script>-Tags nur Benutzern mit dem Recht für ungefilterten HTML-Code. Das sind auf einer normalen Website die Rollen Administrator und Redakteur. Speichert ein Autor oder Mitarbeiter die Seite, entfernt WordPress das Skript – der Konfigurator erscheint dann nicht. In einem WordPress-Netzwerk (Multisite) dürfen das nur Super-Admins.
Bearbeitet jemand ohne dieses Recht eine Seite mit Snippet, kann beim Speichern das Skript verloren gehen. Prüfe danach die Seite im Browser.
Preis, Zusammenfassung und Bild
Ohne weitere Attribute zeigt das Snippet keinen Preis und keine Zusammenfassung. Am einfachsten ist auf einer WordPress-Seite:
data-configento-embed-mode="admin-preview"Dann erscheinen Titel, Preisleiste und Zusammenfassung im Konfigurator selbst, wie in der Vorschau im Admin. Willst du Preis oder Bild an eine eigene Stelle setzen, etwa neben eine Überschrift, lege die Ziel-Elemente im selben HTML-Block an – siehe Preis, Zusammenfassung und Produktbild platzieren.
Die Gestaltung passt du mit CSS an dein Theme an: Design anpassen (CSS).
Mehrsprachige Websites
Hast du deine Website mit einem Übersetzungs-Plugin mehrsprachig aufgebaut, gibt es je Sprache eine eigene Seite. Setze dort im Snippet die passende Sprache, z. B. data-configento-locale="en_GB" auf der englischen Seite. Alternativ lässt du den Besucher die Sprache im Konfigurator wählen – siehe Sprachen.
Anfragen empfangen
Auf einer Website ohne Shop schließt der Aktions-Button die Konfiguration ab. Er schickt die Anfrage als E-Mail an dich und auf Wunsch eine Kopie mit PDF an den Besucher, erzeugt ein PDF-Angebot oder übergibt die Konfiguration an deine eigene URL. Gegen Spam schützt das Captcha.
Willst du die Anfrage in ein vorhandenes Formular übernehmen, liest du die Auswahl über die JavaScript-Schnittstelle aus.
Optimierungs-Plugins und Caching
Seiten-Caching ist kein Problem: Das Snippet ist statischer HTML-Code, der Konfigurator lädt seine Daten selbst.
Plugins, die JavaScript verzögern, zusammenfassen oder verschieben, können den Konfigurator aber ausbremsen oder ganz verhindern – er erscheint dann erst nach einer Mausbewegung oder gar nicht. Trage in solchen Plugins configento.js bzw. cloud.configento.app in die Ausnahmeliste für JavaScript ein.
WooCommerce
Für WooCommerce bringen wir im vierten Quartal 2026 ein eigenes Plugin heraus. Es zeigt den Konfigurator auf der Produktseite, prüft den Preis auf dem Server und legt die Konfiguration mit Aufpreis in den WooCommerce-Warenkorb – wie unsere Plugins für Magento, Shopware, Shopify und PrestaShop.
Bis dahin kannst du das Snippet auch in einem WooCommerce-Shop verwenden, etwa in der Produktbeschreibung. Es zeigt dort Konfigurator und Preis, legt aber nichts in den Warenkorb. Nutze es in dieser Zeit als Anfrage-Werkzeug mit dem Aktions-Button.
Das alte WooCommerce-Plugin aus der klassischen Cloud wird nicht mehr weiterentwickelt.
Fehlersuche
| Was du siehst | Ursache und Lösung |
|---|---|
| Gar nichts, kein Kasten | Das Skript wurde entfernt: Snippet nicht im Block Individuelles HTML eingefügt, oder die Seite wurde von einem Benutzer ohne das Recht für ungefilterten HTML-Code gespeichert. Siehe Wer Skripte einfügen darf. |
| Konfigurator erscheint erst nach Mausbewegung oder gar nicht | Ein Optimierungs-Plugin verzögert das Skript. Siehe Optimierungs-Plugins und Caching. |
„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 404)“ | YOUR_TEMPLATE_ID nicht ersetzt, falsche ID oder Komponente noch nicht veröffentlicht. |
| Konfigurator da, aber kein Preis | data-configento-embed-mode="admin-preview" oder data-configento-price-mount fehlt. |
Weitere Fälle stehen in der Fehlersuche des HTML-Snippets.