Bewertungen in Webflow 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 Webflow-Designer Ihrer Website.
• Ein Webflow-Tarif mit „Code Embed“. Laut Webflow ist das Element verfügbar, wenn Ihre Website einen bezahlten Site-Tarif hat oder Ihr Workspace einen der Tarife Core, Growth, Agency oder Freelancer nutzt.

Webflow fügt den Code des Elements direkt in Ihre Seite ein, nicht in einen eigenen Rahmen. Das Widget passt seine Höhe deshalb selbst an. Die Bezeichnungen unten folgen der englischen Webflow-Oberfläche.

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. „Code Embed“ hinzufügen

   Öffnen Sie Ihre Website im Webflow-Designer und wechseln Sie zu der Seite, auf der die Bewertungen erscheinen sollen. Öffnen Sie links das „Add panel“ (Plus-Symbol) und ziehen Sie das Element „Code Embed“ auf die Arbeitsfläche, zum Beispiel in eine Section oder einen Container. Schneller geht es über „Quick find“ (Cmd + E auf dem Mac, Strg + E unter Windows): Tippen Sie dort „Code Embed“ ein.

3. Code einfügen

   Beim Hinzufügen öffnet Webflow einen Code-Editor. Fügen Sie dort den Mocha-Code ein und klicken Sie auf „Save & close“. Später öffnen Sie den Editor wieder per Doppelklick auf das Element oder über „Open code editor“ im „Settings panel“.

4. Breite festlegen

   Das Widget nutzt die volle Breite des umgebenden Elements. Soll es schmaler sein, legen Sie das „Code Embed“ in einen Container oder geben Sie ihm im „Style panel“ eine maximale Breite. Die Höhe müssen Sie nicht einstellen.

5. In der Vorschau prüfen

   Auf der Arbeitsfläche zeigt Webflow für Code mit einem Script-Tag nur einen Platzhalter. Klicken Sie oben auf „Preview“ (Augensymbol), um das Widget zu sehen. Prüfen Sie dabei auch die kleineren Breakpoints für Tablet und Smartphone.

6. Veröffentlichen

   Klicken Sie oben rechts auf „Publish“, wählen Sie die Domains aus und veröffentlichen Sie die Website. Rufen Sie danach die Live-Seite auf, zum Beispiel zuerst Ihre Adresse auf webflow.io, und prüfen Sie das Widget.

Wenn das Widget nicht erscheint

• Nur Platzhalter im Designer: Das ist normal. Prüfen Sie das Widget in der Vorschau oder auf der veröffentlichten Website.
• Noch nicht veröffentlicht: Änderungen am Code sind erst nach „Publish“ auf der Live-Website zu sehen.
• Code unvollständig: Der Code beginnt mit <script und endet mit </script>. Kopieren Sie ihn im Zweifel erneut mit „Code kopieren“.
• 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.