Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Iframe

Iframe

How to use Iframe Widget of Sky Addons for Elementor

Iframe is a flexible embed widget for Elementor that lets you display any external website or page inside your own. Beyond a plain embed, it can wrap the content in realistic device frames — browser windows, laptops, phones, tablets, even a TV or watch — which makes it perfect for portfolio previews, app showcases, and live demos. With lazy loading, sandbox security options, aspect-ratio or fixed-height sizing, and accessibility-friendly titles, you stay in full control of how embedded content behaves. This documentation will guide you through the process of using the Iframe Widget to embed external content on your website.

Features:

  1. Embed Any URL: Display external websites, apps, or pages inside your Elementor layout.
  2. Device Frames: Present the embed inside a Browser, Desktop Window, Laptop, Code Window, Phone, Tablet, Surface, TV, or Watch mockup.
  3. Frame Skins: Browser skins (macOS Light/Dark, Windows, Chrome, Edge, Safari), phone skins (Notch / Punch-hole), and tablet skins (iPad / Android).
  4. Two Sizing Modes: Responsive Aspect Ratio (16:9, 4:3, 9:16, and more) or Fixed Height with optional Auto Height.
  5. Lazy Load: Defers loading the embed until needed, protecting your page speed.
  6. Sandbox Security: Restrict what the embedded page may do with granular sandbox permissions.
  7. Accessibility Title: Describe the framed content for screen readers.
  8. Custom Attributes: Add extra attributes to the iframe element in key|value format.

Insert Iframe Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Iframe” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

  1. Source URL: The address of the page to embed (https://…).
  2. Title (accessibility): Describes the framed content for screen readers — recommended for every embed.
  3. Auto Height: Available in Fixed Height sizing. Resizes the frame to the content height — works only for same-origin pages; cross-origin embeds (YouTube, Maps, other sites) block this and keep the Fixed Height.
  4. Allow Fullscreen: Lets the embedded content enter fullscreen mode (useful for video players).
  5. Sandbox: Restricts the embedded page. With the switch on, pick the exact permissions in Sandbox Options — allow-forms, allow-modals, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation, and more.
  6. Custom Attributes: Add extra iframe attributes, one per line, in key|value format (managed attributes and event handlers are ignored for safety).

Device Frame

The Device Frame section wraps your embed in a realistic device mockup:

  1. Frame: None, Browser, Desktop Window, Laptop, Code Window, Phone, Tablet, Surface, TV, or Watch.
  2. Browser Skin: macOS Light, macOS Dark, Windows, Chrome, Edge, or Safari (Browser frame only).
  3. Phone Skin: Notch (iPhone) or Punch-hole (Android).
  4. Tablet Skin: iPad or Android.
  5. Address / Title: The text shown in the title/address bar for Browser, Desktop, and Code frames.
  6. Show Dots: Toggles the traffic-light dots in the bar for Browser, Desktop, and Code frames.

Configure Settings (Lazy Load)

  1. Lazy Load: Enabled by default — the embed loads only when needed, keeping the heavy external page from slowing your initial load.

Style Your Iframe

Control exactly how large the embed renders and how the device mockup looks:

  1. Iframe:
    Choose the Sizing mode — Aspect Ratio (responsive presets from 21:9 down to 9:21, per breakpoint) or Fixed Height with Height and Min Height sliders. Cap the width with Max Width and position the embed with Alignment.
  2. Device Frame:
    Customize the mockup with Bar Color (Browser/Desktop/Code), Frame Color (Laptop/Phone/Tablet/Surface/TV/Watch), Corner Radius, and a full Box Shadow group.

Save and Preview

  1. Once you’ve customized and styled your iframe, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the embedded content loads and the frame looks as desired.

Best Practices

  1. Always set the accessibility Title so screen-reader users know what the frame contains.
  2. Keep Lazy Load on for embeds below the fold — external pages can be heavy.
  3. Sandbox untrusted sources: enable Sandbox and grant only the permissions the embed truly needs.
  4. Testing: Check the chosen aspect ratio or fixed height across devices — phone-style frames pair well with tall ratios like 9:19.5.

Troubleshooting

  1. Embed Shows Blank: Many sites block being framed via X-Frame-Options or CSP headers — that’s a restriction of the target site, not the widget. Try a source you control.
  2. Auto Height Not Working: Auto Height only works for same-origin pages (your own domain); cross-origin embeds keep the Fixed Height.
  3. Embedded Page Broken with Sandbox On: The page may need permissions you haven’t granted — add allow-scripts and/or allow-same-origin in Sandbox Options.

Frequently Asked Questions

How do I embed a website in Elementor with the Iframe widget?

Drop the Iframe widget on the page and paste the address into Source URL. Pick a Sizing mode in the Style tab — Aspect Ratio for responsive embeds, Fixed Height for a set height — and publish. Note that some sites refuse to be embedded by sending X-Frame-Options headers.

How do I show a website inside a phone or laptop mockup in Elementor?

In the Device Frame section, set Frame to Phone, Laptop, Tablet, Browser, or another device. Phones offer Notch (iPhone) and Punch-hole (Android) skins; browsers offer macOS, Windows, Chrome, Edge, and Safari skins, plus an editable address bar.

Why is my iframe blank in Elementor?

The most common cause is the target site blocking framing with X-Frame-Options or a Content-Security-Policy header — common on Google, Facebook, and banking sites. If the source allows framing, also check the URL uses https and that Sandbox isn’t blocking required permissions.

Can the iframe resize automatically to its content height?

Yes, with limits: switch Sizing to Fixed Height and enable Auto Height. It works only for same-origin pages (content on your own domain); browsers block reading the height of cross-origin embeds, which then keep the fixed height you set.

Is the Iframe widget safe for embedding third-party content?

Yes — enable the Sandbox switch and grant only the permissions the embed needs (forms, scripts, popups, and so on). The widget also filters custom attributes so event handlers and managed attributes can’t be injected.

Related Documentation

Conclusion

The Iframe Widget by Sky Addons for Elementor goes far beyond a basic embed — device mockups, sandbox security, lazy loading, and responsive sizing make it the polished way to showcase external content. For further assistance, consult the Sky Addons support team or community forums. Enjoy presenting your embeds in style!

How can we help?