Widgets ansehen und einbinden

Zwei Widgets, ein Loader. Ein <script>-Tag in Ihrem Shop-Template, ein <div>-Container an der Stelle, wo das Widget stehen soll. Kein Cookie, kein Consent-Banner, kein CSS-Bruch — der Loader rendert in einen Shadow DOM und kann Ihre Seite nicht umformatieren.

Kein iframe: kein X-Frame-Options-Problem und keine 100 kB Iframe-Overhead.
Lazy geladen: erst wenn der Widget-Container in den Viewport rutscht, wird die API aufgerufen.
Fallback ohne fetch(): JSONP-Endpoint mit callback= für sehr alte Browser.
Fallback ohne IntersectionObserver: sofort rendern.
Automatik light / dark über prefers-color-scheme, überschreibbar per data-theme.

1 · Shopbewertungs-Widget

Zeigt Ihre aktuelle Note bei testmonster mit Anzahl, Zeitraum und dem Pflichthinweis nach §5b UWG. Ideal für den Footer, die Kassenseite oder den Sidebar-Bereich.

Voll — mit Zitaten

Vorschau

<div data-tm-widget="shop"
     data-domain="IHRE-DOMAIN.de"
     data-variant="voll"
     data-limit="3"></div>
<script async src="http://testmonster.de/widget/v1.js"></script>

Kompakt — Sterne + Zahl

Vorschau

<div data-tm-widget="shop"
     data-domain="IHRE-DOMAIN.de"
     data-variant="kompakt"></div>
<script async src="http://testmonster.de/widget/v1.js"></script>

Dark-Mode manuell erzwingen

Vorschau

<div data-tm-widget="shop"
     data-domain="IHRE-DOMAIN.de"
     data-theme="dark"
     data-limit="2"></div>
<script async src="http://testmonster.de/widget/v1.js"></script>

2 · Produktbewertungs-Widget (EAN-basiert)

Zeigt die Bewertungen zu einem Artikel — verknüpft über die EAN, nicht über Ihre Shop-ID. Bewertungen, die in einem anderen Shop zum gleichen Artikel entstanden sind, erscheinen auch in Ihrem Widget — sofern beide dieselbe EAN führen (Cross-Shop-Aggregation).

Voll — für die Produktdetailseite

Vorschau

<div data-tm-widget="produkt"
     data-ean="4001234567890"
     data-variant="voll"
     data-limit="3"></div>
<script async src="http://testmonster.de/widget/v1.js"></script>

Kompakt — für Produktkacheln in Listen

Vorschau

<div data-tm-widget="produkt"
     data-ean="4001234567890"
     data-variant="kompakt"></div>
<script async src="http://testmonster.de/widget/v1.js"></script>

Tipp für Shopsysteme mit Produktvorlagen: setzen Sie das data-ean-Attribut dynamisch aus dem Produkt-Objekt Ihres Shopsystems (Shopware: {{ product.ean }}, Shopify: {{ product.barcode }}, JTL: {{ artikel.cBarcode }}). Der <script>-Tag im Footer reicht einmal für die ganze Seite.

3 · Alle Attribute

Attribut	Werte
`data-tm-widget`	`shop` oder `produkt` · Pflicht
`data-domain`	Domain Ihres Shops (nur bei `shop`). Ohne `www.`. Beispiel: `beispielshop.de` — Subdomains sind eigene Shops.
`data-ean`	Die EAN/GTIN des Artikels (nur bei `produkt`). 8, 12, 13 oder 14 Stellen, Bindestriche werden entfernt.
`data-variant`	`voll` (Voreinstellung, mit Zitaten) oder `kompakt` (nur Sterne + Zahl, verlinkt auf die Detailseite).
`data-theme`	`auto` (Voreinstellung, folgt `prefers-color-scheme`), `light` oder `dark`. Skript-weit setzbar: steht das Attribut am `<script>`-Tag selbst, gilt es als Vorgabe für alle Widgets der Seite (einzelne Container überschreiben es).
`data-limit`	Anzahl Zitate im Vollmodus, `0..8`. Voreinstellung `3`. Bei `kompakt` ohne Wirkung.
`data-accent`	Akzentfarbe für Sterne und Links (CSS-Farbe). Voreinstellung `#4f46e5`. Nur mit CI-Freigabe ab Tarif Wirken.

4 · Alles auf Dark-Mode schalten (skript-weit)

Wenn Sie Ihre Widgets pauschal auf Dark oder Light stellen möchten — ohne jeden Container einzeln zu ergänzen — geht das direkt am <script>-Tag. Dieselben Attribute (data-theme, data-variant, data-limit, data-accent, data-autoplay) wirken dort als Vorgabe für alle Widgets auf der Seite. Container-Attribute schlagen die Vorgabe.

<script async src="http://testmonster.de/widget/v1.js"
        data-theme="dark"
        data-autoplay="1"></script>

5 · Datenschutz & Consent

Das Widget setzt keine Cookies, kein localStorage und keinen sessionStorage. Es ruft eine JSON-URL bei testmonster.de auf und rendert das Ergebnis lokal. Für den Aufruf wird die IP-Adresse Ihrer Besucher an testmonster übermittelt — dieser Aufruf ist in Ihrer Datenschutzerklärung zu benennen (Auftragsverarbeitung). Textbaustein liefern wir mit dem Vertrag.

Wenn Sie einen Consent-Manager einsetzen und das Widget erst nach Zustimmung laden wollen, hängen Sie den Script-Tag an Ihre Kategorie Marketing — der Loader läuft völlig unabhängig davon. Alternativ:

<!-- nach Consent -->
<script>
  var s = document.createElement('script');
  s.async = true; s.src = 'http://testmonster.de/widget/v1.js';
  document.head.appendChild(s);
</script>

6 · Was passiert, wenn testmonster.de nicht erreichbar ist

Der Container bleibt leer und wird per display:none versteckt. Kein Fehlerhinweis in Ihrem Shop, kein hässlicher Platzhalter. Sobald wir wieder erreichbar sind, erscheint das Widget mit dem nächsten Seitenaufruf.

Preise ansehen · Methodik