Step by step guide to embedding Demoboost demos on your website

So, you’ve got a killer product demo built in Demoboost, and now you want it right there on your website—front and center, not hidden behind a “request access” form that nobody fills out. This guide is for folks who actually touch the website (marketers, product folks, devs, whoever), not just someone forwarding tickets to IT and hoping for the best.

You’ll get a real, practical walk-through—no jargon, no hand-waving. I’ll cover how to grab your Demoboost demo, get it onto your site (WordPress, custom HTML, whatever), avoid common headaches, and make sure it actually works for real users.

Let’s get to it.

Why embed a Demoboost demo? (And who shouldn’t bother)

Embedding an interactive demo isn’t magic, but it is a smart move if:

You want visitors to try your product without a signup wall.
Your sales team is tired of explaining the same features for the hundredth time.
You want to qualify leads before they ever talk to a human.

But, if your product is super complex, needs live data, or your audience just isn’t going to click through a demo, embedding might not move the needle. And if your site takes forever to load already, adding another script could make things worse. Just something to keep in mind.

Step 1: Build (or pick) your Demoboost demo

Before you copy a single line of code, you need a finished demo in Demoboost. Sounds obvious, but you’d be surprised how often people try to embed a half-finished walkthrough.

Checklist before you embed: - The demo should be published and set to “public” (unless you want to lock it down). - You’ve previewed it—seriously, run through the whole thing. - The branding matches your site (logo, colors, etc.). - You know which version or variant you want to show.

Pro tip: Not all demos are worth embedding. If it’s 30 steps long or needs a sales rep to explain every screen, your website visitors will bail. Stick to short, self-guided demos.

Step 2: Grab the embed code from Demoboost

Demoboost gives you an embed code for each demo—usually an <iframe>. Here’s how to get it:

Log in to Demoboost and find your demo.
Open the demo’s settings or sharing options.
Look for a button or menu labeled “Embed,” “Share,” or similar.
Copy the provided HTML embed code. It’ll look something like this: html
Double-check the width and height values. Demoboost defaults to fixed sizes—if your site is responsive, you’ll want to tweak this (more on that later).

Heads up: If you don’t see an embed option, your demo might not be published or you don’t have permissions. Talk to whoever owns the Demoboost account.

Step 3: Decide where to place the demo on your website

Don’t just slap the demo anywhere. Think about:

Landing pages: Great for showing off features.
Product pages: Let visitors “try before they buy.”
Help docs: Use interactive demos for onboarding or support.

What not to do:
Don’t stick an embedded demo in your site footer, or bury it three clicks deep. People won’t find it, and you’ll wonder why nobody’s using it.

Step 4: Embed the demo in your site’s code

Here’s where most people overthink things. Embedding is usually as simple as pasting the <iframe> code in the right spot.

For custom HTML sites

Just drop the code into your HTML file where you want the demo to appear:

html

Use width="100%" to make it responsive (but see the next step for better options).
Adjust height as needed, or handle with CSS.

For WordPress and other CMSs

In WordPress, use a Custom HTML block and paste the iframe code.
On Webflow, use an “Embed” element.
For Wix, look for the “Custom Embed” or “HTML iframe” widget.

Got a website builder that hates iframes?
Some free or low-end builders block iframes, or only allow certain sources. Check the documentation or support forums. If you’re blocked, there’s not much you can do except upgrade, switch platforms, or link out to the demo instead.

Step 5: Make it responsive (so it doesn’t look broken on phones)

Most default iframe embeds aren’t mobile-friendly. On a phone, they’ll either squish weirdly or force people to scroll both inside and outside the iframe (which is a pain).

Here’s a simple CSS trick for responsive iframes:

css .demo-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; / 16:9 aspect ratio / height: 0; overflow: hidden; max-width: 800px; / Optional: set a max width / margin: auto; / Center it / }

.demo-wrapper iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 0; }

Wrap your iframe in a <div class="demo-wrapper">.
Adjust the padding-bottom to tweak the aspect ratio.
This keeps the demo looking good on desktops and phones.

Don’t ignore this step. Nothing says “we don’t care about mobile users” like a busted iframe.

Step 6: Test it—on real devices, not just your laptop

Before you go live, check:

Loads correctly on desktop and mobile browsers.
No weird scrollbars or blank space.
Demo starts and works as expected (no errors or login prompts).
Site speed: Embeds can slow things down, especially if your page is already heavy.

Testing tips: - Use Chrome’s “Device Toolbar” (F12) to spoof phones/tablets. - Ask a coworker to try it on their phone—sometimes fresh eyes catch what you miss. - If your site uses cookie banners, make sure they don’t block the demo.

Step 7: Track engagement (without creepy spyware)

You probably want to know if people are actually using the embedded demo. Demoboost’s built-in analytics cover usage in the demo, but you might want to track who interacts with it from your site.

Option 1: Use Demoboost’s own analytics - Most teams just use what Demoboost gives you (views, completions, drop-off points). - Pro: Simple. Con: Not always tied to your web analytics.

Option 2: Use Google Analytics or similar - Set up an event trigger when the iframe loads or when users click the “Start Demo” button. - You’ll need a little custom JavaScript, and it won’t be perfect (iframes are a sandbox).

Honest take:
Don’t obsess over micro-metrics. If you’re getting demo completions and more qualified leads, it’s working. If not, the problem’s probably not your embed—it’s your demo or your traffic.

Step 8: Keep your demo fresh (and don’t forget to update embeds)

Product changes, and nothing says “out of date” like a demo showing features you killed months ago.

Schedule a quarterly review of your embedded demos.
If you update the demo in Demoboost, the embed updates automatically—as long as you keep the same demo ID. If you create a new demo, you’ll need to update the embed code on your site.
Remove demos that don’t reflect your current messaging or UI.

Pro tip:
If you’re doing A/B testing, create separate demos and swap embed codes as needed. Don’t try to hack the same demo for every use case.

What doesn’t work (and isn’t worth your time)

Trying to “style” the inside of the iframe:
You can’t. The demo is sandboxed. If you want visual tweaks, do it in Demoboost, not your site CSS.
Embedding on every page:
Overkill. One or two high-intent pages is plenty. Too many demos = nobody cares.
Embedding private demos behind logins:
If your demo requires a login, most users won’t bother. If you need to gate access, consider linking out instead.
Expecting SEO magic:
Google can’t see inside an iframe. Embedding a demo won’t help your rankings.

Final thoughts: Keep it simple, iterate fast

Embedding a Demoboost demo isn’t rocket science. The hardest part is making sure your demo actually helps visitors do what you want—learn, convert, get excited. If it’s not working, don’t tinker with code—fix the demo or where you’ve placed it.

Start with one high-traffic page, see how people use it, and improve. Don’t get caught up in perfection. The point is to help real humans, not just tick a box for “interactive content.”

If you run into weird issues, check the docs, ask around, or just try it—worst case, you delete the embed and nobody’s the wiser.

Good luck. Get your demo out there, and see what happens.