HTML-Snippet Integration

Dieser Artikel erklärt wie du den Konfigurator per HTML-Snippet in deine Website oder dein CMS einbindest — ohne Webshop-System.

Wann ist das HTML-Snippet die richtige Wahl?

Das HTML-Snippet eignet sich wenn du:

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

Schritt 1: HTML5-Integration aktivieren

Im V3-Backend unter Einstellungen → Integrationen findest du den Bereich HTML5. Aktiviere den Toggle falls noch nicht aktiv.

Schritt 2: Domain freischalten

Im V3-Backend unter Einstellungen → Domänen trägst du die Domain(s) ein auf denen der Konfigurator laufen soll. Ohne freigeschaltete Domain wird der Konfigurator nicht geladen.

Wichtig: Trage die Domain ohne Protokoll ein, z.B. www.meineshop.de oder meineshop.de.

Schritt 3: Komponenten-ID herausfinden

Die ID deiner Komponente siehst du in der Komponenten-Übersicht im V3-Backend — sie steht direkt unter dem Komponentennamen (z.B. „ID 10722"). Du brauchst diese ID für das Snippet.

Schritt 4: Snippet kopieren

Unter Einstellungen → Integrationen → HTML5 findest du zwei Snippet-Varianten:

JavaScript-Snippet (empfohlen)

<script type="text/javascript">
  var _configentoSettings = _configentoSettings || [];
  _configentoSettings["_cloudbase"] = "cloud.justsellingapp.com";
  _configentoSettings["_token"] = "DEIN-TOKEN";
  _configentoSettings["_taxrate"] = "19";
  _configentoSettings["_template"] = "YOUR_TEMPLATE_ID";
  _configentoSettings["_customer"] = "DEINE-KUNDEN-ID";
  _configentoSettings["_cssPathCombinedImage"] = ".configento-combinedImage";

  (function () {
    var cn = document.createElement("script");
    cn.type = "text/javascript"; cn.async = true;
    cn.src = "https://" + _configentoSettings["_cloudbase"] + "/configento/js/justselling/configento/plugin/html5.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(cn, s);
  })();
</script>

<div id="configento-form">
  <div id="configurator1"></div>
  <div id="configento-price"></div>
  <div id="configento-combinedImage" class="configento-combinedImage"></div>
</div>

iFrame-Snippet (Alternative)

<iframe width="100%" height="100%" style="border:none;"
  src="https://cloud.justsellingapp.com/configento/iframe.php?token=DEIN-TOKEN&taxrate=19&template=YOUR_TEMPLATE_ID&customer=DEINE-KUNDEN-ID">
</iframe>

Token und Kunden-ID sind im Snippet unter Einstellungen → Integrationen bereits vorausgefüllt. Ersetze nur YOUR_TEMPLATE_ID durch die ID deiner Komponente.

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

Schritt 6: Testen

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

Bei Problemen:

• Ist die Domain unter Einstellungen → Domänen eingetragen?
• Wurde YOUR_TEMPLATE_ID durch die richtige ID ersetzt?
• Wird JavaScript auf der Seite nicht blockiert?

Nächste Schritte

• Erste Komponente anlegen
• Magento-Plugin installieren
• Shopware-Plugin installieren