Kann ich das Trustbadge® auch an einer anderen Stelle in meinen Shop einbinden?

Du hast das Trustbadge noch nicht integriert? Dann führe zunächst die Standardintegration durch, bevor du an dieser Stelle weitermachst. Dieser Artikel hilft dir dabei: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?
Im oben verlinkten Artikel findest du auch den Trustbadge-Code, der die Grundlage für die im folgenden Text beschriebenen Anpassungen ist.

Innerhalb der Standardintegration sind für die Positionierung des Trustbadge® folgende Regeln festgelegt:

• 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 kannst du diese Regeln an deine individuellen Anforderungen anpassen. Der Trustbadge-Code gibt dir die Möglichkeit, das Trustbadge in der Desktop- und der mobilen Ansicht unabhängig voneinander an verschiedenen Stellen deiner Webseite zu platzieren.

Wie verändere ich die Positionierung des Trustbadge in der Desktop-Ansicht?

Du kannst das Trustbadge in der Desktop-Ansicht…

… horizontal vom rechten an den linken Bildschirmrand verrücken.

… vertikal nach oben oder unten verschieben.

… vollkommen flexibel auf deiner Webseite platzieren.

Trustbadge in der Desktop-Ansicht am linken Bildschirmrand platzieren

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 hast du das Trustbadge erfolgreich am linken Bildschirmrand platziert.

Trustbadge in der Desktop-Ansicht 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:

• Du möchtest das Trustbadge um 20 Pixel nach oben verschieben? Dann verwende folgende Codezeile:

  data-desktop-y-offset="20"

• Du möchtest das Trustbadge nach unten verschieben? Dann nutze Minuswerte. Um das Trustbadge 20 Pixel nach unten zu verschieben, verwende folgende Codezeile:

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

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

Damit hast du das Trustbadge erfolgreich nach unten oder oben verschoben.

Trustbadge flexibel in der Desktop-Ansicht platzieren

Neben der bisher beschriebenen Standardvariante des Trustbadge kannst du auch die Custom-Variante in deine Webseite integrieren.

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

1. Sie sieht anders aus als die Standardvariante. Hier siehst du die Custom-Variante:
   
   (mit Bewertungssternen) (ohne Bewertungssterne)
2. Du kannst die Custom-Variante vollkommen flexibel auf deiner Webseite platzieren.
3. Du kannst die Größe der Custom-Variante verändern.

Standardmäßig hat die Custom-Variante eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir dir, wie du die Größe des Trustbadge in der Desktop-Ansicht verändern kannst. Du bist mit den oben genannten Standardwerten einverstanden? Dann überspringe die nächsten beiden Schritte und fahre 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 du als Breite des Trustbadge bestimmen möchtest.

Welche Pixelanzahl du an dieser Stelle auswählen kannst, hängt davon ab, ob du die Bewertungssterne in der Desktop-Ansicht ausgeblendet hast.

• Hast du die Bewertungssterne ausgeblendet? Dann wähle eine Pixelanzahl zwischen 32 und 58.
• Hast du die Bewertungssterne nicht ausgeblendet? Dann wähle eine Pixelanzahl zwischen 100 und 500.

Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von dir gewählten Breite. Sie wird nicht von dir 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 deiner Webseite öffnen.
6. Die folgende Codezeile an der Position deiner Webseite platzieren, an der das Trustbadge erscheinen soll:

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

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

Damit hast du das Trustbadge erfolgreich an der von dir ausgewählten Stelle deiner Webseite integriert.

Wie verändere ich die Positionierung des Trustbadge in der mobilen Ansicht?

Du kannst das Trustbadge in der mobilen Ansicht…

… horizontal vom linken Bildschirmrand in die Mitte oder nach rechts verrücken.

… vertikal nach oben oder unten verschieben.

… vollkommen flexibel auf deiner Webseite platzieren.

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

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

   data-mobile-position="left"

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

   data-mobile-position="right"

   - Wenn du das Trustbadge in der Mitte platzieren möchtest:

   data-mobile-position="center"

Damit hast du das Trustbadge erfolgreich am rechten Bildschirmrand oder in der Mitte platziert.

Trustbadge in der mobilen Ansicht 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:

• Du möchtest das Trustbadge um 5 Pixel nach oben verschieben? Dann verwende folgende Codezeile:

  data-mobile-y-offset="5"

• Du möchtest das Trustbadge nach unten verschieben? Dann nutze Minuswerte. Um das Trustbadge 5 Pixel nach unten zu verschieben, verwende folgende Codezeile:

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

  Nutze hierbei ausschließlich Werte bis -10.

Damit hast du das Trustbadge erfolgreich nach unten oder oben verschoben.

Trustbadge flexibel in der mobilen Ansicht platzieren

Neben der bisher beschriebenen Standardvariante des Trustbadge kannst du auch die Custom-Variante in die mobile Ansicht deiner Webseite integrieren. Standardmäßig hat die Custom-Variante eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir dir, wie du die Größe des Trustbadge verändern kannst. Du bist mit den oben genannten Standardwerten einverstanden? Dann überspringe die nächsten beiden Schritte und fahre 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 du als Breite des Trustbadge bestimmen möchtest.

Welche Pixelanzahl du an dieser Stelle auswählen kannst, hängt davon ab, ob du die Bewertungssterne ausgeblendet hast.

• Hast du die Bewertungssterne ausgeblendet? Dann wähle eine Pixelanzahl zwischen 32 und 58.
• Hast du die Bewertungssterne nicht ausgeblendet? Dann wähle eine Pixelanzahl zwischen 100 und 500.

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

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 deiner Webseite öffnen.
6. Die folgende Codezeile an der Position deiner Webseite platzieren, an der das Trustbadge erscheinen soll:

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

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

Damit hast du das Trustbadge erfolgreich an der von dir ausgewählten Stelle deiner Webseite integriert.

Wie kann ich die Trustcard an einer anderen Stelle platzieren?

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

Du möchtest nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann kannst du ihr eine feste Position auf deiner Bestellbestätigungsseite zuweisen.

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

2. Die folgende Codezeile in deinen Zwischenspeicher kopieren:

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

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

Damit hast du die Trustcard erfolgreich an einer festen Position auf deiner Bestellbestätigungsseite platziert.