Bewertungen mit Elementor einbinden

Voraussetzungen

• Ein Space in Mocha mit mindestens einer freigegebenen Bewertung. Ohne freigegebene Bewertung bleibt das Widget unsichtbar.
• Der Einbettungscode aus dem Mocha-Dashboard (siehe Schritt 1).
• WordPress mit Elementor. Die kostenlose Version genügt, Elementor Pro ist nur für den Theme Builder nötig.
• Ein Administrator-Konto. Elementor gibt das HTML-Widget standardmäßig nur Administratoren frei. Andere Rollen lassen sich in der „Rollenverwaltung“ von Elementor freischalten.
• Das Widget gibt es in beiden Mocha-Tarifen. Free zeigt bis zu 50 freigegebene Bewertungen und den Hinweis „Powered by Mocha“, Pro zeigt alle Bewertungen ohne diesen Hinweis.

Schritt für Schritt

1. Code in Mocha kopieren

   Öffnen Sie in Mocha Ihren Space und klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ ein Widget aus, zum Beispiel den Slider oder die Bewertungswand. Passen Sie „Erscheinungsbild“ und „Layout“ an und klicken Sie auf „Code kopieren“.

   Der kopierte Code ist ein einzelner Script-Tag. Ihr Code enthält statt „ihr-space“ die Kennung Ihres Spaces:

   HTMLCode kopieren

   <script
     src="https://mocha.de/api/embed/ihr-space/widget.js"
     data-mode="wall"
     async></script>

2. Seite mit Elementor öffnen

   Öffnen Sie in WordPress unter „Seiten“ die gewünschte Seite und klicken Sie auf „Mit Elementor bearbeiten“.

3. HTML-Widget platzieren

   Klicken Sie oben auf das Plus-Symbol („Element hinzufügen“). Suchen Sie in der Liste „Elemente“ nach „HTML“ und ziehen Sie das Widget „HTML“ (Symbol </>) an die Stelle, an der die Bewertungen erscheinen sollen. Eine blaue Linie zeigt die Einfügeposition.

4. Code einfügen

   Fügen Sie den kopierten Code im linken Bereich in das Feld „HTML-Code“ ein. Weitere Einstellungen brauchen Sie nicht, Aussehen und Farben kommen aus Mocha. Nur den Abstand nach oben und unten stellen Sie bei Bedarf im Tab „Erweitert“ unter „Außenabstand“ ein.

5. Vorschau prüfen

   Im Elementor-Editor erscheint das Widget unter Umständen nicht oder nur als leere Fläche, weil der Editor eingefügte Skripte anders ausführt als die fertige Seite. Das ist kein Fehler. Klicken Sie oben auf „Vorschau der Änderungen“ (Augen-Symbol). Die Seite öffnet sich in einem neuen Tab, dort sollten die Bewertungen zu sehen sein.

6. Veröffentlichen und Cache leeren

   Klicken Sie auf „Veröffentlichen“. Nutzen Sie ein Caching-Plugin, leeren Sie danach dessen Cache und öffnen Sie die Seite in einem privaten Browserfenster. So sehen Sie die Seite wie Ihre Besucher, ohne angemeldet zu sein.

HTML-Widget oder „Individueller Code“?

Elementor Pro bietet mit „Individueller Code“ (Custom Code) eine Stelle für Code, der auf vielen Seiten gleichzeitig geladen wird, etwa Tracking-Codes. Als Position gibt es dort den Kopfbereich (<head>) sowie den Anfang oder das Ende des Body-Bereichs. Das Mocha-Widget erscheint genau dort, wo sein Code steht: im Kopfbereich wäre es unsichtbar, am Anfang oder Ende des Body-Bereichs stünde es vor dem Header oder unter dem Footer.

Nutzen Sie deshalb das HTML-Widget. Soll das Widget auf allen Seiten erscheinen, legen Sie es mit Elementor Pro im Theme Builder in Ihre Footer-Vorlage. Ohne Pro fügen Sie es wie in der WordPress-Anleitung beschrieben im Footer oder in einer Seitenleiste ein.

Caching und Optimierung

Elementors eigene Leistungseinstellungen, etwa der „Elementor-Cache“, speichern nur den fertigen HTML-Code des Widgets, also den Script-Tag. Die Bewertungen lädt das Skript erst im Browser Ihrer Besucher. Hier müssen Sie nichts ändern.

Wenn das Widget nicht erscheint

• Nur im Editor leer: Prüfen Sie über „Vorschau der Änderungen“ oder auf der veröffentlichten Seite. Dort zählt das Ergebnis.
• Keine freigegebene Bewertung: Das Widget bleibt leer, bis mindestens eine Bewertung freigegeben ist.
• HTML-Widget gesperrt: Ohne Administratorrechte können Sie das Feld „HTML-Code“ nicht bearbeiten. Bitten Sie einen Administrator um Hilfe oder um Freigabe in der „Rollenverwaltung“.
• Alte Seite im Cache: Leeren Sie den Cache Ihres Caching-Plugins. Elementors eigene Dateien erzeugen Sie mit dem Eintrag „Lösche Dateien und Daten“ neu. Sie finden ihn, wenn Sie angemeldet die Seite ansehen, in der oberen Werkzeugleiste unter „Mit Elementor bearbeiten“.
• Optimierung greift: Schalten Sie die JavaScript-Optionen Ihres Optimierungs-Plugins testweise aus. Erscheint das Widget dann, fehlt eine Ausnahme.