Bewertungen im STRATO Homepage-Baukasten einbinden

Voraussetzungen

• Ein Mocha-Konto mit einem Space und mindestens einer freigegebenen Bewertung. Siehe Space anlegen und Bewertung freigeben.
• Eine Website im STRATO Homepage-Baukasten. Die Schritte unten gelten für SmartWebsite, den aktuellen Baukasten. Für den älteren Homepage-Baukasten gibt es einen eigenen Abschnitt weiter unten.
• Fehlt in Ihrem Editor das HTML-Modul, fragen Sie beim STRATO Kundenservice nach, ob Ihr Tarif es enthält.
• Läuft Ihre Website bei STRATO mit WordPress, folgen Sie der Anleitung für WordPress.

Schritt für Schritt

1. Code in Mocha kopieren

   Öffnen Sie in Mocha Ihren Space. Klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ eine Darstellung und passen Sie „Erscheinungsbild“ sowie „Layout“ oder „Optionen“ an. Klicken Sie dann auf „Code kopieren“.

2. Webseiten-Editor öffnen

   Melden Sie sich im STRATO Login an und klicken Sie bei Ihrem SmartWebsite-Paket auf „Starten“. In der Presence Suite klicken Sie links auf „Webseiten-Editor“ oder rechts auf „Webseite bearbeiten“.

3. Abschnitt wählen

   Wählen Sie im Menü links „Inhalte“ und öffnen Sie die Seite, auf der die Bewertungen stehen sollen. Fahren Sie mit der Maus über den gewünschten Abschnitt und klicken Sie oben links auf „Abschnittsoptionen“.

   Laut STRATO legt der Editor ein neues Element in jeder Spalte des Abschnitts an. Nutzen Sie deshalb einen Abschnitt mit nur einer Spalte oder fügen Sie an der gewünschten Stelle mit „+ Abschnitt hinzufügen“ einen neuen ein.

4. HTML-Modul hinzufügen

   Klicken Sie im Reiter „Elemente“ auf das Plus-Symbol und wählen Sie „HTML-Modul“.

5. Code einfügen

   Klicken Sie das HTML-Modul an und wählen Sie „Code“. In das Fenster, das sich öffnet, fügen Sie den kopierten Code ein und bestätigen Ihre Eingabe. Ihr Code sieht so aus, nur mit der Kennung Ihres Spaces statt „ihr-space“:

   HTMLCode kopieren

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

   Bietet Ihr Editor unter dem Code-Feld eine Datenschutz-Option an, klären Sie die passende Einstellung mit Ihrer Datenschutzberatung.

6. Veröffentlichen und prüfen

   Klicken Sie oben rechts auf „Veröffentlichen“, bei einer schon veröffentlichten Website auf „Erneut Veröffentlichen“. Erst dann ist die Änderung online sichtbar. Öffnen Sie Ihre Website danach in einem privaten Browserfenster.

Das Widget lädt asynchron und holt die freigegebenen Bewertungen bei jedem Aufruf neu. Neue Freigaben erscheinen also ohne erneutes Veröffentlichen. Weil das Widget in einem Shadow DOM läuft, verändert das Design Ihrer STRATO-Website seine Darstellung nicht.

Älterer Homepage-Baukasten: Widget „Embed“

Im älteren Homepage-Baukasten heißt das passende Element „Embed“:

1. Wählen Sie im Menü links „Webseite bearbeiten“ und die gewünschte Seite. Öffnen Sie „Inhaltselemente“ > „Standardelemente“ > „Embed“.
2. Ziehen Sie das Widget per Drag & Drop an die gewünschte Stelle.
3. Fahren Sie mit der Maus über das Widget und klicken Sie oben rechts auf das Zahnrad.
4. Wählen Sie „Embed-Code“, fügen Sie den Mocha-Code ein und bestätigen Sie mit „OK“.
5. Klicken Sie oben rechts auf „Veröffentlichen“.

Laut STRATO passt sich die Größe des Embed-Widgets nicht automatisch an den Inhalt an. Ziehen Sie das Widget über das Pfeilsymbol unten rechts so groß, dass die Bewertungen vollständig sichtbar sind. Eingebettete Inhalte zeigt der ältere Baukasten erst in der Vorschau oder auf der veröffentlichten Website.

Alternative: iFrame

Statt des Skripts können Sie auch die Bewertungswand Ihres Spaces als iFrame zeigen, mit fester Höhe. Im älteren Baukasten wählen Sie dafür im Embed-Widget „Internetadresse (iFrame)“ und tragen die Adresse ein, zum Beispiel https://mocha.de/wall/ihr-space?theme=light. Im HTML-Modul von SmartWebsite fügen Sie den iFrame-Code aus Mocha ein. Sie finden ihn unter dem Einbettungscode bei „iFrame einbetten“:

<iframe src="https://mocha.de/wall/ihr-space?theme=light" width="100%" height="600" frameborder="0" style="border: none; border-radius: 12px;"></iframe>

Wenn das Widget nicht erscheint

• Nicht veröffentlicht: Änderungen sind erst nach „Veröffentlichen“ oder „Erneut Veröffentlichen“ online.
• Zu klein: Im älteren Baukasten das Embed-Widget unten rechts größer ziehen.
• Code vollständig: Der Code beginnt mit <script und endet mit </script>. Kopieren Sie ihn im Zweifel erneut mit „Code kopieren“.
• Freigegebene Bewertungen: Das Widget zeigt nur freigegebene Bewertungen. Prüfen Sie in Mocha unter „Testimonials“, ob mindestens eine Bewertung den Status „Freigegeben“ hat.