Wie passe ich das Trustbadge® an meine Anforderungen an?

Sie haben das Trustbadge noch nicht integriert? Dann führen Sie zunächst die Standardintegration durch, bevor Sie an dieser Stelle weitermachen. Dieser Artikel hilft Ihnen dabei: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?
Im oben verlinkten Artikel finden Sie auch den Trustbadge-Code, der die Grundlage für alle im folgenden Text beschriebenen Anpassungen ist.

Innerhalb der Standardintegration sind für das Trustbadge® folgende Regeln festgelegt:

• Das Trustbadge stellt Ihre gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – Ihr Gütesiegel dar.
• Das Trustbadge wird in der Desktop-Ansicht auf der rechten Bildschirmseite und in der mobilen Ansicht auf der linken Bildschirmseite angezeigt.
• Das Trustbadge wird in der Desktop-Ansicht 54 Pixel und in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.

Selbstverständlich können Sie diese Regeln an Ihre individuellen Anforderungen anpassen.

Bis Sie Ihre erste Bewertung gesammelt oder das Gütesiegel erhalten haben, wird das Trustbadge für Neumitglieder auf Ihrer Webseite angezeigt:

Am Trustbadge für Neumitglieder sind nur eingeschränkte Anpassungen möglich:
 

• Sie können es am rechten oder linken Bildschirmrand platzieren.
• Sie können es nach oben oder unten verschieben.

Die Integration der Custom-Variante ist zu diesem Zeitpunkt noch nicht möglich.
Möchten Sie weitere Anpassungen vornehmen? Dann warten Sie damit, bis Sie Ihre erste Bewertung gesammelt oder das Gütesiegel erhalten haben. Anschließend stehen Ihnen sämtliche Anpassungsmöglichkeiten zur Verfügung, die in diesem Artikel beschrieben sind.

In diesem Artikel erklären wir Ihnen, wie Sie mithilfe des Trustbadge®-Codes…

• … die Darstellung des Trustbadge verändern.
• … das Trustbadge an einer anderen Stelle Ihrer Webseite platzieren.
• … das Trustbadge kurzzeitig aus Ihrer Webseite ausblenden können.

Wie kann ich das Trustbadge anders darstellen?

Innerhalb der Standardintegration stellt das Trustbadge Ihre gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – Ihr Gütesiegel dar.

            (Desktop-Variante)                         (mobile Variante)

Mithilfe des Trustbadge-Codes haben Sie vier Möglichkeiten, die Darstellung des Trustbadge zu verändern:

• Sie können die gesammelten Bewertungssterne ausblenden und nur noch Ihr Gütesiegel anzeigen.
  
               (Desktop-Variante)                     (mobile Variante)
• Sie können den Dark Mode des Trustbadge nutzen.
  

            (Desktop-Variante)                         (mobile Variante)

• Sie können auch in der mobilen Ansicht Ihrer Webseite die Desktop-Variante des Trustbadge verwenden.
• Sie können in der mobilen Ansicht die Topbar-Variante des Trustbadge verwenden.
  

Bewertungssterne in der Desktop-Ansicht ausblenden

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-disable-reviews="false" 

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-desktop-disable-reviews="true" 

Damit haben Sie die Bewertungssterne in der Desktop-Ansicht erfolgreich ausgeblendet.

Bewertungssterne in der mobilen Ansicht ausblenden

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-disable-reviews="false"

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-mobile-disable-reviews="true"

Damit haben Sie die Bewertungssterne in der mobilen Ansicht erfolgreich ausgeblendet.

Den Dark Mode des Trustbadge nutzen

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-color-scheme="light"

Die Auswahl des Farbschemas ist ein optionaler Parameter. Wenn Sie die oben erwähnte Codezeile nicht in Ihrem Trustbadge-Code finden, können Sie sie selbst hinzufügen.

2. Die Codezeile durch eine der folgenden Codezeilen ersetzen:
   - Wenn Sie möchten, dass das Trustbadge ständig im Dunkelmodus angezeigt wird:

   data-color-scheme="dark"

   - Wenn die Dark-Mode-Einstellungen Ihrer Kundschaft darüber bestimmen sollen, ob das Trustbadge im Dark Mode angezeigt wird:

   data-color-scheme="os-default"

Desktop-Variante des Trustbadge in der mobilen Ansicht nutzen

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-disable-mobile="false" 

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-disable-mobile="true"

Damit nutzen Sie auch in der mobilen Ansicht die Desktop-Variante des Trustbadge.

Topbar-Variante des Trustbadge in der mobilen Ansicht nutzen

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-enable-topbar="false" 

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-mobile-enable-topbar="true"

Damit nutzen Sie in der mobilen Ansicht die Topbar-Variante des Trustbadge.

Die Topbar-Variante des Trustbadge ist fest am oberen Bildschirmrand positioniert. Sie können diese Positionierung nicht verändern.

Wie kann ich das Trustbadge an einer anderen Stelle platzieren?

Der Trustbadge-Code gibt Ihnen die Möglichkeit, das Trustbadge in der Desktop- und der mobilen Ansicht unabhängig voneinander an verschiedenen Stellen Ihrer Webseite zu platzieren. Sie können das Trustbadge…

… horizontal nach links oder rechts verrücken.

… vertikal nach oben oder unten verschieben.

Diese Möglichkeiten reichen Ihnen nicht aus? Mit der Custom-Variante des Trustbadge haben Sie die Möglichkeit, das Trustbadge vollkommen flexibel an einer beliebigen Stelle Ihrer Webseite zu platzieren.

Platzierung des Trustbadge in der Desktop-Ansicht anpassen

Sie können das Trustbadge in der Desktop-Ansicht sowohl horizontal vom rechten an den linken Bildschirmrand verrücken als auch vertikal nach oben oder unten verschieben.

Trustbadge in der Desktop-Ansicht am linken Bildschirmrand platzieren

In der Standardeinstellung ist das Trustbadge in der Desktop-Ansicht am rechten Bildschirmrand platziert. Mit der folgenden Code-Anpassung können Sie das Trustbadge am linken Bildschirmrand positionieren.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-position="right"

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-desktop-position="left"

Damit haben Sie das Trustbadge erfolgreich am linken Bildschirmrand platziert.

Trustbadge in der Desktop-Ansicht nach oben oder unten verschieben

In der Standardeinstellung ist das Trustbadge in der Desktop-Ansicht 54 Pixel oberhalb des unteren Bildschirmrands platziert. Mit der folgenden Code-Anpassung können Sie das Trustbadge nach oben oder unten verschieben.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-y-offset="0"

2. Die 0 durch die Pixelanzahl ersetzen, um die das Trustbadge nach oben oder unten verschoben werden soll.

Zwei Beispiele:

• Sie möchten das Trustbadge um 20 Pixel nach oben verschieben? Dann verwenden Sie folgende Codezeile:

  data-desktop-y-offset="20"

• Sie möchten das Trustbadge nach unten verschieben? Dann nutzen Sie Minuswerte. Um das Trustbadge 20 Pixel nach unten zu verschieben, verwenden Sie folgende Codezeile:

  data-desktop-y-offset="-20"

Bei einem Wert von -54 ist das Trustbadge ohne Abstand am unteren Bildschirmrand platziert. Wir empfehlen Ihnen daher, ausschließlich Werte bis -44 zu nutzen.

Damit haben Sie das Trustbadge erfolgreich nach unten oder oben verschoben.

Platzierung des Trustbadge in der mobilen Ansicht anpassen

Sie können das Trustbadge in der mobilen Ansicht sowohl horizontal vom linken an den rechten Bildschirmrand oder in die Bildschirmmitte verrücken als auch vertikal nach oben oder unten verschieben.

Trustbadge in der mobilen Ansicht am rechten Bildschirmrand oder in der Mitte platzieren

In der Standardeinstellung ist das Trustbadge am linken Bildschirmrand platziert. Mit der folgenden Code-Anpassung können Sie das Trustbadge am rechten Bildschirmrand oder in der Mitte positionieren.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-position="left"

2. Die Codezeile durch eine der folgenden Codezeilen ersetzen:
   - Wenn Sie das Trustbadge auf der rechten Seite platzieren möchten:

   data-mobile-position="right"

   - Wenn Sie das Trustbadge in der Mitte platzieren möchten:

   data-mobile-position="center"

Damit haben Sie das Trustbadge erfolgreich am rechten Bildschirmrand oder in der Mitte platziert.

Trustbadge in der mobilen Ansicht nach oben oder unten verschieben

In der Standardeinstellung ist das Trustbadge in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands platziert. Mit der folgenden Code-Anpassung können Sie das Trustbadge nach oben oder unten verschieben.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

    data-mobile-y-offset="0"

2. Die 0 durch die Pixelanzahl ersetzen, um die das Trustbadge nach oben oder unten verschoben werden soll.

Zwei Beispiele:

• Sie möchten das Trustbadge um 5 Pixel nach oben verschieben? Dann verwenden Sie folgende Codezeile:

  data-mobile-y-offset="5"

• Sie möchten das Trustbadge nach unten verschieben? Dann nutzen Sie Minuswerte. Um das Trustbadge 5 Pixel nach unten zu verschieben, verwenden Sie folgende Codezeile:

  data-mobile-y-offset="-5" 

  Nutzen Sie hierbei ausschließlich Werte bis -10.

Damit haben Sie das Trustbadge erfolgreich nach unten oder oben verschoben.

Trustbadge flexibel auf Ihrer Webseite platzieren

Neben der bisher beschriebenen Standardvariante des Trustbadge können Sie auch die Custom-Variante in Ihre Webseite integrieren.

Die Custom-Variante unterscheidet sich in drei Punkten von der Standardvariante:

1. Sie sieht anders aus als die Standardvariante. Hier sehen Sie die Custom-Variante:   
         (mit Bewertungssternen)                                                (ohne Bewertungssterne)
2. Sie können die Custom-Variante vollkommen flexibel auf Ihrer Webseite platzieren.
3. Sie können die Größe der Custom-Variante verändern.

Sie können die Custom-Variante des Trustbadge in der Desktop- und der mobilen Ansicht unabhängig voneinander an verschiedenen Stellen Ihrer Webseite platzieren.

Trustbadge flexibel in der Desktop-Ansicht platzieren

Standardmäßig hat die Custom-Variante eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir Ihnen, wie Sie die Größe des Trustbadge in der Desktop-Ansicht verändern können. Sie sind mit den oben genannten Standardwerten einverstanden? Dann überspringen Sie die nächsten beiden Schritte und fahren Sie mit Schritt 3 fort.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-custom-width="156"

2. Die 156 durch die Pixelanzahl ersetzen, die sie als Breite des Trustbadge bestimmen möchten.

Welche Pixelanzahl Sie an dieser Stelle auswählen können, hängt davon ab, ob Sie die Bewertungssterne in der Desktop-Ansicht ausgeblendet haben.

• Haben Sie die Bewertungssterne ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 32 und 58.
• Haben Sie die Bewertungssterne nicht ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 100 und 500.

Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von Ihnen gewählten Breite. Sie wird nicht von Ihnen bestimmt.

3. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-enable-custom="false"

4. Die Codezeile durch die folgende Codezeile ersetzen:

   data-desktop-enable-custom="true"

5. Den Quellcode Ihrer Webseite öffnen.
6. Die folgende Codezeile an der Position Ihrer Webseite platzieren, an der das Trustbadge erscheinen soll:

   <div id="trustbadgeCustomContainer"></div>

Mögliche Positionen wären beispielsweise der Header oder der Footer.

Damit haben Sie das Trustbadge erfolgreich an der von Ihnen ausgewählten Stelle Ihrer Webseite integriert.

Trustbadge flexibel in der mobilen Ansicht platzieren

Standardmäßig hat die Custom-Variante in der mobilen Ansicht eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir Ihnen, wie Sie die Größe des Trustbadge in der mobilen Ansicht verändern können. Sie sind mit den oben genannten Standardwerten einverstanden? Dann überspringen Sie die nächsten beiden Schritte und fahren Sie mit Schritt 3 fort.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-custom-width="156"

2. Die 156 durch die Pixelanzahl ersetzen, die sie als Breite des Trustbadge bestimmen möchten.

Welche Pixelanzahl Sie an dieser Stelle auswählen können, hängt davon ab, ob Sie die Bewertungssterne in der mobilen Ansicht ausgeblendet haben.

• Haben Sie die Bewertungssterne ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 32 und 58.
• Haben Sie die Bewertungssterne nicht ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 100 und 500.

Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von Ihnen gewählten Breite. Sie muss nicht von Ihnen bestimmt werden.

3. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-enable-custom="false"

4. Die Codezeile durch die folgende Codezeile ersetzen:

   data-mobile-enable-custom="true"

5. Den Quellcode Ihrer Webseite öffnen.
6. Die folgende Codezeile an der Position Ihrer Webseite platzieren, an der das Trustbadge erscheinen soll:

   <div id="trustbadgeCustomMobileContainer"></div>

Mögliche Positionen wären beispielsweise der Header oder der Footer.

Damit haben Sie das Trustbadge erfolgreich an der von Ihnen ausgewählten Stelle Ihrer Webseite integriert.

Wie kann ich das Trustbadge ausblenden?

Wenn Sie das Trustbadge ausblenden möchten, haben Sie dafür zwei Möglichkeiten:

• Sie können in der Desktop-Ansicht den Fade-out-Modus aktivieren. In diesem Modus wird das Trustbadge weiterhin im oberen Bereich jeder Seite angezeigt. Es wird allerdings langsam ausgeblendet, sobald Ihre Kundschaft nach unten scrollt. Es erscheint erneut, sobald Ihre Kundschaft in den oberen Bereich der Seite zurückkehrt.

In der mobilen Ansicht ist der Fade-out-Modus automatisch aktiviert. Es ist aber möglich, ihn in dieser Ansicht zu deaktivieren.

• Sie können das Trustbadge komplett ausblenden. In diesem Fall ist das Trustbadge nicht mehr auf Ihrer Webseite zu sehen. Lediglich die Trustcard wird nach dem Bestelleingang geöffnet, damit Ihre Kundschaft weiterhin den Käuferschutz abschließen kann.

Wenn Sie das Trustbadge komplett ausblenden, wird es sowohl in der Desktop- als auch in der mobilen Ansicht nicht angezeigt.

Fade-out-Modus in der Desktop-Ansicht aktivieren

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-desktop-enable-fadeout="false"

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-desktop-enable-fadeout="true"

Damit haben Sie den Fade-out-Modus in der Desktop-Ansicht erfolgreich aktiviert. Das Trustbadge wird nun langsam ausgeblendet, sobald Ihre Kundschaft auf der Webseite nach unten scrollt.

Fade-out-Modus in der mobilen Ansicht deaktivieren

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-mobile-enable-fadeout="true"

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-mobile-enable-fadeout="false"

Damit haben Sie den Fade-out-Modus in der mobilen Ansicht erfolgreich deaktiviert. Das Trustbadge wird nun nicht mehr ausgeblendet, sobald Ihre Kundschaft auf der Webseite nach unten scrollt.

Trustbadge ausblenden

Ein sichtbares Trustbadge sorgt dafür, dass sich Ihre Kundinnen und Kunden auf Ihrer Webseite sicher fühlen. Wenn Sie das Trustbadge ausblenden, gefährden Sie Ihre Konversion und Ihren Umsatz. Wir raten Ihnen daher, das Trustbadge allenfalls temporär auszublenden.

1. Innerhalb des Trustbadge-Codes die folgende Codezeile finden:

   data-disable-trustbadge="false"

2. Die Codezeile durch die folgende Codezeile ersetzen:

   data-disable-trustbadge="true"

Damit haben Sie das Trustbadge sowohl in der Desktop- als auch in der mobilen Ansicht erfolgreich ausgeblendet.

Wie kann ich die Trustcard an einer anderen Stelle platzieren?

Die Trustcard öffnet sich nach dem Checkout als Popup-Fenster auf Ihrer Bestellbestätigungsseite. Über die Trustcard kann Ihre Kundschaft ihre Einwilligung zum Empfang einer Bewertungseinladung geben und/oder ihre Bestellung mithilfe des Käuferschutzes absichern.

Sie möchten nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann können Sie ihr eine feste Position auf Ihrer Bestellbestätigungsseite zuweisen.

1. Die Template-Datei Ihrer Bestellbestätigungsseite öffnen.

2. Die folgende Codezeile in Ihren Zwischenspeicher kopieren:

   <div id="trustbadgeCustomCheckoutContainer"></div>

3. Die Codezeile an der Stelle der Template-Datei einfügen, an der die Trustcard erscheinen soll.

Damit haben Sie die Trustcard erfolgreich an einer festen Position auf Ihrer Bestellbestätigungsseite platziert.