Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?

Sie können das Trustbadge® schon am ersten Tag Ihrer Mitgliedschaft bei Trusted Shops integrieren. Hierfür sind nur fünf Schritte notwendig:

1. Ihre Trusted Shops ID finden
2. Trustbadge-Code konfigurieren
3. Trustbadge-Code in Ihre Webseite integrieren
4. Datenübergabe für die Trustcard definieren
5. Trustbadge-Integration prüfen

Schritt 1: Ihre Trusted Shops ID finden

Für die Trustbadge-Integration benötigen Sie Ihre individuelle Trusted Shops ID. Sie finden Ihre Trusted Shops ID in My Trusted Shops.

1. In My Trusted Shops einloggen. Das Dashboard öffnet sich.
2. Innerhalb der rechten Spalte des Dashboards Ihre Trusted Shops ID („TS-ID“) finden.

Schritt 2: Trustbadge-Code konfigurieren

Die Grundlage für Ihre Trustbadge-Integration ist der folgende Integrationscode:

<script async 
data-desktop-y-offset="0" 
data-mobile-y-offset="0" 
data-desktop-disable-reviews="false" 
data-desktop-enable-custom="false" 
data-desktop-position="right" 
data-desktop-custom-width="156" 
data-desktop-enable-fadeout="false" 
data-disable-mobile="false" 
data-disable-trustbadge="false" 
data-mobile-custom-width="156" 
data-mobile-disable-reviews="false" 
data-mobile-enable-custom="false" 
data-mobile-position="left" 
data-mobile-enable-topbar="false" 
data-mobile-enable-fadeout="true"
data-color-scheme="light" 
charset="UTF-8" 
src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
</script>

1. Innerhalb des Integrationscodes die folgende Codezeile finden:

   src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 

2. Den fett markierten Bereich YOUR_TSID durch Ihre Trusted Shops ID ersetzen.

Damit haben Sie Ihren Trustbadge-Code erstellt. Sofern Sie keine weiteren Anpassungen vornehmen, wird das Trustbadge …

… Ihre gesammelten Bewertungen und – nach erfolgreicher Zertifizierung – Ihr Gütesiegel anzeigen.

… in der Desktop-Ansicht auf der rechten Seite und in der mobilen Ansicht auf der linken Seite angezeigt.

… in der Desktop-Ansicht 54 Pixel oberhalb des unteren Bildschirmrands und in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.

An dieser Stelle haben Sie zwei Möglichkeiten:

• Sind Sie mit diesen Einstellungen einverstanden? Dann fahren Sie direkt mit Schritt 3 fort.
• Möchten Sie das Trustbadge anders darstellen oder an einer anderen Stelle in Ihrem Shop integrieren? Dann setzen Sie die Konfiguration des Trustbadge-Codes mithilfe dieses Artikels fort: Wie passe ich das Trustbadge® an meine Anforderungen an? Kehren Sie anschließend zu diesem Artikel zurück und fahren Sie mit Schritt 3 fort.

Schritt 3: Trustbadge-Code in Ihre Webseite integrieren

Haben Sie den Trustbadge-Code nach Ihren Wünschen konfiguriert? Dann integrieren Sie ihn nun in Ihre Webseite.

1. Innerhalb Ihres Shopsoftwaresystems Ihre Footer-Datei öffnen.

2. Den gesamten vorbereiteten Trustbadge-Code in Ihren Zwischenspeicher kopieren.
3. Den Trustbadge-Code unmittelbar vor dem schließenden </body>-Tag in die Footer-Datei einfügen.

Das Trustbadge ist damit auf jeder Seite Ihres Shops verfügbar, auch auf der Bestellbestätigungsseite.

Schritt 4: Datenübergabe für die Trustcard definieren

Eine wichtige Funktionalität des Trustbadge ist die Trustcard. Die Trustcard öffnet sich nach dem Checkout in Ihrem Shop. Über die Trustcard kann Ihre Kundschaft ihre Einwilligung zum Empfang einer Bewertungseinladung geben und/oder ihre Bestellung mithilfe des Käuferschutzes absichern.

Damit sich die Trustcard zum richtigen Zeitpunkt öffnet, muss das Trustbadge die Bestellbestätigungsseite erkennen können. Integrieren Sie hierfür in das Template der Bestellbestätigungsseite das untenstehende DIV-Element.

Die Grundlage für das DIV-Element ist der folgende Code:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span> 
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> 
<span id="tsCheckoutOrderAmount">4005.95</span> 
<span id="tsCheckoutOrderCurrency">EUR</span> 
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> 
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> 
</div>

Über das DIV-Element sollen die Bestelldaten dynamisch ausgefüllt und übergeben werden. Kopieren Sie das obige Codebeispiel daher nicht unverändert in Ihre Bestellbestätigungsseite.

1. Die beispielhaften und fett markierten Werte der Parameter ersetzen. Hierbei entsprechende Variablen in der von Ihrem Shopsystem verwendeten Programmiersprache nutzen. Die folgende Tabelle erläutert Ihnen die einzelnen Parameter:

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

2. Die Template-Datei Ihrer Bestellbestätigungsseite öffnen.

3. Den gesamten vorbereiteten Trustbadge-Code des DIV-Elements in Ihren Zwischenspeicher kopieren.
4. Den Code in die Template-Datei Ihrer Bestellbestätigungsseite einfügen.

Damit öffnet sich nach dem Checkout die Trustcard auf der Bestellbestätigungsseite. Das Trustbadge ist damit mit all seinen Funktionalitäten in Ihren Shop integriert.

Schritt 5: Trustbadge-Integration prüfen

Testen Sie nun die Funktion Ihres Trustbadge, indem Sie eine Testbestellung in Ihrem Shop auslösen. Sofern das Trustbadge korrekt integriert wurde, erscheint am Ende des Checkout-Prozesses die Trustcard.

Dieser Artikel hilft Ihnen bei der Prüfung Ihrer Trustbadge-Integration: Wie prüfe ich meine Trustbadge-Integration?