The iFrame component allows you to embed external content directly within headful.
After adding the component via the Plus icon in the page editor and opening it, you must first select the iFrame type
iFrame-Type: Link
If you select Link, you can enter a URL in the designated field.
The referenced content will then be displayed directly within the iFrame area.
iFrame-Type: HTML
If you select HTML, you can insert custom HTML code.
The code must be compatible with iFrames and will be rendered within the defined area.
Layout & Height
In the editor, you can also adjust the display settings under Layout:
Default → Displayed within the standard page width
Full → Spans the entire page width
Under Height, you can define the iFrame height:
in pixels (px)
or in percent (%)
This allows you to adjust the frame to fit the embedded content appropriately.
Step-by-Step Guide
Open the page editor in headful.
Click the Plus icon.
Select the iFrame component.
Choose the desired iFrame type (Link or HTML).
Enter the URL or insert your HTML code.
Select the layout (Default or Full).
Define the height in px or %.
Save your changes.
Tips & Tricks
Ensure that external websites allow embedding via iFrame.
Adjust the height carefully to avoid unnecessary scrollbars.
Use the Full layout for content that requires more visual space, such as maps or interactive tools.