Bewertungen in Weebly einbinden

Voraussetzungen

• Ein Mocha-Space mit mindestens einer freigegebenen Bewertung. Ohne freigegebene Bewertungen bleibt das Widget leer.
• Der Einbettungscode aus dem Mocha-Dashboard (siehe Schritt 1).
• Zugang zum Weebly-Editor Ihrer Website.

Diese Anleitung gilt für den Weebly-Editor. Weebly gehört zu Square, Online-Shops mit Square Online nutzen einen anderen Editor. Die Bezeichnungen unten stammen aus der englischen Weebly-Oberfläche und können in einer deutschen Oberfläche abweichen.

Das Widget erscheint genau dort, wo Sie den Code einfügen. Es läuft in einem abgeschlossenen Bereich (Shadow DOM): Das Design Ihres Weebly-Themes verändert es nicht, und es verändert Ihr Theme nicht.

Schritt für Schritt

1. Code in Mocha kopieren

   Öffnen Sie im Mocha-Dashboard Ihren Space und klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ ein Widget, passen Sie „Erscheinungsbild“ und „Layout“ (je nach Widget „Optionen“) 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 im Editor öffnen

   Melden Sie sich bei Weebly an, öffnen Sie Ihre Website mit „Edit Site“ im Editor und wechseln Sie zu der Seite, auf der die Bewertungen erscheinen sollen.

3. Element „Embed Code“ auf die Seite ziehen

   Ziehen Sie im Reiter „Build“ das Element „Embed Code“ auf die Seite, an die Stelle, an der die Bewertungen erscheinen sollen. Eine blaue Linie zeigt beim Ziehen, wo das Element landet.

4. Code einfügen

   Klicken Sie in das Element und wählen Sie „Edit Custom HTML“. Fügen Sie den Mocha-Code ein und klicken Sie danach außerhalb des Elements. Manchen Code zeigt Weebly im Editor nicht an. Bleibt das Element im Editor leer, ist das kein Fehler.

5. Veröffentlichen und prüfen

   Klicken Sie auf „Publish“. Öffnen Sie danach die veröffentlichte Seite im Browser und prüfen Sie das Widget, auch auf dem Smartphone.

Alternative: iFrame

Erscheint das Widget auch auf der veröffentlichten Seite nicht, können Sie stattdessen die Bewertungswand-Seite Ihres Spaces in einem Rahmen einbinden. Klappen Sie im Mocha-Dashboard unter „Einbettungscode“ den Bereich „iFrame einbetten“ auf, klicken Sie auf „Kopieren“ und fügen Sie den Code wie in Schritt 4 in ein Element „Embed Code“ ein.

Der Rahmen hat eine feste Höhe von 600 Pixeln. Ändern Sie bei Bedarf die Zahl bei height im Code. Von den Einstellungen im Dashboard übernimmt die Bewertungswand-Seite nur das Design (hell oder dunkel).

Wenn das Widget nicht erscheint

• Noch nicht veröffentlicht: Weebly zeigt manchen Code erst auf der veröffentlichten Website. Klicken Sie auf „Publish“ und prüfen Sie die Live-Seite.
• Code unvollständig: Laut Weebly kann unvollständiger Code Probleme verursachen. Der Code beginnt mit <script und endet mit </script>. Löschen Sie das Element im Zweifel und fügen Sie den Code neu ein.
• iFrame mit Scrollbalken: Nutzen Sie die iFrame-Variante und ist die Bewertungswand höher als der Rahmen, erscheint ein Scrollbalken. Erhöhen Sie die Zahl bei height im Code oder wechseln Sie zurück zum Script-Widget, das seine Höhe selbst anpasst.
• Keine freigegebene Bewertung: Das Widget zeigt nur freigegebene Bewertungen. Mehr dazu unter Bewertung freigeben.
• Space pausiert: Ist in den „Einstellungen“ des Spaces „Space ist aktiv“ ausgeschaltet, zeigt Mocha kein Widget an.