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

Für viele Shopsoftwaresysteme existieren Plugins. Diese Plugins unterstützen Sie bei der Integration der von Ihnen gebuchten Produkte in Ihre Webseite. Dadurch ist die Integration sehr einfach und komfortabel.
Prüfen Sie in dieser Übersicht, ob für Ihr Shopsystem ein Plugin verfügbar ist: Integrieren Sie Trusted Shops in Ihren Shop
 
  • Ist ein Plugin verfügbar? Dann folgen Sie bitte den Integrationshinweisen, die Sie mithilfe der oben verlinkten Übersicht gefunden haben.
  • Ist kein Plugin verfügbar? Dann kehren Sie zu dieser Anleitung zurück und führen Sie die im Folgenden beschriebenen Schritte durch.

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.

01_DE.png

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"
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.

02_DE.pngDamit 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.
Die Footer-Datei wird vermutlich footer.php oder ähnlich heißen.
  1. Den gesamten vorbereiteten Trustbadge-Code in Ihren Zwischenspeicher kopieren.
  2. 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.

Language_DE_1.png

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.

Über dieses DIV-Element werden zugleich die für den Käuferschutz und den Versand einer Bewertungseinladung notwendigen Daten aus Ihrem Shop an das Trustbadge übergeben.

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:
Parameter Funktion Bemerkungen
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Übergabe der Bestellnummer  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Übergabe der E-Mail-Adresse Ihrer Kundschaft  
<span id="tsCheckoutOrderAmount">4005.95</span> Übergabe des Bestellwerts Wie am Beispiel 4005.95 zu erkennen ist, ist das Dezimaltrennzeichen ein Punkt. Zudem werden zwei Nachkommastellen übergeben.
<span id="tsCheckoutOrderCurrency">EUR</span> Übergabe des Währungskürzels der Bestellung Für die Währungskürzel wird der ISO-Standard 4217 unterstützt. Sofern Sie nur eine Währung anbieten, können Sie diesen Wert hartcodiert eintragen.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Übergabe der verwendeten Zahlungsart  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Übergabe des voraussichtlichen Lieferdatums Erforderlich, wenn Sie Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschicken möchten. Das Datumsformat YYYY-MM-DD wird unterstützt.
In der Programmiersprache PHP könnte die Übergabe der Email-Adresse beispielsweise so aussehen:
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email entspricht dabei der E-Mail-Adresse der Kundin bzw. des Kunden in Ihrem Shopsystem. Die genaue Definition der zu verwendenden Variablen entnehmen Sie bitte der Dokumentation Ihres Shopsystems, da diese von System zu System unterschiedlich sind. Daher können wir an dieser Stelle leider keine allgemeingültigen Angaben machen.
  1. Die Template-Datei Ihrer Bestellbestätigungsseite öffnen.
Die Template-Datei wird vermutlich finish.tpl, thankyou.php, success.phtml oder ähnlich heißen.
  1. Den gesamten vorbereiteten Trustbadge-Code des DIV-Elements in Ihren Zwischenspeicher kopieren.
  2. 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?

Wenden Sie sich bei Fragen oder Problemen mit Ihrer Integration gerne unter members@trustedshops.com an unser Customer-Success-Team.
Haben Sie für Ihre Webseite eine Content Security Policy etabliert? Dann überprüfen Sie, ob Sie Ihre Policy nach der Trustbadge-Integration anpassen müssen.

War der Artikel hilfreich?

14 von 24 fanden dies hilfreich