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.

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').