How to use Iframes in TeleportHQ

An inline frame (iframe) is a HTML element that loads another HTML page within the document.

It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.

Find out how to use the Iframes element in TeleportHQ.

Adding iframes to the canvas
Changing Iframe content
Customizing Iframes

Adding Iframes to the canvas

To add an Iframe to your project you just need to select it from the Elements panel, then drag and drop it in the canvas, in the container of your choice.



For now, iframes cannot be selected in the canvas, only in the Layers & Files tab (tree view)

Changing Iframe content

To change the source of the Iframe and therefore the content displayed inside, go to the Right side panel and in the HTML section, in the src field, add the Source URL from the Iframe code snippet.



A website owner has the option to not allow it to be embedded in other sites. They can do this by using the X-Frame-Options header. There is nothing you can do on your end to bypass this.

Customizing Iframes

Like any other element used in TeleportHQ you can customize Iframes using CSS rules. From the Right side panel, in the HTML section you can use the Allow field to add functionalities to your Iframe. From the other panels in the Right side menu you can: add CSS classes, change the Iframe’s size and position, add padding, margins, borders and more.

Updated on: 15/02/2023