Add your reviews to Divi

Before you start

• A space in Mocha with at least one approved review. Without an approved review, the widget stays hidden.
• The embed code from your Mocha dashboard (see step 1).
• WordPress with Divi 4 or Divi 5, and an account with administrator rights.
• The widget is available on both Mocha plans. Free shows up to 50 approved reviews with a small "Powered by Mocha" note, Pro shows all your reviews without it.

Step by step

1. Copy the code in Mocha

   Open your space in Mocha. In the space navigation, click Widget under Embed. Pick a widget under Choose a widget, for example the Wall of Love. Adjust Appearance and Layout, then click Copy code.

   The code you copy is a single script tag, with your own space ID in place of “your-space”:

   HTMLCopy code

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

2. Open the Visual Builder

   In WordPress, go to Pages, open the page you want and click Use Divi Builder (in Divi 4: Use The Divi Builder). The page reloads in the Visual Builder. For a new page, choose Build From Scratch first.

3. Add a row and a Code module

   Click the green plus icon where you want the reviews to go and insert a row, for example with one column. Then click the grey plus icon inside the row, search for "Code" and pick the Code module.

4. Paste the code

   The module settings open automatically. On the Content tab, paste the code into the field in the Text group. The Code module doesn't add script tags for you, but the Mocha code already includes them, so there's nothing to add.

5. Save and exit the Visual Builder

   Click Save or press Ctrl+S (Cmd+S on a Mac). According to the Divi documentation, JavaScript in the Code module only becomes visible after you save and exit the Visual Builder, so an empty area in the builder is normal. Leave the builder with Exit (Divi 5) or Exit Visual Builder in the WordPress toolbar (Divi 4). In Divi 5 you can also use Preview to open the page in a new tab first.

6. Clear the cache

   If you use a caching plugin, clear its cache now. Then open the page in a private browser window to see it the way your visitors do.

On every page: Global Footer

To show the widget on every page, for example a badge in the footer, go to Divi > Theme Builder. In the Default Website Template, edit the Global Footer (or create one with Add Global Footer) and add a Code module with the Mocha code, just as above. Then save.

The fields on the Integration tab of the Theme Options aren't suitable for this. They put code into the head or body of the page, and you can't choose where on the page the widget appears.

Caching and optimisation

Divi's performance options are under Divi > Theme Options > General > Performance. They mainly deal with Divi's own files, such as dynamic CSS, critical CSS and jQuery. If the widget disappears after you switch on Defer Additional Third Party Scripts, switch that option off again as a test.

If the widget doesn't appear

• Only empty in the Visual Builder: save and exit the builder. The result that counts is on the page itself.
• No approved reviews: the widget stays empty until at least one review has been approved.
• Wrong module: in the Text module, Divi may show the code as text instead of running it. Use the Code module.
• Old page in the cache: clear your caching plugin's cache and check the page in a private window.
• Optimisation getting in the way: switch off your optimisation plugin's JavaScript options for a moment. If the widget then appears, an exclusion is missing.