Add your reviews to WordPress

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).
• A WordPress account with the Administrator or Editor role, or Super Admin on Multisite. Only these roles may add scripts. For other roles, WordPress strips the script when the page is saved.
• On WordPress.com it depends on your plan: according to WordPress.com support, script tags need a paid plan with hosting features activated.
• 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 if you like, then click Copy code.

   The code is a single script tag and looks like this, 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 in the block editor

   In WordPress, go to Pages, find the page where the reviews should appear and click Edit. Decide where the widget should go: it appears exactly where you place the code.

3. Add a Custom HTML block

   Click the plus icon (Add block) at that spot, search for "HTML" and choose the Custom HTML block. As a shortcut, type /html in an empty paragraph and press Enter.

4. Paste the code

   Paste the code into the block's text field. Newer WordPress versions open a separate window for this via Edit HTML: paste the code into its HTML tab (not a JavaScript tab) and confirm with Update.

5. Save and check

   Click Publish or Save in the top right. Depending on your WordPress version, the editor shows either the code or a preview. What counts is the live page, so open it in a private browser window to see it the way your visitors do.

6. Clear the cache

   If you use a caching plugin, clear its cache now, usually from the admin toolbar at the top (in WP Rocket, for example, Clear and Preload Cache). That way visitors get the page with the new code. See "Caching and optimisation" below for the settings worth checking.

In the footer or sidebar

To show the widget on every page, for example a badge in the footer, add the same block in a central place:

• Block themes (such as Twenty Twenty-Five): go to Appearance > Editor, open Patterns and then the Footer template part. Add a Custom HTML block there and save. The change applies to every page that uses this footer.
• Classic themes: go to Appearance > Widgets, expand a widget area (the names depend on your theme), add a Custom HTML block with the plus icon and click Update.
• Classic editor: if you still use the classic editor, paste the code into the Text tab, not the Visual tab.

Caching and optimisation

There's no need to switch off your page cache. The widget loads the reviews in your visitors' browsers, so they stay up to date even on cached pages.

• WP Rocket: under Settings > WP Rocket, on the File Optimization tab, Minify JavaScript files, Load JavaScript deferred and Delay JavaScript execution each have an Excluded JavaScript Files field. Add mocha.de/api/embed to each of them. The exclusion under Minify JavaScript files also covers Combine JavaScript files.
• LiteSpeed Cache: under LiteSpeed Cache > Page Optimization, on the Tuning tab, add mocha.de/api/embed to JS Excludes and JS Deferred / Delayed Excludes. These apply to JS Minify, JS Combine and Load JS Deferred on the JS Settings tab.
• Autoptimize: under Settings > Autoptimize, on the JS, CSS & HTML tab, add mocha.de/api/embed to Exclude scripts from Autoptimize:, separated from the existing entries by a comma.
• W3 Total Cache: when minifying, W3 Total Cache only includes external scripts listed under Performance > Minify in Include external files/libraries:. Don't add the Mocha script there, and don't add it to the Delay list: of Delay Scripts (Pro version) either.
• SiteGround Speed Optimizer: Combine JavaScript Files under Speed Optimizer > Frontend also picks up external scripts. The Exclude from JavaScript Combination list only offers scripts from your theme and plugins, so the Mocha script isn't in it. Either switch combining off or have your web developer exclude mocha.de with the sgo_javascript_combine_excluded_external_paths filter.
• Cloudflare Rocket Loader: add the attribute data-cfasync="false" to the Mocha code, straight after <script. It has to come before src, and Rocket Loader then leaves the script alone:

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

Clear the plugin's cache after every change to these settings.

If the widget doesn't appear

• No approved reviews: the widget stays empty until at least one review has been approved.
• Script removed: open the block again. If the script tag is gone, your account wasn't allowed to add scripts. Paste the code again from an Administrator account.
• Old page in the cache: clear your plugin's cache and, if you have one, your host's or CDN's cache too. 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, one of the exclusions above is missing.
• Consent tool blocking it: some cookie or consent tools hold back external scripts until visitors agree. Check your tool's settings.

Using Elementor or Divi? There are separate guides for Elementor and Divi.