Add your reviews to Squarespace

Before you start

• A Mocha space with at least one approved review. Without approved reviews the widget stays empty.
• The embed code from your Mocha dashboard (see step 1).
• Permission to edit your Squarespace site.
• A Squarespace plan that allows JavaScript in code blocks (see the note below).

The code block places the widget straight into your page, exactly where the block sits. The widget runs in a sealed-off area (Shadow DOM): your template's fonts and colours don't change it, and it doesn't change your template.

Step by step

1. Copy the code in Mocha

   Open your space in the Mocha dashboard and click “Widget” under “Embed” in the space navigation. Pick a widget under “Choose a widget”, adjust “Appearance” and “Layout” (“Options” for some widgets), then click “Copy code”.

   The copied code is a single script tag. Yours contains your space's identifier instead of “your-space”:

   HTMLCopy code

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

2. Add a code block

   In Squarespace, open the page where the reviews should appear and click “Edit”. Hover over the section you want and click “Add block” or “+”. Choose “Code” from the block menu.

3. Paste the code

   Click the pencil icon on the block to edit it. Choose “HTML” in the “Type” menu and leave “Display Source” switched off. Then paste the Mocha code into the text field (Ctrl + V on Windows, Command + V on a Mac).

   Important: if “Type” is set to “JavaScript”, Squarespace displays the code as text instead of running it.

4. Position the block and save

   Drag the block to the position and width you want. The widget uses the width of the block. Then click “Save”.

5. Check the live site

   Open the page in a private browser window where you're not logged in to Squarespace. As a security measure, Squarespace sometimes doesn't show code in code blocks while you're logged in, even though visitors can see it. In the editor you can click “Preview in Safe Mode” instead. Check the page on a phone as well.

Alternative: iFrame

Below “Embed code” in the Mocha dashboard you'll find the expandable “iFrame embed” section. It shows your space's review wall page inside a frame with a fixed height. This can help if the script doesn't get along with your template.

Click “Copy” there and paste the iframe code into a code block with “Type” set to “HTML”, just like above. The height is set in the code under height (600 pixels); change the number if needed. Of your dashboard settings, the review wall page only takes over the theme (light or dark). Note that Squarespace only allows iframes in code blocks on the plans mentioned above as well.

If the widget doesn't appear

• You're logged in: Check the page in a private browser window (see step 5).
• The code shows as text: Set “Type” to “HTML” in the code block and switch off “Display Source”.
• Plan without JavaScript: According to Squarespace, JavaScript in code blocks isn't available on the Basic plan.
• Ajax loading: Some templates load pages via Ajax. Squarespace names this as a possible cause of problems with custom code and suggests disabling Ajax loading as a test.
• No approved reviews: The widget only shows approved reviews. See approve reviews.
• Space paused: If “Space is active” is switched off in the space's “Settings”, Mocha doesn't show the widget.