Framer Integration

How to Embed Testimonials on Framer

Add a ShoutHive testimonial wall or popup to your Framer site in under a minute. The widget uses Shadow DOM for complete style isolation, so it won't interfere with your Framer design.

Embedding the Testimonial Wall

In your ShoutHive dashboard, go to the Wall page and copy your embed code.
In the Framer editor, navigate to the page where you want the wall.
Press / or use Insert → Embed to add an HTML Embed component.
Paste the following code into the embed component:

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

Resize the embed frame if needed, then Publish your site.

Use the HTML Embed component (not a Framer Code Component) for the simplest setup. The HTML embed handles the script loading automatically.

Adding a Social Proof Popup

In the ShoutHive dashboard, go to Popups and copy the embed code.
In Framer, open Site Settings → Custom Code.
Paste the popup script into the End of body section:

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

Save and publish. The popup will appear on all pages based on your trigger settings.

To limit the popup to specific pages, add the script via an HTML Embed component on that page instead of the site-wide Custom Code.

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 (position, trigger, animation, timing) are all managed from the ShoutHive dashboard.

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 Framer's embed component or Custom Code settings.

Common issues

Widget doesn't show in editor preview: The widget loads fully on the published site. Framer's editor may sandbox scripts — publish to test.
Embed component shows blank space: The wall renders inside Shadow DOM, so the embed frame may need manual height adjustment. Alternatively, let it auto-size on the live page.
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