WordPress Integration

How to Embed Testimonials on WordPress

Add a ShoutHive testimonial wall or popup to any WordPress site. The widget works with the block editor (Gutenberg), classic editor, and popular page builders like Elementor and Divi.

Embedding the Testimonial Wall

Block Editor (Gutenberg)

In your ShoutHive dashboard, go to the Wall page and copy your embed code.
In WordPress, open the page or post where you want the wall.
Click the + button to add a new block, then search for and select Custom HTML.
Paste the embed code:

<div data-testimonial-wall
     data-org="your-org"
     data-theme="light"
     data-layout="masonry">
</div>
<script src="https://app.shouthive.com/widget.js"></script>

Click Update or Publish and view the page.

Page Builders (Elementor, Divi, WPBakery)

The same HTML snippet works in any page builder. Use the equivalent HTML/code block for your builder:

Elementor: Add an HTML widget
Divi: Add a Code module
WPBakery: Add a Raw HTML element

Adding a Social Proof Popup

For site-wide popups, add the script to your theme's footer. For a single page, use a Custom HTML block instead.

Site-wide (via theme footer)

In the ShoutHive dashboard, go to Popups and copy the embed code.
In WordPress, go to Appearance → Theme File Editor (or use a plugin like Insert Headers and Footers).
Paste the popup script before the closing </body> tag:

<script
  src="https://app.shouthive.com/popup-widget.js"
  data-popup-id="your-popup-id"
  async
></script>

Save and visit your site to verify the popup appears.

Using a "Header/Footer Scripts" plugin (like WPCode or Insert Headers and Footers) is the easiest way to add site-wide scripts without editing theme files directly.

Customization

Customize the wall by changing data-* attributes:

data-theme — light, dark, or auto
data-layout — masonry, grid, carousel, or coverflow
data-rows / data-speed — carousel row count and scroll speed
data-anim-entrance, data-anim-tilt, data-anim-flip — animation toggles

Popup settings are managed from the ShoutHive dashboard — no code changes needed.

Troubleshooting

Do not load the widget via Google Tag Manager. The widget infers its API endpoint from the script tag's src attribute, which GTM does not preserve. Paste the script directly into your page or theme.

Common issues

Caching plugin conflicts: Plugins like WP Rocket or W3 Total Cache may minify, concatenate, or defer scripts in ways that break the widget. If the widget doesn't load, try excluding widget.js from your caching plugin's script optimization settings.
Widget not showing in editor preview: The Custom HTML block shows raw code in the editor. Click Preview or view the published page to see the rendered widget.
Security plugin blocking: Some WordPress security plugins restrict external scripts. Whitelist app.shouthive.com in your plugin's allowed domains if the widget fails to load.
No testimonials showing: Verify your wall slug and that you have approved testimonials in the dashboard.

Ready to embed your testimonial wall?

Get started free