Google-Bewertungen in TYPO3 einbinden

In TYPO3 binden Sie Google-Bewertungen mit dem Inhaltselement „Reines HTML“ ein, das Sie im Seitenmodul unter „Besondere Elemente“ finden. Eine Extension ist dafür nicht nötig. Für eine seitenweite Einbindung legen Sie den Code im Template ab, und wenn Ihre Website eine Content Security Policy nutzt, geben Sie die Widget-Domain dort frei.

In 60 Sekunden erklärt

Sie erstellen bei SterneWidget kostenlos ein Widget und kopieren den Code. Im TYPO3-Backend öffnen Sie das Modul „Seite“, klicken in der gewünschten Spalte auf „+ Inhalt“ und wählen im Reiter „Besondere Elemente“ das Element „Reines HTML“. Code in das Feld einfügen, speichern – fertig. Fehlt das Element, hat Ihre Agentur es für Redakteure ausgeblendet; dann braucht es einen Administrator. Bei aktiver Content Security Policy (in TYPO3 v13 für das Frontend optional) muss app.sterne-widget.de erlaubt sein.

Die allgemeine Anleitung für alle Website-Systeme finden Sie unter Google-Bewertungen auf der Website einbinden.

Schritt für Schritt: Inhaltselement „Reines HTML“

1. Widget-Code kopieren

Melden Sie sich bei SterneWidget an, suchen Sie Ihr Unternehmen, wählen Sie ein Design und hinterlegen Sie die Domain Ihrer TYPO3-Website. 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. Inhaltselement anlegen

1. Öffnen Sie im TYPO3-Backend links das Modul „Seite“ und wählen Sie im Seitenbaum die gewünschte Seite.
2. Klicken Sie in der passenden Spalte auf „+ Inhalt“.
3. Wechseln Sie im Assistenten zum Reiter „Besondere Elemente“ und wählen Sie „Reines HTML“ (englisch: „Plain HTML“).

3. Code einfügen und speichern

Fügen Sie den Widget-Code in das Feld „HTML-Code“ ein. Speichern Sie das Element und leeren Sie bei Bedarf den Frontend-Cache, damit die Seite neu erzeugt wird.

4. Im Frontend prüfen

Öffnen Sie die Seite im Frontend. 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. Das gilt auch für Staging- oder Entwicklungsumgebungen unter einer anderen Domain.

„Reines HTML“ fehlt in der Auswahl?

Viele Agenturen blenden das Element für Redakteure aus, weil darüber beliebiger Code auf die Website gelangt – in TYPO3 passiert das typischerweise per Page TSconfig oder über die Rechte der Backend-Benutzergruppe. Sie haben dann zwei Wege:

• Administrator legt das Element an: Ein Admin fügt das „Reines HTML“-Element mit dem Widget-Code einmal an der gewünschten Stelle ein.
• Einbindung im Template: Die Agentur bindet die Script-Zeile über TypoScript oder das Fluid-Template ein und stellt den div-Platzhalter an einer festen Stelle bereit, zum Beispiel im Footer.

Seitenweit einbinden (für Integratoren)

Für ein Bewertungs-Badge auf allen Seiten gehört der Code ins Template statt in ein Inhaltselement. Ein einfacher Weg per TypoScript:

page.footerData.1700 = TEXT
page.footerData.1700.value = <script async src="https://app.sterne-widget.de/api/widget.js" bui="IHR-WIDGET-TOKEN" crossorigin="anonymous"></script>

Den Platzhalter <div id="sterne-widget" data-bui="IHR-WIDGET-TOKEN"></div> setzen Sie im Fluid-Layout an die gewünschte Stelle, etwa in den Footer-Partial. Die Nummer 1700 ist frei wählbar, sie darf nur nicht mit bestehenden footerData-Einträgen kollidieren.

Content Security Policy (TYPO3 v12/v13)

Seit TYPO3 v12 gibt es eine eingebaute Unterstützung für Content Security Policy. Für das Frontend ist sie in v13 standardmäßig ausgeschaltet und wird per Feature-Schalter oder Site-Konfiguration aktiviert. Ist sie aktiv, blockiert der Browser fremde Scripts – das Widget bleibt leer, und die Browser-Konsole meldet einen CSP-Verstoß.

Erlauben Sie dann https://app.sterne-widget.de für Scripts, Datenabrufe und Bilder, zum Beispiel in der Datei config/sites/<site>/csp.yaml:

inheritDefault: true
mutations:
  - mode: extend
    directive: script-src
    sources:
      - https://app.sterne-widget.de
  - mode: extend
    directive: connect-src
    sources:
      - https://app.sterne-widget.de
  - mode: extend
    directive: img-src
    sources:
      - https://app.sterne-widget.de

Die genaue Syntax hängt von Ihrer TYPO3-Version ab; maßgeblich ist die CSP-Dokumentation von TYPO3. Wird die CSP nicht von TYPO3, sondern vom Webserver gesetzt, tragen Sie die Domain dort ein.

Welche Darstellung passt zu TYPO3-Websites?

TYPO3 läuft oft bei Praxen, Kanzleien, Hotels, Verbänden und Mittelständlern mit vielen Unterseiten. Bewährt haben sich:

• Rating Badge im Footer-Template: auf jeder Seite sichtbar, ohne die Redaktion zu belasten.
• Kompakt auf Kontakt- und Standortseiten.
• Slider mit Bewertungstexten (Add-on „Review Text Widget“) auf der Startseite oder einer Referenzen-Seite.

Bei mehreren Standorten legen Sie pro Standort ein eigenes Widget an und binden es auf der jeweiligen Standortseite ein.

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.

Gerade bei TYPO3-Websites mit Consent-Management lohnt der Blick: Weil das Widget keine Besucherdaten an Google überträgt, müssen Sie es nicht hinter die Einwilligung legen.

FAQ

Brauche ich eine TYPO3-Extension für Google-Bewertungen? Nein. Das Inhaltselement „Reines HTML“ gehört zum TYPO3-Core. Sie fügen den Widget-Code dort ein und speichern.

Wo finde ich „Reines HTML“? Im Modul Seite über „+ Inhalt“ im Reiter „Besondere Elemente“. Fehlt das Element, wurde es für Ihre Benutzergruppe ausgeblendet – wenden Sie sich an Ihren Administrator oder Ihre Agentur.

Das Widget bleibt leer – woran liegt das? Häufige Ursachen sind eine Content Security Policy, die app.sterne-widget.de nicht erlaubt, eine abweichende Domain (etwa Staging) oder ein nicht geleerter Cache. Die Browser-Konsole zeigt meist den genauen Grund.

Funktioniert das mit TYPO3 v11, v12 und v13? Ja. „Reines HTML“ gibt es in allen aktuellen TYPO3-Versionen. Ab v12 sollten Sie zusätzlich prüfen, ob für das Frontend eine Content Security Policy aktiv ist.

Kann ich das Widget mehrsprachig nutzen? Das Widget zeigt die Bewertungen so, wie sie bei Google stehen. Sie können dasselbe Element in allen Sprachversionen Ihrer TYPO3-Seite verwenden.