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

Ein Hinweis vorab: Wir bieten für viele Shopsoftwaresysteme Plugins sowie spezifische Integrationshinweise an. Eine Übersicht über diese Systeme finden Sie hier: Integrieren Sie Trusted Shops in Ihren Shop Ist für Ihre Shopsoftware bislang keine eigene Anleitung vorhanden? Dann nutzen Sie bitte das folgende Tutorial und informieren Sie uns zudem per Mail, damit wir in Zukunft auch für Ihre Shopsoftware eine individuelle Anleitung bereitstellen können.

Selbstverständlich können Sie das Trustbadge® schon am ersten Tag Ihrer Mitgliedschaft bei Trusted Shops integrieren. Alles, was Sie dafür brauchen, sind Ihre Shop-URL oder Ihre Trusted-Shops-ID, ein wenig Erfahrung im Umgang mit Code und die folgende allgemeine Integrationsanleitung. 

Schritt 1: Generieren Sie Ihren persönlichen Trustbadge-Code

Um mit der Integration beginnen zu können, benötigen Sie zunächst einen individuellen Trustbadge-Code. Durch diesen wird gewährleistet, dass das Trustbadge nach der Einbindung auch die zu Ihrem Shop gehörenden Informationen wie Gütesiegel und Bewertungssterne darstellt. Ihren individuellen Trustbadge-Code müssen Sie zunächst auf dieser Website generieren. Tragen Sie Ihre Trusted-Shops-ID in das dafür vorgesehene Eingabefeld ein. Anschließend wird der Code generiert.

Ihre Trusted-Shops-ID (beginnend mit X...) finden Sie in Ihrem Dashboard im Backend My Trusted Shops. Loggen Sie sich hierfür zunächst hier in My Trusted Shops ein. Nach dem Login werden Sie direkt ins Dashboard geleitet. In der rechten Spalte des Dashboards sind Ihre bei Trusted Shops angemeldeten Shops mit der jeweiligen Trusted-Shops-ID aufgelistet.

Schritt 2: Konfigurieren Sie den Trustbadge-Code entsprechend Ihrer individuellen Bedürfnisse

Innerhalb des generierten Trustbadge-Codes können Sie nun einige Einstellungen vornehmen, um die Darstellung des Trustbadge an die individuellen Gegebenheiten Ihres Shops anzupassen. Relevant sind hierfür diejenigen Parameter, die sich im Codeabschnitt _tsConfig befinden. Im Folgenden werden wir Ihnen die einzelnen Parameter sowie die in diesen Parametern möglichen Anpassungen vorstellen.

'yOffset': '0', /* offset from page bottom */

Standardmäßig wird das Trustbadge in der rechten unteren Ecke Ihres Shops angezeigt. Über den Parameter ˈyOffsetˈ können Sie das Trustbadge auf der vertikalen Achse verschieben. Geben Sie hierfür einfach anstelle der 0 die gewünschte Pixelanzahl an, um die das Trustbadge nach oben verschoben werden soll.

Standardmäßig wird das Trustbadge 54 px vom unteren Rand entfernt angezeigt. Falls Sie also das Trustbadge etwas tiefer anzeigen möchten, können Sie einen entsprechenden Minuswert eintragen. Dieser sollte jedoch nicht niedriger als -54 sein.

'variant': 'reviews', /* default, reviews, custom, custom_reviews */

Das Trustbadge existiert in vier Varianten. Über den Parameter ˈvariantˈ bestimmen Sie, welche der Varianten in Ihrem Shop ausgespielt werden soll. Standardmäßig ist die Variante reviews ausgewählt. Wenn Sie eine andere Variante bevorzugen, ersetzen Sie bitte in der Codezeile den Wert reviews durch default, custom_reviews oder custom. Die vier Varianten sehen wie folgt aus:

  • reviews: In dieser Variante werden Ihre Bewertungssterne und Ihr Gütesiegel angezeigt.

trustbadge_trustmark_reviews_DE.png

  • default: Diese Variante zeigt ausschließlich das Gütesiegel an, sofern Ihr Shop zertifiziert worden ist.

trustbadge_no_reviews_DE.png

  • custom_reviews: In dieser Variante zeigt das Trustbadge wie in der Variante reviews Ihre Bewertungssterne und Ihr Gütesiegel an. Die Variante custom_reviews lässt sich jedoch flexibel in Ihrem Shop positionieren.

customreviews.png

  • custom: In dieser Variante zeigt das Trustbadge wie in der Variante default lediglich Ihr Gütesiegel an. Die Variante custom lässt sich jedoch flexibel in Ihrem Shop positionieren.

custom.png

Wenn Sie eine der beiden Varianten custom und custom_reviews in Ihrem Shop einsetzen möchten, sind noch weitere Anpassungen am Trustbadge-Code und in Ihrem verwendeten Template nötig. Die notwendigen Schritte erläutern wir Ihnen hier genauer: Welche Darstellungsvarianten des Trustbadge® existieren und wie binde ich diese in meinen Shop ein? Das aktuell geöffnete Tutorial konzentriert sich hingegen auf die Varianten reviews und default.
Über den Parameter ˈvariantˈ bestimmen Sie, welche Elemente das Trustbadge maximal darstellen soll. Um das Gütesiegel anzeigen zu können, muss Ihr Shop selbstverständlich die Zertifizierung erfolgreich absolviert haben. Zudem können Bewertungssterne natürlich erst dann dargestellt werden, wenn Sie bereits Shopbewertungen mit Trusted Shops gesammelt haben. In diesem Artikel erläutern wir Ihnen die unterschiedlichen Darstellungsweisen im Detail: Was ist das Trustbadge®?
'disableResponsive': 'false', /* deactivate responsive behaviour */

Standardmäßig passt sich das Trustbadge automatisch an die von Ihrer Kundschaft verwendete Bildschirmgröße an. So wechselt das Trustbadge bei einer Bildschirmbreite von 648 px und kleiner zu einer auf mobile Endgeräte optimierten Darstellungsvariante. Wenn Sie im Parameter 'disableResponsive' den Wert von false auf true umstellen, wird diese automatische Anpassung unterbunden. Stattdessen wird auch auf mobilen Endgeräten die Desktop-Version des Trustbadge angezeigt.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Über diesen Parameter können Sie steuern, ob das Trustbadge überhaupt in Ihrem Shop dargestellt werden soll. Wenn Sie den Wert des Parameters von false auf true stellen, wird das Trustbadge ausgeblendet. Dennoch poppt auf Ihrer Bestellbestätigungsseite die Trustcard auf, über die Ihre Kundinnen und Kunden ihre Zustimmung zu einer Bewertungseinladung geben können und den Käuferschutz angeboten bekommen.

Schritt 3: Kopieren Sie Ihren Trustbadge-Code in den Footer Ihres Shoptemplates

Öffnen Sie auf Ihrem FTP-Server die Template-Datei des von Ihnen verwendeten Footers (footer.php oder ähnlich). Kopieren Sie anschließend den gesamten Code, den Sie soeben im obigen Feld generiert und anschließend möglicherweise konfiguriert haben. Fügen Sie den Code nun in das Footer-Template unmittelbar vor dem schließenden </body>-Tag ein.

Das Trustbadge ist damit auf jeder Seite Ihres Shops verfügbar, auch auf der Bestellbestätigungsseite. Sie sind fast fertig, aber etwas Wichtiges fehlt noch. 

Schritt 4: Definieren Sie die Datenübergabe für die Trustcard

Um Ihren Kundinnen und Kunden über das Trustbadge Bewertungsanfragen zu schicken und im Falle der Zertifizierung den Käuferschutz anbieten zu können, benötigt das Trustbadge eine kleine Hilfe. Diese erfolgt durch das Setzen eines DIV-Elements zur Erkennung Ihrer Bestellbestätigungsseite („Danke-Seite“) und Übermittlung der notwendigen Bestelldaten. Das Trustbadge öffnet dann dort für Ihre Besucherinnen und Besucher automatisch die Trustcard, welche die Absicherung der Bestellung und/oder die Einwilligung zur Bewertungserinnerung beinhaltet.

website_integration_custom_de-DE.png

Damit Ihre Kundschaft es möglichst einfach hat und ihre Bestelldaten nicht unnötigerweise nochmal eintippen muss, müssen die zum Käuferschutz und zur Bewertungsaufforderung notwendigen Daten aus Ihrem Shop-Template direkt an das Trustbadge übergeben werden. Fügen Sie hierfür den unten stehenden Code in das Template der Bestellbestätigungsseite (finish.tpl, thankyou.php, success.phtml oder ähnlich) ein und ersetzen Sie die beispielhaften Werte durch die in Ihrem Shopsystem verwendeten Variablen, damit sich das DIV-Element dynamisch mit den richtigen Bestelldaten befüllt.

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

Im Folgenden erläutern wir Ihnen in aller Kürze die im Codebeispiel dargestellten Übergabeparameter, sodass Sie sich um die Bereitstellung der erforderlichen Daten kümmern können.

<span id="tsCheckoutOrderNr">2020-05-21-001</span>

Erforderlich. Über diesen Parameter wird die Bestellnummer übergeben. Dies ist erforderlich, um einer abgegebenen Bewertung einen tatsächlichen Bestellvorgang zuordnen zu können. Sofern keine Bestellnummer zur Verfügung steht, kann auch ein Zeitstempel der jeweiligen Bestellung übergeben werden, sofern diese Referenz eindeutig ist.

<span id="tsCheckoutBuyerEmail">kunde@mail.de</span>

Erforderlich. Dieser Parameter übergibt die E-Mail-Adresse Ihrer Kundin bzw. Ihres Kunden. Dies ist nötig, um Ihrer Kundschaft einige Tage nach der Bestellung eine Bewertungseinladung oder eine Bestätigungsmail über den abgeschlossenen Käuferschutz zusenden zu können.

<span id="tsCheckoutOrderAmount">4005.95</span>

Optional, aber erforderlich, falls Sie das Gütesiegel haben. Über diesen Parameter wird der Gesamtbetrag der Bestellung übergeben. Wie am Beispiel 4005.95 zu erkennen ist, ist das Dezimaltrennzeichen ein Punkt. Zudem werden zwei Nachkommastellen übergeben.

<span id="tsCheckoutOrderCurrency">EUR</span>

Optional, aber erforderlich, falls Sie das Gütesiegel haben. Dieser Parameter übergibt das Währungskürzel der Bestellung gemäß ISO-Standard 4217. Sofern Sie nur eine Währung anbieten, können Sie diesen Wert auch hartcodiert eintragen.

<span id="tsCheckoutOrderPaymentType">VORKASSE</span>

Optional, aber erforderlich, falls Sie das Gütesiegel haben. Über diesen Parameter wird die verwendete Zahlungsart übergeben. Ein einfacher Text-String reicht hier aus. Sollte bei Bestellabschluss die Zahlungsart nicht (mehr) zur Verfügung stehen, können Sie das Wort OTHER als Wert für diesen Parameter hartkodiert eintragen.

<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

Optional, aber erforderlich, wenn Bewertungsanfragen in Abhängigkeit vom voraussichtlichen Lieferdatum verschickt werden sollen. Hierbei handelt es sich um einen Parameter, über den das voraussichtliche Lieferdatum übergeben wird. Wie Sie am Beispiel 2020-05-24 erkennen können, wird das Datumsformat YYYY-MM-DD unterstützt.

Da über das DIV-Element dynamische Bestelldaten übergeben werden sollen, dürfen Sie das obige Codebeispiel nicht unverändert in Ihre Bestellbestätigungsseite kopieren. Wie oben bereits erläutert, müssen Sie stattdessen die beispielhaften Werte jedes Übergabeparameters durch entsprechende Variablen in der von Ihrem Shopsystem verwendeten Programmiersprache ersetzen. 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. Sobald Sie das obige Codebeispiel angepasst haben, können Sie es – wie oben beschrieben – kopieren und in das Template Ihrer Bestellbestätigungsseite einfügen.

Schritt 5: Testen Sie das Trustbadge in Ihrem Shop

Sie können die Funktion Ihres Trustbadge nun testen, indem Sie probehalber eine Bestellung in Ihrem Shop auslösen. Achten Sie darauf, dass ganz am Ende der Bestellung die oben dargestellte Trustcard erscheint, in der Ihre Kundinnen und Kunden sich mit einem Klick auf den Button zu einer Bewertungseinladung anmelden können. Funktioniert dies reibungslos, haben Sie das Trustbadge erfolgreich eingebunden. Von jetzt an haben Ihre Kundinnen und Kunden direkt nach Abschluss des Einkaufs die Möglichkeit, sich an die Abgabe einer Bewertung erinnern zu lassen. Sobald Ihr Shop zertifiziert ist, wird Ihrer Kundschaft zudem der Käuferschutz angeboten. Überprüfen Sie zusätzlich in der Browser-Konsole, ob der DIV-Container „trustedShopsCheckout“ nun vollständig und korrekt befüllt wird.

jjjjj.gif

Sie benötigen neben dieser Anleitung weitere Unterstützung bei der Integration des Trustbadge? Dann melden Sie sich gerne bei members@trustedshops.com oder unter +49 221 77536 58.

Neben der in diesem Tutorial beschriebenen Standardintegration des Trustbadge in den Darstellungsvarianten reviews und default existieren noch weitere Varianten. Diese stellen wir Ihnen in diesem Artikel im Detail vor: Welche Darstellungsvarianten des Trustbadge® existieren und wie binde ich diese in meinen Shop ein?

War der Artikel hilfreich?

4 von 4 fanden dies hilfreich