Bubble installation
Bubble App Testimonials with HTML Element
Building testimonials natively in Bubble means a data type, a repeating group and workflows to fill it. The HTML element skips all of that: drop one on the page, paste the StoryProof code, and the widget renders when the app runs. Bubble only executes script tags in run mode, so the editor will show an empty box.
- Code for a Bubble HTML element
- Why Display as iFrame should usually stay off
- Testing in preview instead of the editor
Code generator
Paste this into a Bubble HTML element
Enter the widget id. Both lines go into the HTML element’s content field. Leave Display as iFrame unchecked so the widget can size itself with the page.
An HTML element on the page
Design tab › Visual elements › HTML › draw it on the page › property editor content box
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Click Preview to open the app in run mode. Script tags never execute in the Bubble editor, so judge the widget only in preview or on the live app.
Your widget id is combined with the code locally in this tab.
The problem, solved
What makes testimonials hard in a Bubble app, and the StoryProof route
- Problem 1
A data type and workflows for quotes?
The native approach means a Testimonial type, privacy rules, a repeating group and an admin page to approve entries, all before a single quote appears.
How StoryProof solves it
Testimonials are collected, approved and stored in StoryProof. The app only renders a widget, so none of that lives in your Bubble database.
- Problem 2
Users have nowhere to leave a testimonial
Building a submission form with video recording in Bubble is a project of its own.
How StoryProof solves it
Add a Bubble button or link that opens your StoryProof collection link. Users can record a video, leave an audio note or type a review there, with nothing to install.
- Problem 3
The editor shows an empty box
It looks like the code failed, so builders swap snippets or tick options until something else breaks.
How StoryProof solves it
Nothing is wrong: the embed is a div and one async script, and Bubble runs scripts only in run mode. Preview the page to see it.
- Problem 4
Landing page and dashboard need different proof
A public page wants persuasion for visitors; a logged-in screen wants proof for users deciding whether to upgrade.
How StoryProof solves it
Create a widget for each screen and pick the approved testimonials that suit it. Each HTML element points at its own widget id.
In StoryProof
Add it to a Bubble page
Step 1 of 5
Prepare the widget in StoryProof
Pick the approved testimonials and a layout that suits the space on the Bubble page, then copy the widget id.
Step 2 of 5
Draw an HTML element
In the Design tab, choose HTML under visual elements and draw it where the testimonials belong. Give it a sensible minimum height so the layout does not jump while the widget loads.
Step 3 of 5
Paste the code and keep iFrame off
Paste both lines into the element’s content in the property editor. Leave Display as iFrame unchecked: in iFrame mode the HTML runs as a separate page inside a fixed box.
Step 4 of 5
Set the element to fit its content
Use the element’s fit size option (with a minimum and maximum if you like) so the widget grows with its testimonials instead of being clipped.
Step 5 of 5
Preview, then deploy
Open Preview to test in run mode on desktop and mobile widths, then deploy to live when it looks right.
Display as iFrame: on or off?
Before you start
Bubble limits
Scripts do not run in the editor
Bubble states that script tags execute in run mode only. The empty box in the editor is normal.
Hidden groups need a test
If the HTML element sits in a group that is hidden when the page loads and shown later, preview that exact flow. StoryProof has not documented how a widget behaves when its div appears after the page has loaded.
Header code applies broadly
Bubble warns that code in its page header settings can break the app if it is wrong. Paste only the single script line there and nothing else.
No Bubble plugin
StoryProof is not a Bubble plugin; it uses the built-in HTML element. Widgets per workspace: Free 1, Starter 5, Pro unlimited. A small "Powered by StoryProof" badge shows until Pro.
Bubble manual as of 2026-11-12
Element and setting names follow the Bubble manual as read on 2026-11-12. The steps have not been followed in a real app yet, and Bubble’s editor is updated often.
FAQ
Questions people ask
Short answers to what usually comes up next.
Do I need a paid Bubble plan for the HTML element?
The Bubble manual page for the HTML element does not mention a plan requirement. Check your plan if the element is missing from the Design tab.
Can testimonials be stored in my Bubble database too?
They stay in StoryProof. The widget reads them from there, so there is nothing to sync into a Bubble data type.
Why does the widget look squashed?
Usually the element has a fixed height or iFrame mode is on. Turn iFrame off and let the element fit its content.
Can I insert dynamic data into the HTML element?
Bubble allows it, but the widget id is fixed per widget, so there is rarely a reason. If different users should see different widgets, use separate HTML elements with conditions instead.
Still have a question? Ask the StoryProof team or book a demo.
Skip the repeating group
Collect and approve testimonials in StoryProof and show them in one Bubble HTML element.
Sources
- HTML (visual element properties), Bubble Manual. Checked 2026-11-12.
- SEO / metatags, Bubble Manual. Checked 2026-11-12.
Last updated 2026-11-12.