How to Embed Interactive Demos in Webflow (Step by Step)

If you are building a SaaS marketing site on Webflow, you have probably considered adding interactive product demos to your landing pages. They convert better than screenshots, better than Loom videos, and better than bullet point feature lists.

This guide walks through exactly how to embed an interactive demo in Webflow using Aceframe - from creating the demo to getting it live on your site.

What you need

• An Aceframe account (free tier works)
• A Webflow site on any plan that supports custom code (Core, Growth, or any paid site plan)
• A Chrome browser (for the recording extension)

Step 1: Create your demo

Install the Aceframe Chrome extension and click the extension icon while on your product.

Click through the flow you want to demo. The extension captures each click as a step - screenshot plus click position. When you are done, click "Stop Recording" and the demo appears in your Aceframe dashboard.

Step 2: Edit your demo

In the Aceframe editor, you can:

• Reorder or delete steps - drag to rearrange, click the X to remove
• Add annotations - text that appears on each step explaining what the viewer should notice
• Set click dot position - move the pulsing dot to where the viewer should click
• Add zoom - focus on a specific area of the screen (up to 3x)
• Insert form steps - capture leads mid-demo with email, name, or custom fields
• Add branching - let viewers choose their own path through the demo
• Password protect - restrict access with a password
• Set expiration - make the demo link expire after a date

Step 3: Get the embed code

Click the Embed button in the demo viewer header. You will see two options:

Inline embed The demo loads directly on the page. Best for landing pages, feature sections, and blog posts.

Popup embed A button that opens the demo in a modal overlay when clicked. Best for CTAs where you do not want the demo taking up page space until the visitor is ready.

Copy your preferred embed code.

Step 4: Add to Webflow

There are three ways to add the embed code to your Webflow site:

Option A: Custom Code Embed element (recommended)

1. In the Webflow Designer, add a Custom Code Embed element where you want the demo
2. Paste the Aceframe embed code
3. The demo will not render in the Designer preview - this is normal for all iframe embeds in Webflow
4. Publish your site to see the demo live

Option B: Page-level custom code

1. Go to Page Settings for the page where you want the demo
2. Scroll to Before </body> tag
3. Paste the embed code
4. This approach works but gives you less control over placement

Option C: Site-wide custom code

1. Go to Site Settings > Custom Code
2. Add the embed code to the Footer Code section
3. Use this if you want the demo on every page (rare, but useful for documentation sites)

Step 5: Configure (optional)

Analytics tracking

Aceframe automatically tracks views, step completion, device type, country, and referrer for every embedded demo. No extra configuration needed.

If you use Google Tag Manager, add your GTM container ID in Aceframe settings. The embed will automatically push these events to your dataLayer:

• aceframe_demo_open - viewer starts the demo
• aceframe_step_advance - viewer moves to next step
• aceframe_lead_capture - viewer submits their email

Lead capture

To collect emails from viewers, toggle Email Gate in the demo settings. Viewers will need to enter their email before the demo starts. Leads appear in your Aceframe dashboard and can be forwarded via webhooks to your CRM.

Webhooks

Set up a webhook URL in Aceframe settings to receive real-time notifications when someone views your demo or submits a lead form. This lets you connect to Slack, HubSpot, or any tool that accepts webhooks.

Responsive behavior

The inline embed uses aspect-ratio: 16/9 with width: 100%, so it scales automatically to fit any container width. On mobile, the demo shows always-visible navigation arrows instead of requiring hover.

The popup embed opens at 90% viewport width (max 960px) with the same 16:9 aspect ratio, and closes when clicking outside the modal.

Customization options

From the Aceframe editor, you can customize:

All customization happens in Aceframe - no need to modify the embed code after pasting it into Webflow.

Troubleshooting

Demo does not show in Webflow Designer: This is expected. Webflow's Designer does not render iframes. Publish to staging or production to see the demo.

Custom code not saving: Make sure you are on a Webflow plan that supports custom code. The free plan does not allow custom code embeds.

Demo shows but is cut off: Make sure the embed element's parent container does not have overflow: hidden with a fixed height. The iframe needs room for the 16:9 aspect ratio.

Demo loads slowly: Aceframe uses lazy loading and AVIF image compression. If the demo still feels slow, check your image sizes in the editor - large screenshots can be cropped down.

Aceframe vs other embed options

Get started

1. Create a free Aceframe account
2. Install the Chrome extension
3. Record your first demo
4. Paste the embed code in Webflow
5. Publish

The whole process takes under 5 minutes. No credit card, no API keys, no plugins.