Bewertungen in Squarespace 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 Bearbeiten Ihrer Squarespace-Website.
• Ein Squarespace-Abo, das JavaScript in Code-Blöcken erlaubt (siehe Hinweis).

Der Code-Block setzt das Widget direkt in Ihre Seite, genau an die Stelle des Blocks. Das Widget läuft dabei in einem abgeschlossenen Bereich (Shadow DOM): Die Schriften und Farben Ihres Templates verändern es nicht, und es verändert Ihr Template 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. Code-Block hinzufügen

   Öffnen Sie in Squarespace die Seite, auf der die Bewertungen erscheinen sollen, und klicken Sie auf „Bearbeiten“. Fahren Sie mit der Maus über den gewünschten Abschnitt und klicken Sie auf „Block hinzufügen“ oder auf „+“. Wählen Sie im Blockmenü „Code“.

3. Code einfügen

   Klicken Sie auf das Bleistiftsymbol am Block, um ihn zu bearbeiten. Wählen Sie im Menü „Typ“ die Option „HTML“ und lassen Sie „Quellcode anzeigen“ ausgeschaltet. Fügen Sie dann den Mocha-Code in das Textfeld ein (Strg + V unter Windows, Cmd + V auf dem Mac).

   Wichtig: Steht „Typ“ auf „JavaScript“, zeigt Squarespace den Code nur als Text an, statt ihn auszuführen.

4. Block platzieren und speichern

   Ziehen Sie den Block an die gewünschte Position und auf die gewünschte Breite. Das Widget nutzt die Breite des Blocks. Klicken Sie anschließend auf „Speichern“.

5. Auf der Website prüfen

   Öffnen Sie die Seite in einem privaten Browserfenster, in dem Sie nicht bei Squarespace angemeldet sind. Squarespace zeigt Code in Code-Blöcken aus Sicherheitsgründen manchmal nicht an, solange Sie angemeldet sind, auch wenn Besucher ihn sehen. Im Editor können Sie stattdessen auf „Vorschau im sicheren Modus anzeigen“ klicken. Prüfen Sie die Seite auch auf dem Smartphone.

Alternative: iFrame

Im Mocha-Dashboard gibt es unter „Einbettungscode“ den aufklappbaren Bereich „iFrame einbetten“. Er zeigt die Bewertungswand-Seite Ihres Spaces in einem Rahmen mit fester Höhe. Das kann helfen, wenn sich das Script mit Ihrem Template nicht verträgt.

Klicken Sie dort auf „Kopieren“ und fügen Sie den iFrame-Code genauso in einen Code-Block mit „Typ“ „HTML“ ein. Die Höhe steht im Code bei height (600 Pixel), ändern Sie die Zahl bei Bedarf. Von den Einstellungen im Dashboard übernimmt die Bewertungswand-Seite nur das Design (hell oder dunkel). Beachten Sie: Auch iFrames in Code-Blöcken sind laut Squarespace nur in den oben genannten Abos verfügbar.

Wenn das Widget nicht erscheint

• Sie sind angemeldet: Prüfen Sie die Seite in einem privaten Browserfenster (siehe Schritt 5).
• Code erscheint als Text: Stellen Sie im Code-Block „Typ“ auf „HTML“ und schalten Sie „Quellcode anzeigen“ aus.
• Abo ohne JavaScript: Im Abo Basic ist JavaScript in Code-Blöcken laut Squarespace nicht verfügbar.
• Ajax-Laden: Bei manchen Templates lädt Squarespace Seiten per Ajax. Squarespace nennt das als mögliche Ursache für Probleme mit eigenem Code und empfiehlt, das Ajax-Laden testweise zu deaktivieren.
• 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.