Welche Darstellungsvarianten des Trustbadge® existieren und wie binde ich diese in meinen Shop ein?

Ein Hinweis vorab: Im folgenden Tutorial erklären wir Ihnen sämtliche Darstellungsvarianten des Trustbadge mit allen verfügbaren Parametern sowie die zur Integration und Konfiguration notwendigen Schritte. Die Anleitung basiert auf diesem Tutorial, in dem wir Ihnen unsere Standardintegration erläutern: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren? Führen Sie daher erst die Standardintegration durch, ehe Sie sich mit dem vorliegenden Tutorial beschäftigen.

Die Trustbadge-Varianten

Die Varianten reviews und default

trustbadge_trustmark_reviews_DE.pngtrustbadge_reviews_DE.png

Variante reviews (mit und ohne Gütesiegel)

trustbadge_no_reviews_DE.png

Variante default

Während die Variante reviews sowohl Ihre Bewertungssterne als auch Ihr Gütesiegel darstellt, können Sie sich mit der Variante default auf die Präsentation Ihres Gütesiegels beschränken.

Wie Sie eine dieser beiden Varianten in Ihren Shop einbinden können, erläutern wir Ihnen in diesem Tutorial im Detail: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?

Über die folgenden Parameter des Trustbadge-Codes haben Sie die Möglichkeit, die Varianten reviews und default entsprechend Ihrer individuellen Bedürfnisse zu konfigurieren:

'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. Selbstverständlich ist es auch möglich, das Trustbadge nach unten zu verschieben. Tragen Sie hierfür einfach einen entsprechenden Minuswert ein.

Standardmäßig wird das Trustbadge 54 px vom unteren Rand entfernt angezeigt. Sie sollten für den Parameter ˈyOffsetˈ daher keinen niedrigeren Wert als -54 eintragen.

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

'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äte 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.

Die Varianten custom und custom_reviews

helpcenter_BILD.png

Die Variante custom

TB5-custom-trustmark-only_DE.pngreviews-only_DE.png

Die Variante custom_reviews (mit und ohne Gütesiegel)

Im Gegensatz zu den fest am rechten Rand Ihres Shops fixierten Varianten reviews und default sind die Varianten custom und custom_reviews flexibel in Ihrem Shop positionierbar. Wenn Sie eine dieser beiden Varianten in Ihren Shop integrieren möchten, führen Sie bitte die Schritte der folgenden Integrationsanleitung aus.

Die folgende Integrationsanleitung baut auf diesem Tutorial auf: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren? Falls Sie dieses noch nicht durchlaufen haben, sollten Sie dies zunächst nachholen, bevor Sie an dieser Stelle weitermachen.

Schritt 1: Erstellen Sie ein DIV-Element

Um eine der beiden Trustbadge-Varianten custom und custom_reviews nutzen zu können, müssen Sie zunächst ein DIV-Element erstellen. Kopieren Sie hierfür den folgenden HTML-Code an der Stelle in Ihr Shopsystem, an der das Trustbadge erscheinen soll. Mögliche Positionen wären beispielsweise im Header oder Footer.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Innerhalb dieses HTML-Codes haben Sie zwei Möglichkeiten der Anpassung.

  1. Sie können eine neue ID für das DIV-Element vergeben. Ersetzen Sie hierfür einfach den Wert MyCustomTrustbadge durch einen Namen Ihrer Wahl. Sofern Sie an dieser Stelle eine ID-Änderung vornehmen, merken Sie sich die von Ihnen definierte ID bitte gut. Sie werden Sie in Schritt 3 noch einmal benötigen.
  2. Über die Eigenschaften width und height können Sie die Höhe und Breite des Trustbadge anpassen. Ersetzen Sie hierfür einfach die Zahlenwerte hinter width (Breite) und height (Höhe) entsprechend Ihrer Bedürfnisse. Beachten Sie hierbei bitte 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 2: Wählen Sie Ihre favorisierte Trustbadge-Variante aus

Gehen Sie nun ins Plugin oder in die Template-Datei, in der Sie Ihren Trustbadge-Code hinterlegt haben.

Sofern Sie den Trustbadge-Code noch nicht generiert und in Ihren Shop eingebunden haben, folgen Sie bitte zunächst den Schritten dieser Anleitung: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?

Bestimmen Sie innerhalb des Trustbadge-Codes über den Parameter 'variant', welche Trustbadge-Variante Sie in Ihrem Shop verwenden wollen. Tragen Sie hierfür entweder custom oder custom_reviews als Wert für den Parameter ein. Nach Ihrer Anpassung sollte die Codezeile somit entweder so:

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

oder wie folgt aussehen:

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

Schritt 3: Verknüpfen Sie Trustbadge-Code und DIV-Element

Fügen Sie anschließend – falls nicht bereits vorhanden – die folgende Codezeile in den Trustbadge-Code ein:

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

Der Parameter 'customElementId' ist die Referenzmarke für das in Schritt 1 erstellte DIV-Element und verknüpft dieses mit Ihrem Trustbadge-Code. Sofern Sie in Schritt 1 eine ID-Änderung vorgenommen haben, ersetzen Sie bitte den Wert MyCustomTrustbadge auch innerhalb dieses Parameters durch die von Ihnen definierte ID des DIV-Elements.

Die Variante custom steht ausschließlich Shops mit Trusted Shops Gütesiegel zur Verfügung und ist nur bei aktivem Gütesiegel sichtbar. Sofern Ihr Gütesiegel noch nicht aktiviert ist und Sie dennoch eine Vorschau sehen möchten, können Sie dies über die Entwicklerkonsole Ihres Browsers tun. Führen Sie dort einfach den Befehl trustbadge.showIntegrationPlaceholder();  aus.

Optionaler Schritt 4: Bestimmen Sie die Öffnungsrichtung des Trustbadge

Das minimierte Trustbadge ist der ständige Begleiter Ihrer Kundschaft in Ihrem Online-Shop. Durch einen Klick auf das Trustbadge können Ihre Kundinnen und Kunden es maximieren, um weitere Informationen zu Ihrem Gütesiegel oder den gesammelten Bewertungen zu erhalten. Egal, wo Sie das Trustbadge in Ihrem Online-Shop positioniert haben – es maximiert sich standardmäßig in jene Richtung, in der es am meisten Platz hat.

Sie können dem Trustbadge allerdings auch eine feste Richtung zuweisen, in die es sich maximieren soll. Fügen Sie hierfür zunächst – falls noch nicht vorhanden – die folgende Codezeile in den Trustbadge-Code ein:

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

Legen Sie nun die Richtung fest, indem Sie für den Parameter einen der folgenden Werte eingeben:

  • 'topRight' für eine Maximierung nach rechts oben.
  • 'topLeft' für eine Maximierung nach links oben.
  • 'bottomRight' für eine Maximierung nach rechts unten.
  • 'bottomLeft' für eine Maximierung nach links unten.

Für eine Maximierung nach rechts oben sollte die Codezeile nach Ihren Anpassungen dementsprechend wie folgt aussehen:

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

Damit haben Sie die Integration der Variante custom bzw. custom_reviews abgeschlossen und können nun in Ihrem Online-Shop die Anzeige des Trustbadge überprüfen.

Erscheint das Trustbadge dennoch in der rechten unteren Ecke? Dann prüfen Sie bitte,

  • ob Sie im Parameter 'variant' tatsächlich custom oder custom_reviews als Wert angegeben haben,
  • ob Sie im Parameter 'customElementId' auf die ID des in Schritt 1 erstellten DIV-Elements verweisen
  • ob Sie die Höhe und die Breite des DIV-Elements wie in Schritt 1 beschrieben definiert haben.

In der Entwicklerkonsole Ihres Browsers erhalten Sie in diesen Fällen Meldungen mit weiteren Hinweisen.

Die mobilen Trustbadge-Varianten floating, floating_reviews und topbar

Selbstverständlich bietet Ihnen Trusted Shops auch mobile Darstellungsvarianten des Trustbadge an. Diese werden standardmäßig – also sofern Sie nicht den Wert für den Parameter 'disableResponsive' auf true umgestellt haben – bei einer Bildschirmbreite von 648 px und kleiner angezeigt.

mobile-trustmark-only.png

Die hier dargestellte Floating-Variante ist die mobile Standardvariante des Trustbadge. Im Gegensatz zu den Varianten reviews und default wird sie standardmäßig in der linken unteren Ecke Ihres Shops angezeigt. Zudem zeigt sie ausschließlich das Gütesiegel an.

Wenn Sie auch Ihre Bewertungssterne präsentieren möchten, haben Sie zwei Möglichkeiten:

  • Die Variante floating_reviews: Wie die Variante floating wird auch sie standardmäßig in der linken unteren Ecke Ihres Online-Shops angezeigt. Im Gegensatz zur Variante floating werden allerdings auch die Bewertungssterne dargestellt.

mobile-trustmark_reviews.png

  • Die Variante topbar: Bei dieser Variante handelt es sich um eine Leiste, die oberhalb Ihres Shopheaders angezeigt wird und sowohl das Gütesiegel als auch Bewertungsinformationen beinhaltet.

trustbadge-mobile-topbar_DE.jpg

Um die mobile Darstellung Ihres Trustbadge zu konfigurieren, kopieren Sie bitte die folgende Codezeile und fügen Sie sie unterhalb des Parameters 'variant' in Ihren Trustbadge-Code ein:

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

Innerhalb dieses Parameters haben Sie drei Konfigurationsmöglichkeiten:

  • Über den Wert, den Sie für 'variant' eingeben, bestimmen Sie, welche Trustbadge-Variante Sie bei Bildschirmbreiten von unter 648 px ausgeben möchten. Zur Auswahl stehen die Varianten floating und floating_reviews sowie die Variante topbar. Geben Sie die von Ihnen favorisierten Variante als Wert für 'variant' ein.
  • Die Varianten floating und floating_reviews sind nicht am linken Rand Ihres Shops fixiert. Über den Wert, den Sie für 'position' eintragen, definieren Sie die horizontale Positionierung dieser beiden Varianten. Neben dem Standardwert 'left' können Sie auch 'center' für eine mittige Positionierung und 'right' für eine Positionierung am rechten Rand auswählen. Für die Variante topbar lässt sich die horizontale Positionierung hingegen nicht anpassen, da sich die Leiste über die gesamte Bildschirmbreite erstreckt.
  • Für die Varianten floating und floating_reviews kann zudem die vertikale Positionierung angepasst werden. Dies geschieht über den Wert für 'yOffset'. Ersetzen Sie einfach die 0 durch eine beliebige Pixelanzahl, um das mobile Trustbadge nach oben zu verschieben. Auch die vertikale Positionierung lässt sich für die Variante topbar nicht individuell definieren. Die Variante ist am oberen Bildschirmrand fixiert.
Neben diesen für mobile Endgeräte entwickelten Trustbadge-Varianten haben Sie die Möglichkeit, auch in der mobilen Darstellung Ihres Shops die Varianten custom oder custom_reviews zu verwenden. Wie Sie diese Varianten für die mobile Ansicht einrichten können, erläutern wir Ihnen in diesem Artikel: Wie kann ich die mobile Darstellung des Trustbadge® anpassen?

Zusätzliche Parameter

Flexible Positionierung der Trustcard (Custom-Checkout)

Selbstverständlich können Sie auch die Trustcard auf der Bestellbestätigungsseite frei positionieren. Diese Einstellung ist nicht an die Varianten custom und custom_reviews gebunden, sondern kann auch mit den Varianten reviews und default genutzt werden. Folgen Sie hierfür einfach der folgenden Anleitung.

Schritt 1: Erstellen Sie ein DIV-Element auf der Bestellbestätigungsseite

Zunächst müssen Sie an der Stelle Ihrer Bestellbestätigungsseite, an der die Trustcard erscheinen soll, ein DIV-Element erstellen. Fügen Sie hierfür einfach die folgende Codezeile an der entsprechenden Stelle ein:

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

Als ID des DIV-Elements ist customCheckoutDiv voreingestellt. Selbstverständlich können Sie diese ID durch einen Namen Ihrer Wahl ersetzen. Denken Sie in diesem Fall aber bitte daran, diese ID im kommenden Schritt auch im Trustbadge-Code zu verwenden.

Schritt 2: Verknüpfen Sie Trustbadge-Code und DIV-Element

Fügen Sie unterhalb der Codezeile 'variant' die folgende Codezeile in Ihren Trustbadge-Code ein:

'customCheckoutElementId': 'customCheckoutDiv',

Der Parameter 'customCheckoutElementId' ist die Referenzmarke für das in Schritt 1 erstellte DIV-Element und verknüpft dieses mit Ihrem Trustbadge-Code. Sofern Sie in Schritt 1 eine ID-Änderung vorgenommen haben, ersetzen Sie bitte den Wert customCheckoutDiv auch innerhalb dieses Parameters durch die von Ihnen definierte ID des DIV-Elements.

Damit haben Sie die Trustcard erfolgreich an der von Ihnen ausgewählten Stelle positioniert. Testen Sie nun die Einstellung, indem Sie eine Testbestellung in Ihrem Shop durchführen. Sofern die Trustcard an der von Ihnen gewünschten Stelle erscheint, war die Integration erfolgreich.


War der Artikel hilfreich?

4 von 12 fanden dies hilfreich