> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/marketing/bewertungs-widget-auf-websites-einbinden.md).

# Bewertungs-Widget auf Websites einbinden

Ein Bewertungs-Widget zeigt ausgewählte echte Kundenstimmen direkt auf einer Website. Es macht Erfahrungen dort sichtbar, wo Besucherinnen und Besucher gerade entscheiden, ob sie Kontakt aufnehmen oder sich weiter informieren möchten.

Dieser Artikel erklärt **den technischen Einbau und die Kontrolle nach der Veröffentlichung**. Für Auswahl, Text, Farben und Darstellung des Widgets verwende zuerst die Anleitung [Bewertungen auf der Website anzeigen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/marketing/bewertungen-auf-der-website-anzeigen).

## Was automatisch passiert – und was nicht

Ein einmal gespeichertes Widget kann auf einer eigenen Seite oder auf einer externen Website eingebunden werden. Wenn später neue Bewertungen aus den verbundenen Quellen zum gewählten Widget passen, können sie entsprechend dessen Einstellungen erscheinen. Änderungen an Inhalt oder Gestaltung eines bereits eingebundenen Widgets werden nach dem Speichern übernommen; der vorhandene Einbaucode muss dafür normalerweise nicht erneut eingefügt werden.

Das Widget entscheidet jedoch nicht selbst, **wo** es auf einer Seite sinnvoll steht. Du bestimmst den Platz, veröffentlichst die Seite und prüfst das Ergebnis. Eine gut aussehende Vorschau im Editor ersetzt diesen Test nicht.

## Voraussetzungen

Bereite vor dem Einbau diese Punkte vor:

* Mindestens eine Bewertungsquelle ist verbunden und es liegen sichtbare Bewertungen vor. Hilfe dazu: [Bewertungsquellen verbinden und auswerten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/marketing/bewertungsquellen-verbinden-und-auswerten).
* Das gewünschte Widget ist im Bereich **Bewertungen > Widgets** erstellt, verständlich benannt und gespeichert.
* Du darfst die Zielseite bearbeiten und veröffentlichen.
* Bei einer externen Website weißt du, wo dort ein **HTML-** oder **Code-Block** eingefügt werden darf. Ist das nicht möglich, kann der Einbaucode dort nicht eingesetzt werden.
* Du hast die veröffentlichte Adresse der Zielseite zur Hand. Sie wird für den abschließenden Test benötigt.

> **Warum das wichtig ist:** Ohne gespeichertes Widget gibt es keinen eindeutigen Inhalt zum Einbauen. Ohne veröffentlichte Zielseite lässt sich nicht prüfen, ob Besucherinnen und Besucher die Bewertungen tatsächlich sehen.

## Den passenden Einbauweg wählen

Es gibt zwei saubere Wege. Entscheidend ist nicht, welcher schneller wirkt, sondern welches Widget auf der Seite erscheinen soll.

| Situation                                                                                                                                 | Geeigneter Weg                                                                         | Praktische Folge                                                                                          |
| ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Auf einer Seite soll genau das als Standard markierte Widget erscheinen.                                                                  | Füge im Seiteneditor das Element **Bewertungs-Widget** hinzu.                          | Schnell und ohne Code. Das Element verwendet immer das Standard-Widget.                                   |
| Du möchtest ein bestimmtes Widget einsetzen, das nicht das Standard-Widget ist.                                                           | Kopiere den Einbaucode dieses Widgets und füge ihn in einen Code- oder HTML-Block ein. | Du legst pro Platzierung genau fest, welches Widget gezeigt wird.                                         |
| Auf einer Seite sollen mehrere verschiedene Widgets stehen, etwa ein Raster auf der Startseite und ein schmales Widget im Kontaktbereich. | Verwende für jedes gewünschte Widget einen eigenen Einbaucode.                         | Ein normales Bewertungs-Widget-Element reicht dafür nicht aus, weil es immer das Standard-Widget anzeigt. |
| Die Zielseite liegt außerhalb von ONE LOOP.                                                                                               | Nutze den Einbaucode in einem dort vorgesehenen Code- oder HTML-Bereich.               | Die externe Website muss das Einfügen von eigenem HTML oder Code erlauben.                                |

## Variante 1: Standard-Widget im Seiteneditor einfügen

Diese Variante eignet sich für eine eigene Seite, wenn das als Standard markierte Widget auch wirklich gezeigt werden soll.

1. Öffne die Website und die Seite, auf der die Bewertungen erscheinen sollen.
2. Setze den Cursor an die Stelle, an der Besucherinnen und Besucher die Kundenstimmen erwarten würden. Häufig passt der Bereich nach einer Leistungsbeschreibung, vor einem Kontaktformular oder im Abschnitt „Erfahrungen“.
3. Füge im Seiteneditor das Element **Bewertungs-Widget** ein.
4. Prüfe in der Vorschau, ob ausreichend Platz vorhanden ist. Ein mehrspaltiges Raster braucht deutlich mehr Breite als eine kompakte Liste.
5. Speichere die Seite und veröffentliche sie.
6. Öffne anschließend die veröffentlichte Adresse in einem privaten Browserfenster und führe den Test aus dem Abschnitt „Veröffentlichung prüfen“ durch.

> **Wichtig:** Das Seiten-Element wählt nicht aus mehreren gespeicherten Widgets aus. Es zeigt das als Standard markierte Widget. Soll eine Seite bewusst ein anderes Widget verwenden, nutze die zweite Variante.

## Variante 2: Ein bestimmtes Widget per Einbaucode platzieren

Der Code ist der passende Weg für eine externe Website oder für mehrere unterschiedliche Widgets auf derselben Seite.

1. Öffne **Bewertungen > Widgets**.
2. Wähle das Widget aus, das an dieser Stelle erscheinen soll. Achte besonders auf den Namen und darauf, ob es das richtige Layout sowie die richtigen Bewertungsquellen enthält.
3. Öffne das **Code-Symbol**. Es erscheint ein Fenster mit dem Einbaucode und einer Auswahl für das Widget.
4. Kontrolliere die Auswahl im Fenster ein zweites Mal. Bei mehreren Widgets ist dies der entscheidende Schritt: Der Code muss zu genau dem Widget passen, das an dieser Stelle erscheinen soll.
5. Wähle **Code kopieren**.
6. Öffne die Zielseite:
   * In einer eigenen Website fügst du einen **Code-Block** ein.
   * In einer externen Website öffnest du den vom jeweiligen System vorgesehenen **HTML-** oder **Code-Bereich**.
7. Füge den Code unverändert ein. Ergänze keine zusätzlichen Zeichen, entferne keine Zeilen und kopiere ihn nicht in ein normales Textfeld.
8. Speichere und veröffentliche die Zielseite.
9. Öffne die veröffentlichte Seite außerhalb des Editors und prüfe die Darstellung.

Der Einbaucode enthält die technische Verbindung zum gespeicherten Widget. Wenn einzelne Teile fehlen oder verändert wurden, kann das Widget leer bleiben oder gar nicht laden. Nimm deshalb nur Änderungen am Widget selbst vor, nicht am eingefügten Code.

## Mehrere Widgets auf einer Seite sinnvoll einsetzen

Mehrere Widgets sind möglich, sollten aber eine klare Aufgabe haben. Ein Beispiel:

* Im oberen Bereich der Startseite steht ein kompakter Überblick mit wenigen starken Bewertungen.
* Im unteren Bereich folgt ein ausführlicheres Widget mit mehr Stimmen.
* Auf einer Unterseite für ein bestimmtes Angebot steht ein separates Widget, dessen Auswahl und Gestaltung zu diesem Angebot passt.

Für jede dieser Platzierungen öffnest du im Widget-Bereich zuerst das richtige Widget, kopierst anschließend dessen eigenen Code und fügst ihn in einen eigenen Code-Block ein. Wiederhole den Vorgang für jedes weitere Widget.

Vermeide mehrere automatisch wechselnde oder sehr große Bereiche direkt hintereinander. Sie erschweren das Lesen und können die eigentliche Botschaft der Seite verdrängen. Prüfe außerdem auf dem Smartphone, ob die Reihenfolge der Bereiche weiterhin verständlich bleibt.

## Was nach einer Änderung am Widget passiert

Gestaltung, Überschrift, sichtbare Bewertungsdaten und Auswahl der Quellen werden am gespeicherten Widget gepflegt. Speichere die Änderung dort. Die bestehenden Einbindungen dieses Widgets erhalten danach die neue Fassung automatisch.

Das ist praktisch, hat aber eine wichtige Konsequenz: Eine Änderung kann an mehreren Stellen gleichzeitig sichtbar werden. Prüfe deshalb vor dem Speichern:

1. Wo ist dieses Widget bereits eingebunden?
2. Soll die Änderung überall gleich wirken?
3. Sind Inhalt und Darstellung für alle diese Seiten geeignet?

Möchtest du für eine einzelne Seite eine abweichende Darstellung, erstelle oder verwende ein separates Widget mit eigenem Namen und binde dessen eigenen Code ein. So bleibt die Änderung auf die gewünschte Seite begrenzt.

## Veröffentlichung prüfen

Führe diesen Test direkt nach dem Veröffentlichen durch. Verwende möglichst ein privates Browserfenster, damit du keine alte Version aus deinem Browser-Cache siehst.

1. Öffne die veröffentlichte Adresse, nicht die Vorschau im Editor.
2. Scrolle bis zur vorgesehenen Position. Das Widget muss dort vollständig laden und darf nicht nur als leerer Bereich erscheinen.
3. Vergleiche Überschrift, Anzahl der sichtbaren Bewertungen und Layout mit deinem gespeicherten Widget.
4. Wenn du mehrere Widgets eingesetzt hast, prüfe jeden Bereich einzeln. Achte darauf, dass nicht versehentlich überall das Standard-Widget angezeigt wird.
5. Öffne die Seite auf einem Smartphone oder verkleinere das Browserfenster. Texte, Sterne, Schaltflächen und Karten dürfen nicht abgeschnitten sein.
6. Prüfe einen vorhandenen Link oder eine Schaltfläche im Widget, sofern du diese aktiviert hast.
7. Teste die Seite zusätzlich ohne eingeloggten Zugang. Nur so siehst du, was echte Besucherinnen und Besucher sehen.
8. Notiere bei einem Fehler die Seitenadresse, den verwendeten Browser, die Uhrzeit und einen Screenshot. Damit lässt sich die Ursache gezielter eingrenzen.

## Häufige Probleme und klare Lösungen

| Beobachtung                                                                  | Wahrscheinliche Ursache                                                                                                                           | So gehst du vor                                                                                                                                    |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Es wird ein anderes Widget als erwartet angezeigt.                           | Es wurde das Seiten-Element verwendet; dieses zeigt immer das Standard-Widget.                                                                    | Für ein bestimmtes anderes Widget dessen Code kopieren und in einen Code-Block einfügen.                                                           |
| Der Bereich bleibt leer.                                                     | Der Code liegt in einem Textfeld, wurde verändert oder die externe Seite unterstützt keinen Code-Bereich.                                         | Code vollständig neu kopieren, in einen echten HTML- oder Code-Block einfügen und erneut veröffentlichen.                                          |
| Auf derselben Seite erscheinen mehrere Widgets gleich.                       | Für alle Bereiche wurde derselbe Code verwendet oder das Standard-Element mehrfach eingesetzt.                                                    | Für jedes gewünschte Widget die Auswahl im Code-Fenster prüfen und den dazugehörigen Code getrennt einfügen.                                       |
| Die Vorschau ist richtig, die öffentliche Seite zeigt noch die alte Fassung. | Die Seite oder das Widget wurde noch nicht gespeichert beziehungsweise veröffentlicht; manchmal zeigt der Browser noch eine gespeicherte Ansicht. | Widget speichern, Seite veröffentlichen und anschließend im privaten Browserfenster neu laden.                                                     |
| Auf Mobilgeräten wirkt das Widget zu breit oder unruhig.                     | Das gewählte Layout oder die Platzierung braucht mehr Raum als vorhanden ist.                                                                     | Im Widget die Darstellung vereinfachen oder das Widget in einen breiteren, eigenen Abschnitt verschieben. Danach erneut auf dem Smartphone testen. |
| Neue Bewertungen erscheinen nicht wie erwartet.                              | Die Quellen, Filter oder sichtbaren Einstellungen des Widgets passen nicht zur neuen Bewertung.                                                   | Bewertungsquellen und Einstellungen des Widgets prüfen; danach die öffentliche Seite erneut testen.                                                |

## Praxisbeispiel: Startseite und Kontaktseite unterschiedlich nutzen

Ein Dienstleistungsbetrieb möchte auf der Startseite einen kurzen Vertrauensbeweis zeigen und auf der Kontaktseite ausführlichere Kundenstimmen.

1. Er erstellt zwei Widgets: **„Startseite kompakt“** und **„Kontaktseite ausführlich“**.
2. Für die Startseite markiert er das kompakte Widget als Standard und fügt im Seiteneditor einmal das Element **Bewertungs-Widget** ein.
3. Für die Kontaktseite öffnet er das ausführliche Widget, wählt im Code-Fenster dieses Widget aus und kopiert dessen Einbaucode.
4. Er fügt den Code auf der Kontaktseite in einen eigenen Code-Block ein.
5. Nach dem Speichern veröffentlicht er beide Seiten.
6. Im privaten Browserfenster prüft er die Startseite: Dort darf das kompakte Standard-Widget erscheinen. Auf der Kontaktseite muss dagegen die ausführliche Fassung sichtbar sein.
7. Zum Schluss öffnet er beide Seiten auf dem Smartphone. Erst wenn weder Karten noch Schaltflächen abgeschnitten sind, ist der Einbau abgeschlossen.

## Grenzen des Einbaus

Der Einbaucode macht aus einer externen Seite keine ONE LOOP-Seite. Ob und wo du dort einen HTML- oder Code-Bereich verwenden kannst, richtet sich nach dem System der externen Website und deinen dortigen Berechtigungen.

Ein Widget zeigt nur die Bewertungen und Einstellungen, die in ihm gespeichert sind. Es ersetzt weder das Verbinden von Bewertungsquellen noch die Prüfung, welche Inhalte auf deiner Website erscheinen sollen. Bearbeite den Code nicht, um Inhalte zu erzwingen; nimm Änderungen stattdessen im Widget vor und teste die veröffentlichte Seite erneut.

## Verwandte Anleitungen

* [Bewertungen auf der Website anzeigen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/marketing/bewertungen-auf-der-website-anzeigen) – Widget gestalten, Inhalt auswählen und Vorschau prüfen.
* [Bewertungsquellen verbinden und auswerten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/marketing/bewertungsquellen-verbinden-und-auswerten) – Voraussetzungen schaffen, damit Bewertungen im Widget erscheinen können.