Skip to main content

IFrame

Use IFrame to embed an external page, widget, scheduler, calculator, form, or tool inside an Atomicat page when the provider gives an iframe snippet or URL.

How It Works In Atomicat​

The 3.0 IFrame drawer exposes a content field plus responsive width and height controls. Width and height support units and reset behavior, with maximums that depend on whether the selected unit is percent or pixels. Unlike the HTML element, IFrame is focused on iframe content and sizing rather than arbitrary markup.

When To Use It​

  • Embed a booking calendar, third-party calculator, external form, or partner widget.
  • Isolate external content from the rest of the page layout.
  • Place a trusted iframe inside a Container with a clear headline and fallback instructions.
  • Use when the provider specifically recommends iframe embed code.

Configure The Element​

  • Paste the iframe content or provider embed code into the content field.
  • Set width to fit the parent container; 100% is usually safest for responsive pages.
  • Set height large enough to avoid inner scrollbars when possible.
  • Place the iframe in a container that has enough spacing around it.
  • Use nearby Text to explain what visitors should do inside the embedded content.

Testing Notes​

  • Test the iframe on the published URL because some providers block previews or unknown domains.
  • Check mobile height and scrolling carefully.
  • Confirm the embedded provider allows your domain in its security settings.

Limitations And Tips​

  • Some websites block iframe embedding with security headers.
  • Iframes can slow down page load and may not inherit Atomicat styling.
  • Do not embed sensitive workflows unless the provider supports secure embedding.

FAQ​

Why is my iframe blank?

The external site may block embedding, require an allowed domain, or fail to load in preview.

Should I use HTML or IFrame?

Use IFrame for iframe embeds and sizing. Use HTML only when you need custom markup beyond an iframe.

Can I control iframe height per device?

Yes. Width and height use responsive style controls.