Trustbadge Integration in einfachen Schritten

Das Trustbadge individuell anpassen

Das Trustbadge flexibel im Shop platzieren

Sie möchten das Trustbadge nicht rechts unten, sondern an anderer Stelle in Ihrem Shop anzeigen?
Kein Problem – passen Sie mit dieser Anleitung das Trustbadge Ihren Vorstellungen an.

Schritt 1: Tragen Sie unten Ihre Shop URL ein, um Ihren persönlichen Trustbadge® Code zu generieren.


 

Schritt 2: Suchen Sie im oben generierten Integrationscode die folgende Zeile

'variant': 'reviews', /* reviews, default, custom, custom_reviews */
und ändern Sie den Wert für den Parameter in 'custom_reviews' oder 'custom', je nachdem, ob Sie auch Ihre aktuelle Shop-Bewertung im Trustbadge® anzeigen möchten oder nur das Gütesiegel.

Hinweis: Die Variante ‚custom‘ steht Shops mit Trusted Shops Gütesiegel zur Verfügung. Sie ist  nur bei aktivem Trusted Shops Gütesiegel sichtbar. Führen Sie den Befehl trustbadge.showIntegrationPlaceholder(); in der Entwicklerkonsole Ihres Browsers aus, um eine Vorschau zu erhalten.

Schritt 3: fügen Sie folgenden HTML-Code dort ein, wo das Trustbadge® angezeigt werden soll – z.B. im Header oder im Footer der Seite:
<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Mit den CSS-Eigenschaften 'width' und 'height' in diesem HTML-Code legen Sie fest, wie groß das Trustbadge angezeigt werden soll. Beide Werte müssen angegeben werden.
Bitte beachten Sie dabei das ursprüngliche Seitenverhältnis (Breite:Höhe) des Trustbadge von 2:1 in der Variante 'custom_reviews' bzw. 1:1 für die Variante 'custom'.

Schritt 4: Suchen Sie im oben generierten Integrationscode die folgende Zeile

'customElementId': '', /* required for variants custom and custom_reviews */

und fügen Sie ‚ MyCustomTrustbadge‘ als Wert für den Parameter 'customElementId' ein:

'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */

Schritt 5: Wenn Sie festlegen möchten, in welche Richtung sich die Trustcard bei Klick auf das Trustbadge öffnet, nutzen Sie die Parameter innerhalb der Zeile trustcardDirection, indem Sie 'topLeft', 'topRight', 'bottomLeft' oder 'bottomRight' eingeben.

'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */

Schritt 6: Für das automatische Einsammeln von Kundenbewertungen und den Abschluss des Käuferschutzes benötigt das Trustbadge® eine kleine Hilfe. Diese erfolgt durch das Setzen eines <div>-Elementes zur Erkennung Ihrer Bestellbestätigungsseite (Danke-Seite). Das Trustbadge® öffnet dann dort für Ihre Besucher automatisch die Trustcard, welche die Anmeldung zum Käuferschutz und/oder die Einwilligung zur Bewertungserinnerung beinhaltet.

Sofern noch nicht erfolgt, fügen Sie jetzt noch diesen <div>-Container auf der Bestellbestätigungsseite ein:
Ersetzen Sie darin die beispielhaften Werte (fett) durch die jeweiligen Daten einer Bestellung, indem Sie die Werte der Parameter mittels der von Ihrem Shopsystem verwendeten Programmiersprache befüllen.

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2016-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">2016-05-24</span></div>


Auf der Bestellbestätigungsseite erscheint nun die Trustcard in einer Lightbox und bietet den Abschluss des Käuferschutzes an.

Tipp: Erscheint das Trustbadge dennoch in der rechten unteren Ecke, prüfen Sie bitte, ob Sie tatsächlich als Variante custom oder custom_reviews im generierten Integrationscode angegeben haben, im Parameter 'customElementId' auf die ID eines existierenden Elements der Shopseite verweisen und Höhe und Breite wie in Schritt 3 beschrieben definiert wurden.
In der Entwicklerkonsole Ihres Browsers erhalten Sie in diesen Fällen Meldungen mit weiteren Hinweisen.

Mobile Darstellung des Trustbadge anpassen

Bei kleineren Bildschirmbreiten, die beispielsweise Smartphones und Tablets zur Verfügung stellen, wird das Trustbadge standardmäßig in der Floating-Variante dargestellt.

 

Über den Parameter „responsive“ innerhalb Ihrer Trustbadge-Konfiguration können Sie die Positionierung und die Darstellung des Trustbadge anpassen.

 

Horizontale Positionierung der Floating-Variante anpassen

Die Floating-Variante des Trustbadge wird standardmäßig in der linken unteren Ecke der mobilen Ansicht angezeigt. Darüber hinaus haben Sie die Möglichkeit, das Trustbadge mittig oder in der rechten unteren Ecke zu positionieren.

Öffnen Sie hierfür zunächst Ihre bestehende Trustbadge-Konfiguration und überprüfen Sie, ob der Parameter „responsive“ bereits Bestandteil des Codes ist. In diesem Fall sollten Sie folgende Codezeile innerhalb Ihrer Trustbadge-Konfiguration finden:

'responsive': {'variant': 'floating'},

Sofern Sie die obige Codezeile innerhalb Ihrer Trustbadge-Konfiguration gefunden haben, ersetzen Sie diese bitte durch die nachfolgende Codezeile:

'responsive': {'variant':'floating', 'position':'right'},

Achtung! Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Sofern der Parameter „responsive“ noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein sollte, müssen Sie ihn zusätzlich in den Code einfügen. Legen Sie hierfür bitte unterhalb der Zeile

_tsConfig = {

eine neue Codezeile an und fügen Sie die nachfolgende Codezeile an dieser Stelle ein:

'responsive': {'variant':'floating', 'position':'right'},

Mit dem innerhalb dieser Codezeile für die Position angegebenen Wert 'right' wird das Trustbadge in der rechten unteren Ecke der mobilen Ansicht angezeigt. Sofern Sie das Trustbadge mittig im unteren Bereich positionieren wollen, ändern Sie bitte den Wert 'right' in 'center'. Wenn Sie den Wert in 'left' ändern, wird das Trustbadge wieder in der linken unteren Ecke angezeigt.

 

Vertikale Positionierung der Floating-Variante anpassen

Darüber hinaus haben Sie die Möglichkeit, die vertikale Positionierung des Trustbadge individuell anzupassen. Verfahren Sie hierfür zunächst wie bei der Anpassung der horizontalen Positionierung und überprüfen Sie, ob der Parameter „responsive“ bereits Bestandteil Ihrer Trustbadge-Konfiguration ist.

Anschließend ergänzen bzw. ersetzen Sie den Parameter bitte durch die folgende Codezeile:

'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},

Achtung! Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Über den Wert 'yOffset' können Sie nun bestimmen, um wie viele Pixel das Trustbadge nach oben verschoben werden soll. In der obigen Codezeile sind 150 Pixel voreingestellt. Diesen Wert müssen Sie nun an die individuellen Voraussetzungen Ihres Shops anpassen.

Achtung! In der obigen Codezeile ist die horizontale Positionierung über den Wert 'right' definiert. Dementsprechend wird das Trustbadge bei Verwendung dieser Codezeile in der rechten unteren Ecke angezeigt. Wenn Sie das Trustbadge lieber in der linken unteren Ecke oder mittig positionieren möchten, ändern Sie den Wert 'right' bitte in 'left' für links oder 'center' für mittig.

 

Bewertungssterne innerhalb der Floating-Variante anzeigen

Standardmäßig wird in der Floating-Variante nur das Gütesiegel angezeigt. Zusätzlich haben Sie die Möglichkeit, auch ein Trustbadge mit Bewertungssternen in der mobilen Ansicht darzustellen. Wenn Sie dies tun möchten, ersetzen Sie bitte im Parameter „responsive“ den Wert 'floating' durch 'floating_reviews'. Sollte der Parameter „responsive“ noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein, müssen Sie zunächst unterhalb der Zeile

_tsConfig = {

eine neue Codezeile anlegen und die nachfolgende Codezeile an dieser Stelle einfügen:

'responsive': {'variant': 'floating_reviews'},

Achtung! Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Sofern Sie zusätzlich die Positionierung des Trustbadge verändern möchten, beachten Sie bitte die obigen Abschnitte zur horizontalen und vertikalen Positionierung der Floating-Variante.

 Trustbadge als Topbar darstellen

Neben der Floating-Variante können Sie das Trustbadge auch als Topbar darstellen. Dabei handelt es sich um eine Leiste, die oberhalb Ihres Shopheaders angezeigt wird und sowohl das Gütesiegel als auch Bewertungsinformationen beinhaltet. Diese Darstellungsform wurde bis Anfang März 2020 standardmäßig ausgespielt.

Wenn Sie das Trustbadge in Ihrem Shop weiterhin als Topbar darstellen wollen, ersetzen Sie bitte im Parameter „responsive“ den Wert 'floating' durch 'topbar'. Sollte der Parameter „responsive" noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein, müssen Sie zunächst unterhalb der Zeile

_tsConfig = {

eine neue Codezeile anlegen und die nachfolgende Codezeile an dieser Stelle einfügen:

'responsive': {'variant': 'topbar'},      

Achtung! Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Da das Trustbadge in der Topbar-Variante stets über die gesamte Breite angezeigt wird, müssen Sie die Positionierung nicht eigens anpassen.

Beachten Sie bitte, dass wir den technischen Support für die Topbar-Variante in Zukunft einstellen werden. Ab diesem Zeitpunkt wird nur noch die Floating-Variante nutzbar sein.

Custom-Variante mobil anders als für Desktop platzieren

Ergänzen Sie Ihre Trustbadge Konfiguration um diese Zeile:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'}

Als Werte in dem Objekt sind für “variant” die Varianten “custom” und “custom_reviews” möglich.
Fügen Sie folgenden HTML-Code dort ein, wo das Trustbadge® angezeigt werden soll – z.B. im Header oder im Footer der Seite:

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Mit den CSS-Eigenschaften 'width' und 'height' in diesem HTML-Code legen Sie fest, wie groß das Trustbadge angezeigt werden soll. Beide Werte müssen angegeben werden.
Bitte beachten Sie dabei das ursprüngliche Seitenverhältnis(Breite:Höhe) des Trustbadge von 2:1 in der Variante 'custom_reviews' bzw. 1:1 für die Variante 'custom'.
 
 

Trustcard auf der Bestellbestätigungsseite an einer beliebigen Stelle anzeigen

Der Abschluss des Käuferschutzes oder die Anmeldung zur Abgabe einer Bewertung auf der Bestell-Danke-Seite kann ebenfalls frei platziert werden.

Schritt 1: Fügen Sie auf Ihrer Bestell-Danke-Seite an der Stelle einen leeren <div>-Container ein, an welcher die Trustcard angezeigt werden soll. Geben Sie diesem <div>-Container eine eigenständige ID-Bezeichnung, z.B.

<div id="customCheckoutDiv"></div>

Schritt 2: Im Trustbadge-Code fügen Sie dann im Bereich _tsConfig als zusätzlichen Parameter 'customCheckoutElementId': 'customCheckoutDiv' ein und ergänzen die von Ihnen im ersten Schritt gewählte ID-Bezeichnung als Wert für den Parameter 'customCheckoutElementId' (im Beispiel wäre das 'customCheckoutDiv').