Add your reviews to Webflow

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 Webflow Designer for your site.
• A Webflow plan that includes Code Embed. According to Webflow, the element is available if your site has a paid Site plan or your Workspace is on a Core, Growth, Agency or Freelancer plan.

Webflow puts the element's code straight into your page rather than into a separate frame, so the widget adjusts its height by itself.

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 Embed

   Open your site in the Webflow Designer and go to the page where the reviews should appear. Open the “Add panel” on the left (plus icon) and drag a “Code Embed” element onto the canvas, for example into a Section or Container. For a shortcut, use “Quick find” (Cmd + E on a Mac, Ctrl + E on Windows) and type “Code Embed”.

3. Paste the code

   When you add the element, Webflow opens a code editor. Paste the Mocha code there and click “Save & close”. To edit it later, double-click the element or click “Open code editor” in the “Settings panel”.

4. Set the width

   The widget uses the full width of the element around it. To make it narrower, place the Code Embed inside a container or give it a maximum width in the “Style panel”. There's no need to set a height.

5. Check it in Preview

   On the canvas, Webflow only shows a placeholder for code with a script tag. Click “Preview” (the eye icon) at the top to see the widget. Check the smaller breakpoints for tablet and phone while you're there.

6. Publish

   Click “Publish” at the top right, select your domains and publish the site. Then open the live page, for example your webflow.io address first, and check the widget.

If the widget doesn't appear

• Only a placeholder in the Designer: That's expected. Check the widget in Preview or on the published site.
• Not published yet: Code changes only show on the live site after you click “Publish”.
• Incomplete code: The code starts with <script and ends with </script>. If in doubt, copy it again with “Copy code”.
• 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.