Wie füge ich Widgets auf meiner Webseite hinzu?

In eTrusted stehen dir einige moderne Widgets zur Verfügung, mit denen du deine Trusted Shops Gesamtnote und einzelne Bewertungen prominent auf deiner Webseite darstellen kannst. Nutze eTrusted Widgets, um Besucherinnen und Besucher von deinem Unternehmen zu überzeugen.

Vertrauen ist die wichtigste Währung im Internet. Indem du deine positive Gesamtbewertung gut sichtbar auf deiner Webseite zeigst, weckst du Vertrauen und steigerst dadurch deinen Umsatz.

Wo kann ich mir verfügbare Widgets ansehen?

Alle verfügbaren Widgets findest du in der eTrusted Widget-Bibliothek.

1. Ins eTrusted Kontrollzentrum einloggen.
2. In der Hauptnavigation auf den Stern („Bewertungen“) () klicken. Anschließend auf „Marketing“ () klicken.
3. Den Reiter „Widgets“ () öffnen.
   

Dort kannst du zwischen verschiedenen Widget-Varianten wählen und einzelne Widgets außerdem an deine Wünsche anpassen.

Innerhalb der Widget-Bibliothek siehst du eine Vorschau zu jedem Widget. So kannst du entscheiden, welches Widget sich am besten für deine Webseite eignet und an welcher Stelle es besonders effektiv platziert werden kann.

Jedes Widget ist bereits für Desktop und Mobile optimiert, sodass du dir keine Sorgen um die korrekte Darstellung auf den Geräten deiner Nutzer*innen machen musst. Der Code unserer Widgets deckt zwei Darstellungsvarianten ab: Die eine ist optimiert für die Anzeige auf kleineren Smartphone-Displays, die andere nutzt den Platz einer Desktop-Auflösung vollständig aus.

Du möchtest wissen, wie Widgets auf deiner Webseite aussehen? Finde es hier heraus:
Wie sehen eTrusted Widgets auf meiner Webseite aus?

Wie binde ich ein Widget in meine Webseite ein?

Schritt 1: Erzeugung des Widget-Codes

1. Die Übersicht „Widgets“ wie oben beschrieben öffnen.
2. Ein Widget auswählen. Anschließend auf den zum Widget gehörenden Button „Erstellen“ klicken. Der Konfigurationsmodus des Widgets öffnet sich.
   

3. Das Farbschema wählen, in dem das Widget angezeigt werden soll:
   - „Hell“ wählen, wenn das Widget immer im Standard-Farbschema angezeigt werden soll.
   - „Dark“ wählen, wenn das Widget immer im Dark Mode angezeigt werden soll.
   - „OS default“ wählen, wenn die Dark-Mode-Einstellungen deiner Kundschaft darüber bestimmen sollen, ob das Widget im Dark Mode angezeigt wird.
   
4. Möchtest du eine andere Farbe für deine Bewertungssterne und die Balken verwenden? Dann auf das Farbfeld „Akzentfarbe“ klicken.
   
   Ein Dropdown-Menü öffnet sich. Eine der vorgeschlagenen Farben auswählen () oder den Hexadezimalwert der gewünschten Farbe in das Eingabefeld eingeben (). Abschließend auf „Anwenden“ () klicken.
   
5. Möchtest du im Widget die Schriftart nutzen, die auch deine Webseite verwendet? Dann ein Häkchen bei „Schriftart Ihrer Website verwenden“ setzen.
   
6. Ein Häkchen bei „Bilder anzeigen“ setzen, wenn von deiner Kundschaft hochgeladene Produktfotos im Widget angezeigt werden sollen.

7. Bindest du gerade das Widget „Customer Voice“ ein? Dann zunächst auf den Pfeil in der rechten oberen Ecke des Bereichs „Heben Sie eine Aussage hervor“ klicken. Eine Liste mit deinen Vier- und Fünf-Sterne-Bewertungen öffnet sich.
   
   
   Sollen in dieser Liste ausschließlich Bewertungen von Kundinnen und Kunden angezeigt werden, die ihren Namen angegeben haben? Dann ein Häkchen bei „Nur Bewertungen mit Namen anzeigen“ setzen.
   
   Die gewünschte Bewertung auswählen.
   
   Mithilfe der blauen Texthervorhebung auswählen, welcher Teil des Bewertungskommentars im Widget angezeigt werden soll.
   
   
   Der Name deiner Kundschaft wird vom Widget automatisch anonymisiert. Dennoch kann es vorkommen, dass sich deine Kundschaft nachträglich gegen die prominente Anzeige ihrer Bewertung auf deiner Webseite ausspricht.
   Entwickle für diesen Fall einen Prozess, um die betroffene Bewertung schnell von deiner Webseite entfernen zu können. Ein Tipp: Erstelle einfach ein neues „Customer Voice“-Widget und ersetze den alten Widget-Code in deiner Webseite durch den neuen.

8. Auf „Widget-Code erzeugen“ klicken. Die Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ öffnet sich.
   

Damit hast du den Widget-Code erfolgreich erzeugt. Nun muss der Widget-Code in deine Webseite integriert werden.

Schritt 2: Einbindung des Widget-Codes in deine Webseite

Um Widgets auf deiner Webseite anzuzeigen, ist die Einbindung von HTML- und JavaScript-Code im Head und im Body deines Webseiten-HTMLs erforderlich. Die hierfür notwendigen Code-Schnipsel findest du in der Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“, die sich nach der Erzeugung des Widget-Codes öffnet.

Du verfügst nicht über die nötigen Kenntnisse, um den Widget-Code in dein Webseiten-HTML einzufügen? Dann klicke auf „Alle Anweisungen kopieren“. Öffne anschließend ein Textdokument deiner Wahl und füge den kopierten Widget-Code in das Textdokument ein. Sende das Textdokument anschließend an die Admins deiner Webseite.

Du möchtest den Widget-Code selbst in das HTML deiner Webseite einbinden? Dann folge diesen Schritten:

1. Auf das Dokumentensymbol im oberen Codefeld klicken, um den Code-Schnipsel in deinen Zwischenspeicher zu kopieren.
   
2. Innerhalb deines Webseiten-HTMLs den Head-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel in den Head-Abschnitt einfügen.

3. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Klicke auf das Dokumentensymbol im unteren Codefeld, um den Code-Schnipsel in deinen Zwischenspeicher zu kopieren.
   
4. Öffne innerhalb des HTMLs deiner Webseite den Body-Abschnitt. Füge den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt ein, an der du das Widget platzieren möchtest.
5. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Klicke auf „Widget-Konfiguration abschließen“.
   

Damit hast du das Widget erfolgreich in deine Webseite eingebunden.

Wie lange ist der Code aktiv?

Wenn du den Code generiert und die Widget-Konfiguration abgeschlossen hast, findest du das erstellte Widget in der Übersicht „Manage my widgets“. Du erreichst die Übersicht durch einen Klick auf „Widgets verwalten“.

Der JavaScript-Code ist unbefristet aktiv, unabhängig davon, ob du ihn bereits implementiert hast oder nicht. Du kannst dir also Zeit mit der Implementierung lassen.

Sollte etwas mit dem Kopieren des Codes nicht funktioniert haben, ist das auch kein Problem. Du kannst den Code aus dem aktiven Widget einfach erneut kopieren. Klicke hierfür auf den Button „Code anzeigen“ des gewünschten Widgets.

Deaktiviert wird der Code, wenn du das Widget über den „Löschen“-Button aus deinen aktiven Widgets entfernst. Bis zur Entfernung des Codes aus deinem Webseite-HTML wird an der Stelle dann eine leere Fläche angezeigt.

Was du beim Entfernen von Widgets beachten musst, liest du hier:
Wie entferne ich ein Widget von meiner Webseite?

Warum ist der Code-Schnipsel für den Webseiten-Head bei jedem Widget gleich?

Der JavaScript-Code, den du in den Head deiner Webseite implementieren musst, wird nur ein einziges Mal benötigt. Deswegen reicht es für die Implementierung jedes weiteren Widgets, den HTML-Code bzw. den DIV-Container für das Widget an der entsprechenden Stelle im Body der Webseite einzufügen.

Das hat den Vorteil, dass auch Personen ohne Administrationsrechte Widgets hinzufügen können, sofern sie Webseiten-Content bearbeiten dürfen. Dein Marketing-Team kann also nach der einmaligen Implementierung des JavaScript-Schnipsels eigenständig agieren. Widgets sind somit bereits nach wenigen Minuten für Besucherinnen und Besucher deiner Webseite sichtbar.

Zeigst du deine Sterne auch schon auf Google & Co.? Hier erfährst du mehr:
- Was ist die Google Integration?
- Warum ist es sinnvoll, die Note auf anderen Bewertungsplattformen zu optimieren?