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 alle im folgenden Text beschriebenen Anpassungen ist.
Innerhalb der Standardintegration sind für das Trustbadge® folgende Regeln festgelegt:
- Das Trustbadge stellt deine gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – dein 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 kannst du diese Regeln an deine individuellen Anforderungen anpassen.
Am Trustbadge für Neumitglieder sind nur eingeschränkte Anpassungen möglich:
- Du kannst es am rechten oder linken Bildschirmrand platzieren.
- Du kannst es nach oben oder unten verschieben.
Möchtest du weitere Anpassungen vornehmen? Dann warte damit, bis du deine erste Bewertung gesammelt oder das Gütesiegel erhalten hast. Anschließend stehen dir sämtliche Anpassungsmöglichkeiten zur Verfügung, die in diesem Artikel beschrieben sind.
In diesem Artikel erklären wir dir, wie du mithilfe des Trustbadge®-Codes…
- … die Darstellung des Trustbadge verändern kannst.
- … das Trustbadge an einer anderen Stelle deiner Webseite platzieren kannst.
- … das Trustbadge kurzzeitig aus deiner Webseite ausblenden kannst.
Wie kann ich das Trustbadge anders darstellen?
Innerhalb der Standardintegration stellt das Trustbadge deine gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – dein Gütesiegel dar.
(Desktop-Variante) (mobile Variante)
Mithilfe des Trustbadge-Codes hast du vier Möglichkeiten, die Darstellung des Trustbadge zu verändern:
- Du kannst die gesammelten Bewertungssterne ausblenden und nur noch dein Gütesiegel anzeigen.
(Desktop-Variante) (mobile Variante) - Du kannst den Dark Mode des Trustbadge nutzen.
(Desktop-Variante) (mobile Variante)
- Du kannst auch in der mobilen Ansicht deiner Webseite die Desktop-Variante des Trustbadge verwenden.
- Du kannst in der mobilen Ansicht die Topbar-Variante des Trustbadge verwenden.
Bewertungssterne in der Desktop-Ansicht ausblenden
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-disable-reviews="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-desktop-disable-reviews="true"
Damit hast du die Bewertungssterne in der Desktop-Ansicht erfolgreich ausgeblendet.
Bewertungssterne in der mobilen Ansicht ausblenden
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-disable-reviews="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-disable-reviews="true"
Damit hast du die Bewertungssterne in der mobilen Ansicht erfolgreich ausgeblendet.
Den Dark Mode des Trustbadge nutzen
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-color-scheme="light"
Die Auswahl des Farbschemas ist ein optionaler Parameter. Wenn du die oben erwähnte Codezeile nicht in deinem Trustbadge-Code findest, kannst du sie selbst hinzufügen.
- Die Codezeile durch eine der folgenden Codezeilen ersetzen:
- Wenn du möchtest, dass das Trustbadge ständig im Dunkelmodus angezeigt wird:data-color-scheme="dark"
- Wenn die Dark-Mode-Einstellungen deiner 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
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-disable-mobile="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-disable-mobile="true"
Damit nutzt du auch in der mobilen Ansicht die Desktop-Variante des Trustbadge.
Topbar-Variante des Trustbadge in der mobilen Ansicht nutzen
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-topbar="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-topbar="true"
Damit nutzt du in der mobilen Ansicht die Topbar-Variante des Trustbadge.
Die Topbar-Variante des Trustbadge ist fest am oberen Bildschirmrand positioniert. Du kannst diese Positionierung nicht verändern.
Wie kann ich das Trustbadge an einer anderen Stelle platzieren?
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. Du kannst das Trustbadge…
… horizontal nach links oder rechts verrücken.
… vertikal nach oben oder unten verschieben.
Diese Möglichkeiten reichen dir nicht aus? Mit der Custom-Variante des Trustbadge hast du die Möglichkeit, das Trustbadge vollkommen flexibel an einer beliebigen Stelle deiner Webseite zu platzieren.
Platzierung des Trustbadge in der Desktop-Ansicht anpassen
Du kannst 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 kannst du das Trustbadge am linken Bildschirmrand positionieren.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-position="right"
- 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
In der Standardeinstellung ist das Trustbadge in der Desktop-Ansicht 54 Pixel oberhalb des unteren Bildschirmrands platziert. Mit der folgenden Code-Anpassung kannst du das Trustbadge nach oben oder unten verschieben.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-y-offset="0"
- 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.
Platzierung des Trustbadge in der mobilen Ansicht anpassen
Du kannst 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 kannst du das Trustbadge am rechten Bildschirmrand oder in der Mitte positionieren.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-position="left"
-
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
In der Standardeinstellung ist das Trustbadge in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands platziert. Mit der folgenden Code-Anpassung kannst du das Trustbadge nach oben oder unten verschieben.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-y-offset="0"
- 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 auf deiner Webseite 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:
- Sie sieht anders aus als die Standardvariante. Hier siehst du die Custom-Variante:
(mit Bewertungssternen) (ohne Bewertungssterne) - Du kannst die Custom-Variante vollkommen flexibel auf deiner Webseite platzieren.
- Du kannst die Größe der Custom-Variante verändern.
Du kannst die Custom-Variante des Trustbadge in der Desktop- und der mobilen Ansicht unabhängig voneinander an verschiedenen Stellen deiner 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 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.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-custom-width="156"
- 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.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-enable-custom="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-desktop-enable-custom="true"
- Den Quellcode deiner Webseite öffnen.
- 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.
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 dir, wie du die Größe des Trustbadge in der mobilen 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.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-custom-width="156"
- 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 mobilen 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 muss nicht von dir bestimmt werden.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-custom="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-custom="true"
- Den Quellcode deiner Webseite öffnen.
- 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 das Trustbadge ausblenden?
Wenn du das Trustbadge ausblenden möchtest, hast du dafür zwei Möglichkeiten:
- Du kannst 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 deine Kundschaft nach unten scrollt. Es erscheint erneut, sobald deine 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.
- Du kannst das Trustbadge komplett ausblenden. In diesem Fall ist das Trustbadge nicht mehr auf deiner Webseite zu sehen. Lediglich die Trustcard wird nach dem Bestelleingang geöffnet, damit deine Kundschaft weiterhin den Käuferschutz abschließen kann.
Wenn du das Trustbadge komplett ausblendest, wird es sowohl in der Desktop- als auch in der mobilen Ansicht nicht angezeigt.
Fade-out-Modus in der Desktop-Ansicht aktivieren
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-enable-fadeout="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-desktop-enable-fadeout="true"
Damit hast du den Fade-out-Modus in der Desktop-Ansicht erfolgreich aktiviert. Das Trustbadge wird nun langsam ausgeblendet, sobald deine Kundschaft auf der Webseite nach unten scrollt.
Fade-out-Modus in der mobilen Ansicht deaktivieren
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-fadeout="true"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-fadeout="false"
Damit hast du den Fade-out-Modus in der mobilen Ansicht erfolgreich deaktiviert. Das Trustbadge wird nun nicht mehr ausgeblendet, sobald deine Kundschaft auf der Webseite nach unten scrollt.
Trustbadge ausblenden
Ein sichtbares Trustbadge sorgt dafür, dass sich deine Kundinnen und Kunden auf deiner Webseite sicher fühlen. Wenn du das Trustbadge ausblendest, gefährdest du deine Konversion und deinen Umsatz. Wir raten dir daher, das Trustbadge allenfalls temporär auszublenden.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-disable-trustbadge="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-disable-trustbadge="true"
Damit hast du 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 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.
- Die Template-Datei deiner Bestellbestätigungsseite öffnen.
- Die folgende Codezeile in deinen Zwischenspeicher kopieren:
<div id="trustbadgeCustomCheckoutContainer"></div>
- 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.