Wie füge ich Widgets auf meiner Webseite hinzu?

In eTrusted stehen Ihnen einige moderne Widgets zur Verfügung, mit denen Sie Ihre Trusted Shops Gesamtnote und einzelne Bewertungen prominent auf Ihrer Webseite darstellen können. Nutzen Sie eTrusted Widgets, um Besucherinnen und Besucher von Ihrem Unternehmen zu überzeugen.

Vertrauen ist die wichtigste Währung im Internet. Indem Sie Ihre positive Gesamtbewertung gut sichtbar auf Ihrer Webseite zeigen, wecken Sie Vertrauen und steigern dadurch Ihren Umsatz.

Wo kann ich mir verfügbare Widgets ansehen?

Alle verfügbaren Widgets finden Sie 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 können Sie zwischen verschiedenen Widget-Varianten wählen und einzelne Widgets außerdem an Ihre Wünsche anpassen.

Innerhalb der Widget-Bibliothek sehen Sie eine Vorschau zu jedem Widget. So können Sie entscheiden, welches Widget sich am besten für Ihre Webseite eignet und an welcher Stelle es besonders effektiv platziert werden kann.

Jedes Widget ist bereits für Desktop und Mobile optimiert, sodass Sie sich keine Sorgen um die korrekte Darstellung auf den Geräten Ihrer Nutzer*innen machen müssen. 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.

Sie möchten wissen, wie Widgets auf Ihrer Webseite aussehen? Finden Sie 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 Ihrer Kundschaft darüber bestimmen sollen, ob das Widget im Dark Mode angezeigt wird.
   
4. Möchten Sie eine andere Farbe für Ihre 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öchten Sie im Widget die Schriftart nutzen, die auch Ihre Webseite verwendet? Dann ein Häkchen bei „Schriftart Ihrer Website verwenden“ setzen.
   
6. Ein Häkchen bei „Bilder anzeigen” setzen, wenn von Ihrer Kundschaft hochgeladene Produktfotos im Widget angezeigt werden sollen.

7. Binden Sie 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 Ihren 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 Ihrer Kundschaft wird vom Widget automatisch anonymisiert. Dennoch kann es vorkommen, dass sich Ihre Kundschaft nachträglich gegen die prominente Anzeige ihrer Bewertung auf Ihrer Webseite ausspricht.
   Entwickeln Sie für diesen Fall einen Prozess, um die betroffene Bewertung schnell von Ihrer Webseite entfernen zu können. Ein Tipp: Erstellen Sie einfach ein neues „Customer Voice“-Widget und ersetzen Sie den alten Widget-Code in Ihrer Webseite durch den neuen.

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

Damit haben Sie den Widget-Code erfolgreich erzeugt. Nun muss der Widget-Code in Ihre Webseite integriert werden.

Schritt 2: Einbindung des Widget-Codes in Ihre Webseite

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

Sie verfügen nicht über die nötigen Kenntnisse, um den Widget-Code in Ihr Webseiten-HTML einzufügen? Dann klicken Sie auf „Alle Anweisungen kopieren“. Öffnen Sie anschließend ein Textdokument Ihrer Wahl und fügen Sie den kopierten Widget-Code in das Textdokument ein. Senden Sie das Textdokument anschließend an die Admins Ihrer Webseite.

Sie möchten den Widget-Code selbst in das HTML Ihrer Webseite einbinden? Dann folgen Sie diesen Schritten:

1. Auf das Dokumentensymbol im oberen Codefeld klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
   
2. Innerhalb Ihres 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. Auf das Dokumentensymbol im unteren Codefeld klicken, um den Code-Schnipsel in Ihren Zwischenspeicher zu kopieren.
   
4. Innerhalb des HTMLs Ihrer Webseite den Body-Abschnitt öffnen. Den zwischengespeicherten Code-Schnipsel an der Stelle in den Body-Abschnitt einfügen, an der Sie das Widget platzieren möchten.
5. Zur Übersicht „Wie Sie das Widget in Ihrer Webseite integrieren“ zurückkehren. Auf „Widget-Konfiguration abschließen“ klicken.
   

Damit haben Sie das Widget erfolgreich in Ihre Webseite eingebunden.

Wie lange ist der Code aktiv?

Wenn Sie den Code generiert und die Widget-Konfiguration abgeschlossen haben, finden Sie das erstellte Widget in der Übersicht „Manage my widgets“. Sie erreichen die Übersicht durch einen Klick auf „Widgets verwalten“.

Der JavaScript-Code ist unbefristet aktiv, unabhängig davon, ob Sie ihn bereits implementiert haben oder nicht. Sie können sich also Zeit mit der Implementierung lassen.

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

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

Was Sie beim Entfernen von Widgets beachten müssen, lesen Sie 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 Sie in den Head Ihrer Webseite implementieren müssen, 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. Ihr 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 Ihrer Webseite sichtbar.

Zeigen Sie Ihre Sterne auch schon auf Google & Co.? Hier erfahren Sie mehr:
- Was ist die Google Integration?
- Warum ist es sinnvoll, die Note auf anderen Bewertungsplattformen zu optimieren?