1. eTrusted
  2. Integration
  3. Manuelle Integration

Konfigurieren einer Inline-Trustbadge-Variante

Ab sofort stehen dir neue Varianten des Trustbadge zur Verfügung: Mit den neuen Inline-Varianten kannst du noch flexibler entscheiden, wie das Trustbadge in deinem Shop erscheint. Die Varianten fügen sich nahtlos in bestehende Designs und User Experience ein und können frei auf der gesamten Shopseite platziert werden – vom Header bis zum Footer.

Du kannst die neuen Horizontal- und Card-Varianten individuell anpassen: Farben, Größen, Inhalte – alles steuerbar. Sie sind mobile-optimiert und bieten eine maximierte Ansicht, in der bis zu 20 Rezensionen sowie Käuferschutz-Informationen direkt im Shop angezeigt werden – ganz ohne Weiterleitung.

Variants_DE.png

So findest du deine Channel-ID

Jeder deiner bei Trusted Shops registrierten Verkaufskanäle besitzt eine eigene Channel-ID. Diese ID benötigst du, um die Inline-Varianten des Trustbadge konfigurieren und anpassen zu können.

  1. Ins eTrusted Kontrollzentrum einloggen.
  2. In der Hauptnavigation auf Home (Haus-Symbol) (01_16x16.png) klicken und den gewünschten Kanal auswählen (02_16x16.png).
    01_EN.png
  3. Die URL innerhalb der Adresszeile deines Browsers anschauen. Sie folgt diesem Muster: https://app.etrusted.com/home?channels={Channel-ID}
Beispiel:
02_EN.png
https://app.etrusted.com/home?channels=chl-f8c8c9c3-93ff-48dd-8219-XXXXX
Hier ist chl-f8c8c9c3-93ff-48dd-8219-XXXXX die Channel-ID. Die Channel-ID beginnt immer mit dem Präfix chl-.
  1. Die Channel-ID aus der URL kopieren und für die weitere Nutzung speichern.

Konfigurieren deiner gewünschten Inline-Trustbadge-Variante

Nach erfolgreicher Authentifizierung: Authentication

PUT https://trustbadge-config-api.trustedshops.com/config/

Verwende diesen Endpunkt, um deine Inline-Trustbadge-Variante für einen bestimmten Kanal zu konfigurieren. Indem du einen PUT-Request mit den gewünschten Trustbadge-Einstellungen (z. B. Type, Theme, Anzeigeoptionen) im Request-Payload sendest, legst du fest, wie das Trustbadge auf deiner Website dargestellt werden soll.

Die API antwortet mit einer eindeutigen Integration-ID. Diese ID muss in den bereitgestellten Code-Schnipsel eingefügt werden, den du anschließend in das HTML deiner Website einbaust, um das Trustbadge entsprechend deiner Konfiguration darzustellen.

Beispiel-Request-Payload in JSON

{
  "channelId": "YOUR_CHANNEL_ID",
  "config": {
    "version": "1.0",
    "widgets": [
      {
        "type": "inline-card",
        "displayRating": true,
        "showReviewCount": true,
        "showGradeDescription": false,
        "starDisplay": "five",
        "fillColor": "#FFD700",
        "dropShadow": false,
        "theme": "light",
        "width": "300px",
        "starColors": {
          "lightActiveFill": "#000000",
          "lightBackgroundFill": "#CCCCCC",
          "darkActiveFill": "#FFFF00",
          "darkBackgroundFill": "#EEEEEE"
        }
      }
    ]
  }
}

Body-Parameter

Name Typ Erforderlich Beschreibung
channelId string ja Eindeutige Channel-ID, für die die Trustbadge-Konfiguration übermittelt wird. Siehe Dokumentation, wie du deine Channel-ID erhältst.
config object ja Wrapper-Objekt, das die Konfigurationsdetails enthält.
version string ja Version des Konfigurationsschemas.
widgets array ja Liste der Trustbadge-Konfigurationen.
type string ja Trustbadge-Variante (inline-card oder inline-horizontal).
displayRating boolean ja Ob die Bewertungssterne angezeigt werden sollen.
showReviewCount boolean ja Ob die Anzahl der gesammelten Bewertungen angezeigt werden soll.
showGradeDescription boolean ja Ob eine schriftliche Note angezeigt werden soll (z.B. „Sehr gut“).
starDisplay string ja In welchem Format sollen die Bewertungssterne angezeigt werden: one (ein Stern) oder five (fünf Sterne)?
fillColor string nein Hex-Farbcode für die Farbe des Hintergrunds. Im Light-Modus ist der Standardwert, falls nicht definiert, Hellblau #F1F5FE.
dropShadow boolean ja Ob dem Trustbadge ein Schatten hinzugefügt werden soll.
theme string ja Visuelles Theme des Trustbadge (light, dark oder system).
width string nein Nur für den Type inline-card. Definiert die Breite des Trustbadge (z.B. "300px").
starColors object nein Objekt, das die Farben der Sterne für Light- und Dark-Modus definiert.
lightActiveFill string nein Hex-Farbcode für die Farbe der gefüllten Bewertungssterne im Light-Modus (z.B. "#FFD700").
lightBackgroundFill string nein Hex-Farbcode für die Farbe der nicht gefüllten Bewertungssterne im Light-Modus (z.B. "#E0E0E0").
darkActiveFill string nein Hex-Farbcode für die Farbe der gefüllten Bewertungssterne im Dark-Modus (z.B. "#FFA500").
darkBackgroundFill string nein Hex-Farbcode für die Farbe der nicht gefüllten Bewertungssterne im Dark-Modus (z.B. "#E0E0E0").

Headers

Header Typ Erforderlich Beschreibung
Authorization string ja Ein Authorization-Header mit Metainformationen, siehe OAuth2.

Beispiel-Response-Payload in JSON

{
  "success": true,
  "data": {
    "id": 24,
    "createdAt": "2025-08-28 13:17:19.772",
    "updatedAt": "2025-08-28 13:17:19.772",
    "shopId": 15547,
    "config": {
      "version": "1.0",
      "widgets": [
        {
          "type": "inline-horizontal",
          "theme": "light",
          "fillColor": "#FFD700",
          "dropShadow": false,
          "starDisplay": "five",
          "displayRating": true,
          "showReviewCount": false,
          "showGradeDescription": true
        }
      ]
    },
    "integrationId": "int-3efc5feb-1e13-4783-xxx-xxxxxx"
  }
}

Mithilfe der API-Response kannst du die Konfiguration, die du gerade gesendet hast, noch einmal überprüfen.

Außerdem findest du deine Integration-ID im Parameter "integrationId".

Beispiel:
In der obigen Sample-Response-Payload ist int-3efc5feb-1e13-4783-xxx-xxxxxx die Integration-ID. Die Integration-ID beginnt immer mit dem Präfix int-.

Kopiere die Integration-ID und speichere sie für die weitere Nutzung.

Einbinden des Trustbadge mit deiner Integration-ID

Sobald du deine Trustbadge-Konfiguration angepasst und deine Integration-ID aus der API-Response erhalten hast, kannst du das Trustbadge in deine Website einbinden.

Integrationscode für Type inline-card:

<minimized-trustbadge-inline-card></minimized-trustbadge-inline-card>

<script
  type="module"
  src="https://widgets.trustedshops.com/integration/integration.js"
  data-integration-id="YOUR_INTEGRATION_ID">
</script>

Integrationscode für Type inline-horizontal:

<minimized-trustbadge-inline-horizontal></minimized-trustbadge-inline-horizontal>

<script
  type="module"
  src="https://widgets.trustedshops.com/integration/integration.js"
  data-integration-id="YOUR_INTEGRATION_ID">
</script>
  1. Den passenden Code-Schnipsel entsprechend deinem Widget-Type auswählen.
  2. YOUR_INTEGRATION_ID im Attribut data-integration-id durch die Integration-ID ersetzen, die du von der API erhalten hast.
  3. Den vollständigen, angepassten Code-Schnipsel kopieren.
  4. Den <script>-Tag in den <head> oder ans Ende des <body> deines HTML-Dokuments einfügen.
  5. Das Trustbadge-Element (<minimized-trustbadge-inline-card> oder <minimized-trustbadge-inline-horizontal>) genau an der Stelle im HTML deiner Website platzieren, an der das Trustbadge angezeigt werden soll.

Das Trustbadge ist nun eingebunden und wird entsprechend deiner Konfiguration dargestellt.

Definieren der Datenübergabe für die Trustcard

Eine wichtige Funktionalität des Trustbadge ist die Trustcard. Die Trustcard öffnet sich auf deiner Website nach dem Checkout. Über die Trustcard können deine Kundinnen und Kunden ihre Einwilligung zum Erhalt einer Bewertungseinladung geben und/oder ihre Bestellung mit dem Käuferschutz absichern.

Damit sich die Trustcard zum richtigen Zeitpunkt öffnet, muss das Trustbadge die Bestellbestätigungsseite erkennen können. Dafür musst du ein DIV-Element in das Template der Bestellbestätigungsseite integrieren.

So integrierst du das DIV-Element: Datenübergabe für die Trustcard definieren

Aktualisieren einer bestehenden Inline-Trustbadge-Konfiguration

Um ein bereits eingebettetes Trustbadge zu aktualisieren, sende einen weiteren PUT-Request an die API – diesmal mit der Integration ID in der Endpoint-URL:

PUT https://trustbadge-config-api.trustedshops.com/config/{Integration-ID}

Request

  • Verwende dieselbe Request-Struktur wie bei der Erstellung der initialen Konfiguration.
  • Passe nur die Parameter an, die du ändern möchtest (z. B. theme, fillColor, width).
  • Wichtig: Der Update-Request überschreibt die bisherigen Einstellungen. Wenn du ein Setup mit zwei Widgets hast, solltest du beide Widget-Typen im Request angeben.

Response

Die API antwortet mit dem aktualisierten Konfigurationsobjekt und derselben Integration-ID.

Wichtig

  • Die Integration-ID ändert sich bei einem Update nicht.
  • Das Trustbadge auf deiner Website rendert automatisch mit der neuen Konfiguration, es kann jedoch bis zu einer Minute dauern, bis die Änderungen sichtbar werden.
  • Du musst den Integrationscode auf deiner Website nicht ändern.

Hinzufügen eines zweiten Widget-Types zu deinem Kanal

Um einen zweiten Widget-Typ zu demselben Kanal hinzuzufügen, sende einen weiteren PUT-Request an die API – diesmal mit der Integrations-ID in der Endpoint-URL. Im Body musst du die Beschreibung des ersten Widgets angeben und zusätzlich die Beschreibung des zweiten Widgets hinzufügen.

PUT https://trustbadge-config-api.trustedshops.com/config/{Integration-ID}

{
  "channelId": "YOUR_CHANNEL_ID",
  "config": {
    "version": "1.0",
    "widgets": [
      {
        "type": "inline-card",
        "displayRating": true,
        "showReviewCount": true,
        "showGradeDescription": false,
        "starDisplay": "five",
        "fillColor": "#FFD700",
        "dropShadow": false,
        "theme": "light",
        "width": "300px",
        "starColors": {
          "lightActiveFill": "#000000",
          "lightBackgroundFill": "#CCCCCC",
          "darkActiveFill": "#FFFF00",
          "darkBackgroundFill": "#EEEEEE"
        }
      },
      {
        "type": "inline-horizontal",
        "displayRating": true,
        "showReviewCount": true,
        "showGradeDescription": false,
        "starDisplay": "five",
        "fillColor": "#FFD700",
        "dropShadow": false,
        "theme": "light",
        "starColors": {
          "lightActiveFill": "#000000",
          "lightBackgroundFill": "#CCCCCC",
          "darkActiveFill": "#FFFF00",
          "darkBackgroundFill": "#EEEEEE"
        }
      }
    ]
  }
}

Request

  • Füge die Parameter für das zweite Widget eines anderen Typs hinzu.
  • Der Update-Request überschreibt die bisherigen Einstellungen. Wenn du ein Setup mit zwei Widgets hast, solltest du beide Widget-Typen im Request angeben.

Response

Die API antwortet mit dem aktualisierten Konfigurationsobjekt und derselben Integration-ID.

Wichtig

  • Die Integration-ID ändert sich beim Hinzufügen eines zweiten Widget-Typs nicht.
  • Füge das zusätzliche Trustbadge-Element (<minimized-trustbadge-inline-card> oder <minimized-trustbadge-inline-horizontal>) an der gewünschten Stelle ein.
  • Du darfst den <script>-Tag nicht duplizieren oder verändern – er darf nur einmal existieren.
  • Du kannst pro Type und Kanal/Integration-ID nur eine Trustbadge-Konfiguration erstellen. Das bedeutet: eine inline-card- und eine inline-horizontal-Konfiguration pro Kanal. Jedes Trustbadge-Widget kann jedoch mehrfach an unterschiedlichen Stellen deiner Website eingebettet werden.

0 von 0 fanden dies hilfreich

Verwandte Beiträge