Add your reviews to Weebly

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).
• Access to the Weebly editor for your site.

These steps are for the Weebly editor. Weebly is part of Square, and online shops built with Square Online use a different editor.

The widget appears exactly where you paste the code. It runs in a sealed-off area (Shadow DOM): your Weebly theme's styles don't change it, and it doesn't change your theme.

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. Open the page in the editor

   Log in to Weebly, open your site in the editor with “Edit Site” and go to the page where the reviews should appear.

3. Drag the Embed Code element onto the page

   In the “Build” tab, drag the “Embed Code” element onto the page, to the spot where the reviews should appear. While you drag, a blue line shows where the element will land.

4. Paste the code

   Click inside the element and choose “Edit Custom HTML”. Paste the Mocha code, then click anywhere outside the element. Weebly doesn't display some code in the editor, so if the element stays empty there, that's not an error.

5. Publish and check

   Click “Publish”. Then open the published page in your browser and check the widget, on a phone as well.

Alternative: iFrame

If the widget doesn't appear on the published page either, you can embed your space's review wall page in a frame instead. In the Mocha dashboard, expand “iFrame embed” below “Embed code”, click “Copy” and paste the code into an Embed Code element as in step 4.

The frame has a fixed height of 600 pixels. Change the number under height in the code if needed. Of your dashboard settings, the review wall page only takes over the theme (light or dark).

If the widget doesn't appear

• Not published yet: Weebly only shows some code on the published site. Click “Publish” and check the live page.
• Incomplete code: According to Weebly, incomplete code can cause problems. The code starts with <script and ends with </script>. If in doubt, delete the element and paste the code again.
• Scroll bar in the iFrame: If you use the iFrame option and the review wall is taller than the frame, a scroll bar appears. Increase the number under height in the code, or switch back to the script widget, which adjusts its height by itself.
• 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.