How to Add an Interactive Demo to a Bubble App
August 19, 2026
Bubble has an HTML element that takes arbitrary markup, so embedding a demo is straightforward.
What makes Bubble more interesting than a static site builder is that it knows who is looking, which opens up placements a marketing page cannot do.
The basic embed
Drag an HTML element onto the page and paste your embed code. Set the element to a fixed aspect ratio or use Bubble's responsive settings so it scales with the container.
Bubble's responsive engine can fight a fixed-height iframe. Setting the iframe to `width: 100%; height: 100%` and controlling size on the Bubble element is the arrangement that behaves.
Conditional demos are the real opportunity
- Onboarding: show a getting-started demo only to users whose account is less than a week old.
- Feature discovery: show a demo of a feature only to users who have never opened it.
- Plan-based: show a demo of a premium feature to users on a lower plan, as an upgrade prompt rather than a locked screen.
Use dynamic data in the demo
If your demo tool supports text tokens through URL parameters, Bubble can fill them from the logged-in user. Appending something like `?v_name=` with the current user's name gives every user a demo with their own details in it.
This is more effective in-app than on a marketing page, because you actually know who they are rather than guessing.
Keep it out of the critical path
Bubble apps are not the fastest thing on the web, and an embed on a page users hit constantly adds weight to every visit.
Put demos on onboarding and help pages rather than the main dashboard, and use conditional visibility so the element is not even rendered for users who do not need it.
Frequently asked questions
- Can you embed an interactive demo in Bubble?
- Yes, using the HTML element with your iframe embed code. Set the iframe to width and height of 100% and control the sizing on the Bubble element, which avoids fighting Bubble's responsive engine.
- Can I show different demos to different Bubble users?
- Yes, and it is the main advantage of embedding in Bubble rather than a static site. Use conditional visibility on account age, plan, or whether they have used a feature, so each user sees the demo relevant to them.
- Will an embedded demo slow down my Bubble app?
- It adds weight to any page it is on, so keep it off pages users hit constantly. Onboarding and help pages are the right homes, and conditional visibility means it is not rendered at all for users who do not need it.
Keep reading
This is what Demorta does
Click through it — the same kind of demo you can record of your own product.
Try it on your own product
Record your first interactive demo free.
Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.
Start free →