Bewertungen im IONOS Homepage-Baukasten einbinden

Voraussetzungen

• Ein Mocha-Konto mit einem Space und mindestens einer freigegebenen Bewertung. Siehe Space anlegen und Bewertung freigeben.
• Ein Web-Projekt mit MyWebsite Now, dem aktuellen Homepage-Baukasten von IONOS. Das HTML-Modul steht laut IONOS nicht in allen MyWebsite Now-Tarifen zur Verfügung.
• Läuft Ihre Website bei IONOS mit WordPress statt mit dem Baukasten, 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. MyWebsite Now-Editor öffnen

   Melden Sie sich in Ihrem IONOS Konto an. Klicken Sie in der Titelleiste auf „Menü“ > „Web-Projekte“ und auf der Kachel Ihres Projekts auf „Projekt verwalten“. In der Presence Suite wählen Sie „Website“ > „Editor“. Der Editor öffnet sich in einem neuen Fenster.

3. HTML-Modul einfügen

   Wählen Sie in der linken Menüleiste „Inhalte“. Fahren Sie mit der Maus über den Abschnitt, in dem die Bewertungen erscheinen sollen, und klicken Sie oben links im Abschnitt auf „Elemente“. Wählen Sie „HTML-Modul“. Es erscheint ein Platzhalter, den Sie frei positionieren können.

4. Code einfügen

   Klicken Sie im Platzhalter auf den Text „HTML-Modul“. In der Werkzeugleiste, die sich öffnet, klicken Sie auf „Code“ und fügen den kopierten Code in das Textfeld ein. 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>

5. Datenschutz-Option wählen

   Unter dem Code-Feld bietet IONOS zwei Optionen an. Bei „Zustimmung erforderlich“ wird der Code erst ausgeführt, wenn Besuchende zugestimmt haben. Bis dahin ist das Widget nicht zu sehen. Über „Neu...“ legen Sie dafür eine Zustimmungsregel an oder nutzen eine vorhandene. Bei „Keine Zustimmung erforderlich“ läuft der Code sofort beim Aufruf der Seite. Welche Einstellung zu Ihrer Website passt, klären Sie mit Ihrer Datenschutzberatung.

6. Abschließen und veröffentlichen

   Schließen Sie Ihre Eingabe mit „Fertig“ ab und veröffentlichen Sie die Website. Prüfen Sie das Ergebnis anschließend auf der veröffentlichten Seite, am besten in einem privaten Browserfenster.

Das Widget lädt asynchron und holt die freigegebenen Bewertungen bei jedem Aufruf neu. Neue Freigaben erscheinen also, ohne dass Sie den Editor öffnen. Weil das Widget in einem Shadow DOM läuft, verändert das Design Ihrer IONOS-Website seine Darstellung nicht.

Alternative: iFrame

In das HTML-Modul können Sie statt des Skripts auch einen iFrame einfügen. Er zeigt die Bewertungswand Ihres Spaces mit fester Höhe. Den Code finden Sie in Mocha 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>

Enthält Ihr Tarif kein HTML-Modul, setzen Sie stattdessen einen Button oder Link auf die Adresse Ihrer Bewertungswand, zum Beispiel https://mocha.de/wall/ihr-space.

Ältere IONOS-Baukästen und WordPress

• MyWebsite Creator: Nutzen Sie noch den älteren Baukasten MyWebsite Creator (2017 bis 2022), heißt das passende Element dort „HTML-Element“. Fügen Sie den Mocha-Code dort ein.
• WordPress bei IONOS: Läuft Ihre Website mit WordPress, binden Sie das Widget wie in jeder WordPress-Website ein. Die Schritte stehen in der Anleitung für WordPress.

Wenn das Widget nicht erscheint

• Zustimmung erforderlich: Haben Sie diese Option gewählt, erscheint das Widget erst, nachdem Besuchende zugestimmt haben. Stimmen Sie beim Testen zu oder prüfen Sie die Zustimmungsregel.
• Nicht veröffentlicht: Prüfen Sie, ob Sie die Website nach dem Einfügen veröffentlicht haben.
• 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.