Webflow Integration

How to Embed Testimonials on Webflow

Adding a ShoutHive testimonial wall or popup to your Webflow site takes under a minute. The widget loads via a single script tag, uses Shadow DOM for style isolation, and won't conflict with your Webflow styles.

Embedding the Testimonial Wall

In your ShoutHive dashboard, go to the Wall page and click Share / Embed to copy your embed code.
In the Webflow Designer, open the page where you want the wall.
From the Add panel (shortcut: A), drag an Embed component onto the page.
Paste the embed code into the Embed element's code editor:

<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 Save & Close, then Publish your site.

The wall will not render in the Webflow Designer preview — it only loads on the published site. This is because Webflow's Designer applies CSP restrictions that block external scripts. Always test on your published URL.

Adding a Social Proof Popup

In the ShoutHive dashboard, go to Popups and copy the embed code for your popup.
In Webflow, open Project Settings → Custom Code.
Paste the popup script into the Footer Code section (before </body>):

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

Save and publish. The popup will appear site-wide based on the trigger you configured in the dashboard.

To add the popup to a single page only, use a per-page Embed element instead of the site-wide Custom Code setting.

Customization

Customize the wall appearance by changing data-* attributes on the embed div:

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 (true/ false)

Popup appearance and behavior (position, trigger, animation) are configured entirely 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 Webflow's Embed element or Custom Code.

Common issues

Widget doesn't show in Designer: This is expected. Webflow's Designer preview sandboxes scripts. Publish your site to test.
Widget shows but no testimonials: Check that your wall slug matches (data-slug or data-org) and that you have approved testimonials in your dashboard.
Popup not appearing: Verify the popup is active in your dashboard and the trigger conditions are met (scroll depth, time delay, etc.).

Ready to embed your testimonial wall?

Get started free