ReviewForest Widgets in Shopware 6 einbinden
Egal, welches unserer 7 Widgets du nutzen möchtest, vom Baumzähler Widget über das Testimonial Widget bis hin zu den Abzeichen Widgets: Die Einbindung in deinen Shopware 6 Shop (Version 6.7.x) funktioniert immer nach dem gleichen Prinzip.
Dein Widget-Code (Struktur)
Jedes Widget besteht aus zwei Bausteinen, die du zusammen in deinen Shop kopierst:
- Das Skript: Es lädt die Funktionen von unseren Servern.
- Der Platzhalter (Div): Dieser sagt Shopware genau, an welcher Stelle das Widget erscheinen soll.
So sieht die Struktur aus:
HTML
<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-DEINE-INDIVIDUELLE-ID"></div>
Schritt für Schritt: Einbindung über die Erlebniswelten
Das ist der einfachste Weg, wenn du das Widget flexibel auf der Startseite oder in einer Kategorie platzieren willst.
- Admin-Bereich öffnen: Logge dich in dein Shopware-Backend ein.
- Layout wählen: Gehe zu Inhalte > Erlebniswelten und öffne das Layout deiner Seite.
- Block hinzufügen: Klicke auf das Plus-Symbol (+) und wähle in der Kategorie „Text“ einen einfachen Text-Block aus. Ziehe ihn an die Stelle, an der das Widget auftauchen soll.
- Code-Modus aktivieren:
- Klicke auf das neu platzierte Textfeld. In der Werkzeugleiste oben findest du das Symbol
</>(Quellcode). Klicke darauf. - Widget einfügen: Lösche eventuellen Beispieltext und füge deinen kompletten Widget-Code (Skript + Div) dort ein.
- Speichern & Prüfen: Klicke oben rechts auf Speichern. Lade deinen Shop im Browser neu, um das Ergebnis zu sehen.
Worauf du achten solltest
🛡️ Der "Sicherheits-Check" (CSP)
Manche Shops haben sehr strenge Sicherheitsregeln (Content Security Policy). Wenn dein Widget nicht erscheint, blockt Shopware das Laden von externen Inhalten.
- Lösung: Bitte deine Technik, die Domain
reviewforest.orgauf die „Whitelist“ (Erlaubt-Liste) zu setzen.
🍪 Datenschutz & Cookies
Da das Widget Daten von ReviewForest lädt, solltest du es in deinem Cookie-Einwilligungs-Tool (Consent Manager) hinterlegen. So bist du auf der sicheren Seite, was die DSGVO angeht.
📱 Ansicht auf dem Handy
Unsere Widgets sind „responsive“, passen sich also automatisch an. Falls es auf dem Smartphone doch mal etwas zu breit wirkt, kann dein Admin mit einer Zeile CSS-Code (z. B. max-width: 100%;) nachhelfen, damit alles perfekt sitzt.
Profi-Tipp: Das Widget global im Footer einbinden
Wenn du möchtest, dass dein ReviewForest-Widget auf jeder Seite deines Shops (unten über dem Impressum oder den Zahlungsarten) erscheint, musst du eine kleine Anpassung am Design-Code (Theme) vornehmen.
Voraussetzung: Du solltest Zugriff auf die Dateien deines Shops haben (per FTP oder über deine Entwickler-Agentur) und ein eigenes Theme nutzen (keine Änderungen direkt im "Default"-Theme von Shopware vornehmen!).
Schritt 1: Die richtige Datei finden
Navigiere in deinem Shop-Verzeichnis zu folgendem Pfad:
IHR_THEME/src/Resources/views/storefront/layout/footer/footer.html.twig
Falls die Datei dort noch nicht existiert, erstelle sie einfach. Sie dient dazu, den Standard-Footer von Shopware zu erweitern.
Schritt 2: Den Code einfügen
Kopiere den folgenden Block in die Datei. Dieser sorgt dafür, dass dein Widget an der richtigen Stelle erscheint, ohne den Rest des Footers zu löschen:
Twig
{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}
{% block layout_footer_navigation %}
{# Der ursprüngliche Footer-Inhalt bleibt erhalten #}
{{ parent() }}
{# Hier betten wir dein ReviewForest Widget ein #}
<div class="container">
<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-DEINE-INDIVIDUELLE-ID" style="margin-top: 20px; text-align: center;"></div>
</div>
{% endblock %}
Schritt 3: Den Cache leeren
Damit Shopware die Änderung bemerkt, musst du den Cache leeren. Das kannst du entweder im Admin-Bereich unter Einstellungen > System > Cache & Indizes machen oder über die Konsole (Terminal):
bin/console cache:clear
Schritt 4: Theme neu kompilieren
In manchen Fällen musst du das Theme einmal neu aufbauen, damit das Skript korrekt verknüpft wird:
bin/console theme:compile
Was deine Technik-Abteilung wissen muss (Short-Facts)
Falls du das nicht selbst machen möchtest, kopier diesen Teil einfach in eine E-Mail an deine Agentur:
- Ziel: Globales ReviewForest Widget in Shopware 6.7.x einbinden.
- Integration: Über ein Child-Theme in der
footer.html.twig. - Platzierung: Idealerweise im
layout_footer_navigationoderlayout_footer_bottomBlock. - Wichtig (CSP): Bitte prüft die Content-Security-Policy. Die Domain
widgets.reviewforest.orgmuss fürscript-srcundconnect-srcfreigegeben werden, damit das Widget Daten laden darf. - Performance: Das Skript nutzt
defer, beeinflusst das Rendering also nicht negativ.
Aktualisiert am: 25/02/2026
Danke!
