How to Use an iFrame Element in FlexiFunnels

What is the iFrame element, and why use it?

An iFrame is a window on your page that shows another web page inside it. Think of it like a picture-in-picture TV: your landing page is the main screen, and the iFrame is a small built-in screen showing content from somewhere else — all without the visitor ever leaving your page.

Why use it? Because sometimes the thing you want to show already lives on another site, and rebuilding it would be a waste. Common uses:

• Embedding a booking calendar (like Calendly).
• Showing a Google Form, a survey, or a document.
• Displaying a tool, dashboard, or page hosted elsewhere.
• Pulling in content from another website you own.

What does "iFrame" mean? It stands for "inline frame." "Inline" means inside your page, and "frame" means a window — so it's a window placed inside your page that displays another page. The address you give it is called the source (the page it shows).

Quick reminder on where elements live: Every FlexiFunnels page follows the Section → Row → Element structure. The iFrame drops into a Row like any other element.

Step 1: Add the iFrame element to your page

On your Landing Page Editor:

1. Click the Add (+) icon on the left-side panel.
2. Select Components.
3. Select Elements.
4. Click the iFrame element to add it to your page.

Step 2: Set the source and size

1. Hover over the iFrame element and click the gear icon to open its settings.

Fill in the settings:

• Source — Paste the full URL of the page you want to display inside the window. This is the most important field — it's what the iFrame shows. (Use the complete address starting with https://.)

• iFrame Height — Adjust how tall the window is. You can set this separately for Desktop and Mobile, so the embedded content fits nicely on both.

Step 3: Save or publish

• Click SAVE to keep your changes as a draft (not yet visible to visitors).
• Click PUBLISH to push your changes live on the real page.

⚠️ Important: An iFrame's embedded content usually only loads properly on the published page, not inside the editor. So if the window looks empty while editing, that's normal — publish and check the live page.

Common situations & quick fixes

Check these before contacting support — iFrames have a few quirks worth knowing.

"My iFrame is blank / shows nothing." → Work through these in order:

1. Check the Source URL. It must be the complete address starting with https:// — not a partial link or a handle.
2. Test on the published page, not the editor. Embedded content often won't appear in the building view.
3. Some websites block being embedded. This is the most common cause (see below).

"The page I'm trying to embed refuses to show / shows an error like 'refused to connect'." → This isn't a FlexiFunnels problem — many websites deliberately block themselves from being shown inside other pages (for security). Sites like YouTube, Google Maps, banks, and most major platforms do this. Fix: Look for an "embed" or "share" link from that site specifically meant for embedding. For example, YouTube and Google Maps each give you a dedicated embed URL — use that instead of the normal page address. If the site offers no embed option, it can't be iFramed, and you'll need a different approach (like a button linking out to it).

"The embedded content is cut off or scrolls awkwardly." → Adjust the iFrame Height — and remember to set it separately for Desktop and Mobile. Embedded content (like long forms) often needs more height than you'd expect.

"It looks fine on desktop but broken on mobile." → Set a separate Mobile height. Also check that the embedded page itself is mobile-friendly — if the source page isn't responsive, it won't magically become so inside the iFrame.

"My embedded form/calendar loads but won't let me click or submit." → This is usually a restriction from the source site, not FlexiFunnels. Many tools (Calendly, Typeform, etc.) provide their own official embed code or embed URL designed to work correctly — use that rather than their regular page link.

"It worked yesterday but now it's blank." → The external site may have changed its settings or gone down. Open the Source URL directly in a new browser tab to confirm the page still exists and loads on its own.

Need more help?

If your iFrame still isn't working after the steps above, submit a ticket and include:

• The page URL where the iFrame sits
• The exact Source URL you entered
• Whether that source page opens fine on its own in a browser
• What you expected vs. what's actually showing
• A screenshot of your iFrame settings