Google-Bewertungen mit Elementor einbinden – ohne Zusatz-Plugin
In Elementor binden Sie Google-Bewertungen mit dem HTML-Widget ein, das auch in der kostenlosen Elementor-Version enthalten ist: Widget an die gewünschte Stelle ziehen, Code einfügen, Seite aktualisieren. Ein weiteres WordPress-Plugin brauchen Sie dafür nicht.
In 60 Sekunden erklärt
Sie erstellen bei SterneWidget kostenlos ein Widget für Ihr Google-Unternehmensprofil und kopieren den Code. In Elementor suchen Sie in der Widget-Liste nach „HTML“ (Symbol </>), ziehen es per Drag-and-drop in Ihr Layout und fügen den Code in das Textfeld ein. Nach „Aktualisieren“ zeigt die Seite Ihre Google-Sterne – responsive und unabhängig vom Theme-Design. Für alle Seiten auf einmal nutzen Sie mit Elementor Pro eine Footer- oder Header-Vorlage im Theme Builder.
Die allgemeine Anleitung für alle Website-Systeme finden Sie unter Google-Bewertungen auf der Website einbinden, die Varianten ohne Elementor (Block-Editor, Theme-Dateien) in der WordPress-Anleitung.
Schritt für Schritt: HTML-Widget in Elementor
1. Widget-Code bei SterneWidget kopieren
Melden Sie sich bei SterneWidget an, suchen Sie Ihr Unternehmen, wählen Sie ein Design und hinterlegen Sie die Domain Ihrer WordPress-Seite. Dann klicken Sie auf „Code kopieren“:
<div id="sterne-widget" data-bui="IHR-WIDGET-TOKEN"></div>
<script async src="https://app.sterne-widget.de/api/widget.js" bui="IHR-WIDGET-TOKEN" crossorigin="anonymous"></script>
IHR-WIDGET-TOKEN steht hier nur als Platzhalter. Den fertigen Code mit Ihrem Token kopieren Sie im SterneWidget-Dashboard über „Code kopieren“ – er ist bereits vollständig, Sie müssen nichts anpassen.
2. Seite mit Elementor bearbeiten
Öffnen Sie in WordPress unter „Seiten“ die gewünschte Seite und klicken Sie auf „Mit Elementor bearbeiten“.
3. HTML-Widget einfügen
Suchen Sie im linken Bereich in der Widget-Liste nach HTML – das Widget mit dem Symbol </>. Ziehen Sie es an die Stelle im Layout, an der die Bewertungen erscheinen sollen; eine blaue Linie zeigt die Einfügeposition.
4. Code einfügen
Fügen Sie den kopierten Code in das Textfeld des HTML-Widgets ein. Elementor erlaubt im HTML-Widget ausdrücklich HTML und JavaScript.
5. Aktualisieren und prüfen
Klicken Sie auf „Veröffentlichen“ bzw. „Aktualisieren“ und öffnen Sie die Seite in einem neuen Tab. Im Editor zeigt Elementor den Inhalt des HTML-Widgets oft schon an, verlässlich ist aber erst die veröffentlichte Seite. Das Widget erscheint nur auf der Domain, die Sie beim Anlegen im Dashboard hinterlegt haben (Subdomains inklusive). Läuft die Vorschau Ihres Editors unter einer anderen Adresse, bleibt der Bereich dort leer – prüfen Sie das Ergebnis deshalb auf der veröffentlichten Seite.
Auf allen Seiten anzeigen
- Elementor Pro – Theme Builder: Legen Sie das HTML-Widget in Ihre Footer- oder Header-Vorlage. Dann erscheint das Bewertungs-Badge auf jeder Seite, ohne dass Sie es einzeln einfügen.
- Elementor Pro – Benutzerdefinierter Code: Unter „Elementor“ › „Benutzerdefinierter Code“ (Custom Code) lässt sich die Script-Zeile seitenweit im Head laden. Der
div-Platzhalter muss trotzdem dort stehen, wo das Widget erscheinen soll – etwa in einem HTML-Widget der Footer-Vorlage. - Elementor (kostenlos): Speichern Sie den Abschnitt mit dem HTML-Widget als Vorlage und fügen Sie ihn auf den gewünschten Seiten ein. Alternativ nutzen Sie den Footer-Bereich Ihres Themes, falls er Widgets erlaubt.
Elementor-„Bewertungen“-Widget oder SterneWidget?
Elementor Pro bringt ein Widget namens „Reviews“ mit. Die Einträge darin pflegen Sie von Hand – es ist ein Testimonial-Slider, keine Verbindung zu Google. Wenn Kunden neue Google-Bewertungen schreiben, ändert sich dort nichts. SterneWidget holt Sterne, Anzahl und auf Wunsch die Bewertungstexte automatisch von Google und hält sie aktuell, siehe Google-Bewertungen automatisch aktualisieren.
Welche Darstellung wohin?
- Rating Badge im Hero-Bereich oder neben dem Kontakt-Button: Sterne und Anzahl sofort sichtbar.
- Kompakt oder Minimal im Footer oder in einer schmalen Spalte.
- Slider mit Bewertungstexten (Add-on „Review Text Widget“) in einem eigenen Abschnitt in voller Breite, zum Beispiel vor dem Kontaktformular.
Das Widget nutzt Shadow DOM und übernimmt deshalb keine Stile Ihres Themes oder von Elementor. Abstände und Breite steuern Sie wie gewohnt über den Container, in dem das HTML-Widget liegt.
Typische Probleme
Das Widget erscheint erst nach einem Klick oder Scrollen. Optimierungs-Plugins mit Funktionen wie „JavaScript verzögern“ (zum Beispiel in WP Rocket) halten Scripts bis zur ersten Interaktion zurück. Tragen Sie app.sterne-widget.de bzw. widget.js in die Ausnahmeliste dieser Funktion ein.
Das HTML-Widget fehlt in der Liste. Elementor erlaubt das HTML-Widget standardmäßig nur Administratoren, weil darüber beliebiger Code auf die Seite gelangt. Melden Sie sich als Administrator an oder lassen Sie die Rolle im Rollen-Manager freischalten.
Der Kasten bleibt leer. Prüfen Sie, ob die hinterlegte Domain zu Ihrer Website passt (ohne https:// und www) und ob der Code vollständig eingefügt wurde.
DSGVO
SterneWidget lädt die Bewertungen serverseitig und liefert sie aus der EU aus – der Browser Ihrer Besucher nimmt dabei keinen Kontakt zu Google auf. Ein zusätzliches Cookie-Banner für das Widget ist deshalb nicht nötig. Nennen Sie SterneWidget in Ihrer Datenschutzerklärung als eingesetzten Dienst. Mehr dazu: Google-Bewertungen DSGVO-konform auf der Website.
Viele Google-Review-Plugins für WordPress und Elementor laden Bewertungen, Profilbilder oder Schriften direkt von Google-Servern in den Browser. Prüfen Sie bei solchen Lösungen, ob dabei Daten Ihrer Besucher an Google gehen.
FAQ
Brauche ich Elementor Pro, um Google-Bewertungen einzubinden? Nein. Das HTML-Widget ist in der kostenlosen Elementor-Version enthalten. Elementor Pro brauchen Sie nur, wenn Sie das Widget über den Theme Builder automatisch auf allen Seiten zeigen möchten.
Brauche ich ein zusätzliches WordPress-Plugin? Nein. Der Code von SterneWidget kommt direkt in das HTML-Widget. Das hält die Website schlank und vermeidet Plugin-Updates.
Warum lädt das Widget erst beim Scrollen? Vermutlich verzögert ein Optimierungs-Plugin JavaScript bis zur ersten Interaktion. Nehmen Sie app.sterne-widget.de bzw. widget.js von der Verzögerung aus.
Kann ich das Elementor-Widget „Reviews“ nutzen? Das Reviews-Widget von Elementor Pro zeigt nur Einträge, die Sie von Hand pflegen. Es ist nicht mit Google verbunden und aktualisiert sich nicht automatisch.
Funktioniert das mit Containern und Flexbox-Layouts? Ja. Das HTML-Widget lässt sich in jeden Container setzen, das Bewertungs-Widget passt sich an dessen Breite an.