Wie kann ich die mobile Darstellung des Trustbadge® anpassen?

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 die im folgenden Text beschriebenen Anpassungen ist.

Sie können die mobile Darstellung des Trustbadge unabhängig von der Darstellung in der Desktop-Ansicht konfigurieren. Innerhalb der Standardintegration sind für das mobile Trustbadge folgende Regeln festgelegt:

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

Selbstverständlich können Sie diese Regeln an Ihre individuellen Anforderungen anpassen. In diesem Artikel erklären wir Ihnen, wie Sie mithilfe des Trustbadge®-Codes…

• … die Darstellung des mobilen Trustbadge verändern.
• … das Trustbadge an einer anderen Stelle Ihrer mobilen Ansicht platzieren.
• … den Fade-out-Modus deaktivieren.

Wie kann ich das mobile Trustbadge anders darstellen?

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

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

• Sie können die gesammelten Bewertungssterne ausblenden und nur noch Ihr Gütesiegel anzeigen.
  
• 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 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.

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 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 mobile Trustbadge an einer anderen Stelle platzieren?

Innerhalb der Standardintegration wird das mobile Trustbadge auf der linken Bildschirmseite und 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.

Mithilfe des Trustbadge-Codes können Sie das mobile Trustbadge…

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

… vertikal nach oben oder unten verschieben.

… flexibel in der mobilen Ansicht Ihrer Webseite platzieren.

Trustbadge 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 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 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 die mobile Ansicht Ihrer 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.

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 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 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 den Fade-out-Modus des mobilen Trustbadge deaktivieren?

In der mobilen Ansicht ist der Fade-out-Modus automatisch aktiviert. In diesem Modus wird das Trustbadge 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. Sie können den Fade-out-Modus deaktivieren, sodass das Trustbadge nicht mehr ausgeblendet wird.

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.