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:

1. Das Skript: Es lädt die Funktionen von unseren Servern.
2. Der Platzhalter (Div): Dieser sagt Shopware genau, an welcher Stelle das Widget erscheinen soll.

So sieht die Struktur aus:

Widget-Code

<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.

1. Admin-Bereich öffnen: Logge dich in dein Shopware-Backend ein.
2. Layout wählen: Gehe zu Inhalte > Erlebniswelten und öffne das Layout deiner Seite.
3. 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.
4. Code-Modus aktivieren: Klicke auf das neu platzierte Textfeld. In der Werkzeugleiste oben findest du das Symbol </> (Quellcode). Klicke darauf.
5. Widget einfügen: Lösche eventuellen Beispieltext und füge deinen kompletten Widget-Code (Skript + Div) dort ein.
6. 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.org auf 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:

footer.html.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_navigation oder layout_footer_bottom Block.
• Wichtig (CSP): Bitte prüft die Content-Security-Policy. Die Domain widgets.reviewforest.org muss für script-src und connect-src freigegeben werden, damit das Widget Daten laden darf.
• Performance: Das Skript nutzt defer, beeinflusst das Rendering also nicht negativ.