> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Iframes

**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. Here's how to use the Iframes element in TeleportHQ.

|    |    |    |
| --- | --- | --- |
| [1. Adding iframes to the canvas](#2-adding-iframes-to-the-canvas) | [2. Changing Iframe content](#2-changing-iframe-content) | [3. Customizing Iframes](#2-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. 

![Adding iframe element to the canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-add-iframe-to-canvas_1l7k4x9.gif)

|| 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.

![Copy src property for the iframe](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-copy-embed-source_328n3m.gif)

||| 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. 

![Adding src property to the iframe element in the canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-adding-source-to-iframe_xtm6ng.gif)