The Iframe element allows you to embed external web content directly inside your layout. Use it to display websites, dashboards, or apps hosted outside of Final. The Iframe is rendered as an embedded frame and is isolated from the rest of your Builder content for security and compatibility.
The Editor tab controls the source of the embedded content.
Load URL/IP – Enter the address of the site or app you want to load, such as https://yourdomain.com. Then click Load Frame to preview it inside Builder.
Note: The website you embed must allow iframe access. Otherwise, the content will be blocked and won’t display in your layout.
Use the Styler tab to control layout, spacing, borders, and appearance of the Iframe container.
Height – Sets the vertical space of the frame. Choose:
Fit – Matches the height of the embedded content.
Fill – Expands to fill the available vertical space.
Custom – Enter a pixel value for a fixed height.
Scroll – Allows vertical scrolling if the embedded content exceeds the frame height.
Width – Sets the horizontal size. Options:
Fit – Shrinks to match content width.
Fill – Spans the full container width.
Custom – Enter a specific width in pixels.
Scroll – Enables horizontal scrolling if the content overflows.
Padding – Adds internal spacing between the iframe and its container edges. You can set each side individually or use Apply all.
Margin – Adds external spacing between the iframe and nearby elements.
Radius – Rounds the corners of the iframe container.
Styling – Choose which sides display a border (e.g., all, top only).
Border width – Set the thickness in pixels.
Border color – Choose a solid, global, or dynamic color.
Border style – Select from solid, dashed, or dotted.
Add shadow – Adds a drop shadow around the iframe for visual depth. You can configure shadow size, offset, and color.
The Advanced Settings tab provides tools for more complex use cases such as fine-tuned styling.
You can define custom CSS rules to style the iframe container, such as adding borders, shadows, or padding. Note that these styles do not affect the content inside the iframe, only the outer frame that holds it.
