Skip to main content

Iframe Element

The Iframe element embeds external content in your popup. Use it for forms, widgets, calculators, and any third-party content.

Overview​

PropertyValue
Element Typeiframe
Can Contain ChildrenNo
Content TypeExternal HTML

Use Cases​

  • Embedded forms (Typeform, Google Forms, etc.)
  • Calendars and scheduling widgets
  • Payment forms
  • Survey embeds
  • Social feeds
  • Third-party widgets
  • Custom HTML content

Content Settings​

Source URL​

The URL to embed:

https://forms.example.com/my-form

Common embed sources:

  • Typeform
  • Google Forms
  • Calendly
  • HubSpot forms
  • MailChimp signup
  • Social media feeds
  • Custom web pages

Title​

Accessibility title for the iframe:

Title: Contact Form

Size Settings​

Width​

Iframe width:

OptionDescription
Full100% container width
FixedSpecific pixel width
PercentagePercentage of container

Height​

Iframe height:

Height: 500px
Important

Iframes don't auto-size. Set an appropriate fixed height for your content.

Aspect Ratio​

Alternative sizing:

RatioUse Case
16:9Videos, wide content
4:3Forms
1:1Square widgets

Style Settings​

Border​

Iframe border:

OptionDescription
NoneNo border (border: none)
SolidSolid border
CustomCustom border style

Border Radius​

Round corners:

Border Radius: 8px

Shadow​

Add depth:

Shadow: 0 4px 12px rgba(0,0,0,0.1)

Background Color​

Show while loading:

Background: #f8fafc

Iframe Attributes​

Scrolling​

Control scrollbar visibility:

OptionDescription
AutoShow when needed
YesAlways show
NoNever show

Allow Fullscreen​

Enable fullscreen mode:

OptionDescription
EnabledAllow fullscreen
DisabledPrevent fullscreen

Allow Attributes​

Security and feature permissions:

AttributeDescription
allow-scriptsEnable JavaScript
allow-formsAllow form submission
allow-popupsAllow popup windows
allow-same-originSame-origin access

Referrer Policy​

Control referrer information:

PolicyDescription
no-referrerDon't send referrer
originSend origin only
strict-originStrict origin

Loading Settings​

Lazy Loading​

Load when visible:

OptionBenefit
EnabledBetter performance
DisabledImmediate load

Loading Indicator​

Show while iframe loads:

OptionDescription
SpinnerLoading spinner
SkeletonPlaceholder skeleton
NoneNo indicator

Layout Settings​

Alignment​

Position the iframe:

OptionDescription
LeftAlign to left
CenterCenter horizontally
RightAlign to right

Margin​

Space around the iframe.

Advanced Settings​

HTML ID​

Custom ID for targeting.

CSS Classes​

Add custom classes.

Sandbox​

Restrict iframe capabilities for security:

sandbox="allow-scripts allow-forms"

Examples​

Contact Form (Typeform)​

URL: https://yourname.typeform.com/to/formID

Settings:

  • Width: 100%
  • Height: 500px
  • Border: None
  • Border Radius: 0
  • Scrolling: No

Calendly Scheduler​

URL: https://calendly.com/username/meeting

Settings:

  • Width: 100%
  • Height: 630px
  • Border: None
  • Background: #ffffff

Google Form​

URL: https://docs.google.com/forms/d/e/.../viewform?embedded=true

Settings:

  • Width: 100%
  • Height: 800px
  • Scrolling: Yes
  • Border Radius: 8px

Payment Widget​

URL: https://payment-provider.com/embed/...

Settings:

  • Width: 100%
  • Height: 400px
  • Sandbox: allow-scripts allow-forms
  • Border Radius: 8px
  • Shadow: 0 2px 8px rgba(0,0,0,0.1)

Social Feed​

URL: https://widget.example.com/feed/...

Settings:

  • Width: 300px
  • Height: 400px
  • Scrolling: Yes
  • Lazy Load: Enabled

Responsive Considerations​

Width​

  • Use 100% width for responsive behavior
  • Set max-width if needed

Height​

  • Consider shorter heights for mobile
  • Use device-specific heights: 
    Desktop: 600px
    Tablet: 500px
    Mobile: 400px

Hide on Mobile​

Some iframes work poorly on mobile. Consider:

  • Hiding iframe on mobile
  • Showing alternative content (link, button)

Common Issues​

Iframe not loading​

  • Check URL is embeddable
  • Verify CORS/X-Frame-Options allow embedding
  • Check for HTTPS requirements

Content cut off​

  • Increase height
  • Enable scrolling
  • Check content responsive behavior

Security errors​

  • Add appropriate allow attributes
  • Check sandbox settings
  • Verify URL protocol (HTTPS)

Slow loading​

  • Enable lazy loading
  • Use loading indicator
  • Optimize embedded content

Security Best Practices​

  1. Use HTTPS — Always embed HTTPS URLs
  2. Sandbox when possible — Restrict iframe capabilities
  3. Trusted sources only — Only embed content you trust
  4. Minimal permissions — Only enable needed features
  5. Review regularly — Check embedded content periodically

Testing Iframes​

Before publishing:

  1. Test on all devices
  2. Verify form submissions work
  3. Check loading performance
  4. Test with slow connections
  5. Verify accessibility
  • Video — For YouTube/Vimeo (use Video element instead)
  • Maps — For Google Maps (use Maps element instead)
  • Button — Alternative: link to external page