Add your reviews with Elementor

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 Elementor. The free version is enough; Elementor Pro is only needed for the Theme Builder.
• An Administrator account. By default, Elementor only lets administrators use the HTML widget. Other roles can be given access in Elementor's Role Manager.
• 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 Slider or 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 page with Elementor

   In WordPress, go to Pages, find the page you want and click Edit with Elementor.

3. Place the HTML widget

   Click the plus icon (Add Element) at the top. Search the Elements list for "HTML" and drag the HTML widget (the </> icon) to the spot where the reviews should appear. A blue line shows where it will land.

4. Paste the code

   Paste the code into the HTML Code field in the left-hand panel. There's nothing else to set up, as the look and colours come from Mocha. If you need more space above or below the widget, adjust Margin on the widget's Advanced tab.

5. Check the preview

   The widget may not show in the Elementor editor, or only as an empty area, because the editor runs pasted scripts differently from the live page. That's not an error. Click Preview Changes (the eye icon) at the top. The page opens in a new tab, and your reviews should appear there.

6. Publish and clear the cache

   Click Publish. If you use a caching plugin, clear its cache afterwards and open the page in a private browser window. That way you see the page as your visitors do, without being logged in.

HTML widget or Custom Code?

Elementor Pro's Custom Code feature is meant for code that loads on many pages at once, such as tracking snippets. You can place it in the <head> or at the start or end of the page body. The Mocha widget appears exactly where its code sits: in the head it would be invisible, and at the start or end of the body it would sit above your header or below your footer.

So use the HTML widget. To show the widget on every page, add it to your footer template in the Elementor Pro Theme Builder. Without Pro, add it to your footer or a sidebar as described in the WordPress guide.

Caching and optimisation

Elementor's own performance settings, such as the Element Cache, only store the widget's finished HTML, which is the script tag. The script loads the reviews in your visitors' browsers, so there's nothing to change here.

If the widget doesn't appear

• Only empty in the editor: check with Preview Changes or on the published page. That's where the result counts.
• No approved reviews: the widget stays empty until at least one review has been approved.
• HTML widget locked: without administrator rights you can't edit the HTML Code field. Ask an administrator for help or for access in the Role Manager.
• Old page in the cache: clear your caching plugin's cache. To regenerate Elementor's own files, use Clear Files & Data. While logged in and viewing the page, you'll find it in the admin toolbar under Edit with Elementor.
• 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.