iFrame

Double-click the iFrame component on your canvas.

In the Properties panel on the right, paste the URL of the external page into the “URL to page” field.

Optionally, use the scaling option just below the “URL to page” field to adjust how the external page scales within your iframe container.

Spacing Top: Add padding in pixels or percentage to the top of the iFrame section for spacing between sections.

Spacing Bottom: Add padding in pixels or percentage at the bottom of the section.

Width: The width of an iFrame section is fixed to cover 100% of its container; you cannot alter it.

Height: Set the height in pixels, percentage, or choose Auto so the section grows as you add content.

Min H (Minimum Height): Set a minimum height in pixels for the iFrame section. A red stippled horizontal line inside the section indicates the minimum height.

Clip Content: Toggle this option to hide (clip) content that goes beyond the section’s edges.

Resize to Fill Vertically: Click this option to set the section’s height to 100% of its container.

Background: Change the component’s background color.

Border: Adjust border color, line weight, and opacity for the container.

Effects: Add effects such as shadows or blurs to the component’s container.

Since the width is set to 100%, ensure your layout accommodates the full width of the container so the iframe appears correctly.

When setting height using Auto, test in preview mode to verify that the embedded page resizes as expected.

If you embed an external site with scrolling or interactive content, utilising “Clip Content” or “Resize to Fill Vertically” can improve how the frame appears to users.

Make sure the external URL you are embedding allows embedding; some sites may restrict being loaded in an iFrame via headers or settings.