“Vouchnest

How to add testimonials to Bubble

Embedding your Vouchnest wall of love in a Bubble app is straightforward. Use the HTML element, an iFrame, or a reusable component — the widget handles responsiveness and updates automatically. Here’s how.

The universal snippet

This works on any Bubble page that lets you add HTML or JavaScript. Copy your space ID from your Vouchnest dashboard, replace YOUR_SPACE_ID, and paste both lines where you want the wall to appear.

HTML snippet

<script src="https://cdn.vouchnest.com/widget.js" data-space-id="YOUR_SPACE_ID" async></script>
<div id="vouchnest-wall"></div>

Self-updating

Approve a testimonial in your dashboard — it appears on the wall automatically. No redeploy needed.

Responsive

The wall adapts to any container width. Works on desktop, tablet, and mobile out of the box.

Fast-loading

The widget script is small and loads asynchronously — it won't block your Bubble page render.

No code? Use the hosted wall page

Every Vouchnest space gets a hosted wall page at vouchnest.com/wall/your-space-slug. You can link to it from Bubble with a text element, button, or popup — no code required. It’s the fastest way to add social proof to Bubble when you’re on the free plan.

Platform-by-platform instructions

H

HTML element

  1. 1In the Bubble editor, open the page where you want the testimonial wall.
  2. 2Drag an 'HTML' element from the Visual Elements section onto your canvas.
  3. 3Paste the two Vouchnest snippet lines into the HTML element's code editor.
  4. 4Set the element's dimensions (width 100%, height auto) in the property editor so the wall fills its container.
  5. 5Preview or deploy your app. The wall will render live inside the Bubble page.
I

iFrame element

  1. 1Drag an 'iFrame' element onto your Bubble page from the Visual Elements palette.
  2. 2In the property editor, set the source to your Vouchnest hosted wall URL (vouchnest.com/wall/your-space-slug).
  3. 3Adjust the width and height properties to fit your layout — 100% width with a min-height of 400px works well.
  4. 4Enable 'Lazy load' in the iFrame settings to avoid blocking page render.
  5. 5Deploy your app. The hosted wall will render inside the iFrame with full responsiveness.
R

Reusable element

  1. 1Create a new Reusable Element in Bubble and drag an HTML or iFrame element into it.
  2. 2Paste the Vouchnest snippet (HTML) or hosted wall URL (iFrame) into the element.
  3. 3Save the reusable element and give it a descriptive name like 'TestimonialWall'.
  4. 4Drop the reusable element onto any page in your app where you want testimonials.
  5. 5Update the reusable element once to push changes everywhere it's used — perfect for multi-page apps.
W

Workflow injection

  1. 1Go to the Bubble Workflow editor and create a new event (e.g., Page is loaded).
  2. 2Add a 'Run JavaScript' action from the toolbox.
  3. 3Paste the Vouchnest snippet into the JavaScript editor, but remove the <div> container line.
  4. 4Create a group element on your page with a fixed ID, then use document.getElementById in your script to append the wall inside it.
  5. 5This approach gives you full control over when and where the wall loads, including conditional visibility.
H

Hosted wall

  1. 1Copy your Vouchnest hosted wall URL from your dashboard.
  2. 2Add a text or button element in Bubble and set its 'Go to page' action to open the hosted wall URL.
  3. 3For an inline experience, use the 'Open external link in popup' workflow action.
  4. 4Your hosted wall is fully responsive, works on mobile, and updates automatically.
  5. 5Use this method when working in Bubble's free plan where the HTML element is restricted.

Frequently asked questions

Does it work with Bubble's responsive engine?+

Yes. The Vouchnest widget is fully responsive and works within Bubble's responsive layout engine. Set the parent container to 100% width and the wall will adapt. For the HTML element, avoid fixed height values — let the widget auto-size based on content.

Can I trigger the wall dynamically?+

Absolutely. Use Bubble's 'Run JavaScript' workflow action to inject the Vouchnest snippet when a condition is met — e.g., after a user submits a form or reaches a certain scroll depth. Combine with custom states for full dynamic control.

Will it work in Bubble's native app?+

Yes. The HTML and iFrame elements both work in Bubble's native mobile wrapper apps (iOS and Android). The wall is fully responsive and touch-friendly. Test on a physical device after deployment to confirm the layout.

Can I use it without Bubble paid plan?+

The HTML element is only available on Bubble's paid plans. If you're on the free plan, use the iFrame method or link to your hosted wall page. Both approaches work without any paid Bubble features.

Widget types

Wall (grid)

A masonry grid of all your approved testimonials. Best for dedicated social proof pages in your Bubble app.

data-layout="grid"

Carousel

A horizontal slider that cycles through testimonials. Good for landing page sections with limited vertical space.

data-layout="carousel"

Single quote

Rotates through one testimonial at a time. Perfect for a hero section or sidebar in your Bubble app.

data-layout="single"

Add social proof to your Bubble app in minutes

Create a free Vouchnest space, collect your first testimonials, and embed them in your Bubble app — no developer needed. The wall updates itself from then on.

Start free — no credit card