Add your reviews to Wix

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 editor of your Wix site.

Wix always displays embedded code inside a frame of its own (an iFrame). The widget can't adjust its height inside that frame, so you set the height of the element by hand. The steps below describe the Wix Editor. If you use Wix Studio or the Wix Harmony Editor, the table after the steps shows where the same element lives.

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 the Embed HTML element

   In Wix, open the page where the reviews should appear. Click “Add Elements” on the left of the editor, then “Embed Code” and “Popular Embeds”. Click “Embed HTML”. Wix places the element on the page. Drag it to where you want it.

3. Paste the code

   Click the element, then click “Enter Code”. Paste the Mocha code into the field under “Add your code here” and click “Apply”. You can also add alt text under “What's in the embed?”, for example “Reviews from our clients”.

4. Adjust the height of the element

   Drag the element to the width of your content area. Then drag its bottom edge down until the whole widget is visible without a scroll bar. The Slider, Single Quote and Badge need far less height than a Wall of Love. A Wall of Love gets longer with every new review, so be generous.

5. Check the mobile view

   Switch to the mobile view at the top of the editor. On a phone the element is narrower, which usually makes the widget taller. Increase the height of the element here until nothing is cut off.

6. Preview and publish

   Click “Preview” at the top right and check the widget. Then click “Publish”. Open the live site once on a computer and once on a phone.

Wix Studio and Wix Harmony

The element is the same, only the path to it differs:

In the Wix Harmony Editor, Wix also asks for “Cookies and similar technologies set by your code”. The Mocha widget itself sets no cookies. If you're unsure which category to choose, check with your data protection adviser.

Alternative: iFrame

Instead of the widget, you can show your space's review wall page inside a frame. The Mocha dashboard lists this option for Wix too.

1. In the Mocha dashboard, expand “iFrame embed” below “Embed code”. Copy only the address after src=, for example https://mocha.de/wall/your-space?theme=light.
2. In Wix, add the “Embed a site” element via “Add Elements” > “Embed Code” > “Popular Embeds”.
3. Click “Enter Website Address”, enter the address under “What's the website address?” and click “Apply”.
4. Adjust the width and height of the element as in steps 4 and 5.

In Wix Studio the element is called “Embed Site”; in the Wix Harmony Editor it's “Embed a site” and you enter the address in the “Link” field. Of your dashboard settings, the review wall page only takes over the theme (light or dark).

If the widget doesn't appear

• No approved reviews: The widget only shows approved reviews and stays empty otherwise. See approve reviews.
• Space paused: If “Space is active” is switched off in the space's “Settings”, Mocha doesn't show the widget.
• Incomplete code: The code starts with <script and ends with </script>. If in doubt, copy it again with “Copy code”.
• Widget cut off: The Wix element is too short. Drag it taller, on desktop and in the mobile view.