Elements

How to embed another web page with an iframe

September 15, 2026
How to embed another web page with an iframe

In TeleportHQ, an iframe (a window that shows another web page inside your page) lets you embed things like a booking calendar, a Google Form or a video. Drag Iframe from Elements → Primitives → Media onto your page, then paste the page's address into the src field in the Attributes section. The other website must allow being embedded.

Before you start

Steps

  1. In the left sidebar, click Elements.
  2. On the Primitives tab, scroll to the Media group.
  3. Drag Iframe onto the canvas, where the embedded page should go. Or select that spot's container and click Iframe.
  4. With the iframe selected, in the right panel, find the Attributes section near the top.
  5. In src, replace the sample address with yours. For example, https://calendly.com/your-bakery/cake-tasting.
  6. Press Enter. The embedded page loads on the canvas.
The Attributes section of a new TeleportHQ iframe, with its src field highlighted
  1. In the right panel, open Size and set the width and height. A new iframe is 320 × 200 pixels, which is usually too small. For example, set the width to 100% and the height to 700px.

Check that it worked

The embedded page shows inside the iframe on the canvas. On the canvas, clicks select the iframe. To click inside the embedded page, go to the Iframe Settings section and click Preview. The banner "You are in live preview mode." appears; click Exit Preview to go back to editing.

Troubleshooting

The iframe is blank or says the site "refused to connect" The other website doesn't allow being shown inside other sites. There is nothing TeleportHQ or you can change about that. Use the service's own embed code with Code Embed, or link to the page instead. See How to add links and buttons.

The embedded page is cut off or has scrollbars Make the iframe bigger in Size. The page inside the iframe can't resize the iframe for you.

The embed code has more than an <iframe>, for example a <script> An iframe only takes an address. Paste the whole code into a Code Embed element instead. See How to add your own HTML or JavaScript with Code Embed.

Good to know

  • allow in the Attributes section gives the embedded page browser permissions, for example camera; microphone for a video-call widget. Copy it from the service's embed code if it has one.
  • full screen in Attributes lets the embedded content go full screen.
  • A new iframe starts with a sample YouTube video in src. Replace it with your own address.
  • The embedded content loads from the other website, so it only shows when that site is online.
Share

Related Articles

How to add a YouTube or Vimeo video

In TeleportHQ, you add a YouTube or Vimeo video by adding an Iframe element to the page and pasting the video's embed address into its src field in the Attributes section.

How to add your own HTML or JavaScript with Code Embed

In TeleportHQ, you add your own HTML, CSS or JavaScript to one spot on a page by dragging or clicking the Code Embed element in Elements → Primitives → Media, pasting the code into the Code Embed (HTML+CSS+JS) window and clicking Save.

How to add a Google Map

In TeleportHQ, you add a Google Map by dragging or clicking the GMaps element in Elements → Primitives → Media, then typing your address, or latitude and longitude, into the Google Maps Location section of the right panel.

How to preview your site before publishing

In the TeleportHQ editor, click Preview in the toolbar at the bottom of the screen to open a working copy of your whole site in a new tab, where you can click links, try interactions and switch between desktop, tablet and mobile views.

How to set an element's width and height

In TeleportHQ, select an element and type a Width and Height in the Size section of the right panel (in px, %, vw and other units), or drag the handles around the element on the canvas, where the edge snaps to the parent's and neighbours' edges.