What is an iframe?

HubSpot Employee

An iframe is an HTML document that is embedded inside another, such document on a website. In other words, an iframe can be used to insert a piece of content from another source into a webpage.

 

There are certain scenarios when using iframe within your pages is fine, such as when you have relatable, externally hosted content (an image, embedded video, short instructions, small decoration to name a few), you wish to have on your page.

 

However, the constant use of iframes can affect your ability to customize your pages. CSS on your site cannot affect content within an iframe, because it is hosted elsewhere. An iframe should not be used as an essential part of your site, but rather as a piece of content within it. For example, if you have an external hosted page, it is advised that one should not iframe it within another to save time and resources on recreating it.

 

Additionally, any time an iframe is loaded, scripts on the iframed page load. This can inflate Google Analytics or HubSpot page views of the iframed page.

 

To create an iframe:

<iframe src="$PAGEURL" width="$WIDTH" height="$HEIGHT" frameborder="0" scrolling="no"></iframe>

Replace the following variables:

  • $PAGEURL with the URL of the content you are iframing
  • $WIDTH with the width the iframe should span (px or %)
  • $HEIGHT with the height the ifram should span (px or %)

To complete the insertion of the iframe, take the code and insert it within a HTML module of the page you're inserting the iframe into.


Please note:
 due to the nature of iframes, they cannot be used within a HubSpot email.
4 Replies
Community Manager

Thanks for sharing!

Reply
0 Upvotes
Occasional Contributor | Gold Partner | Certified Trainer

Thanks, this is very helpful.

I am busy trying to add a  home slider banner as an iframe.

Is this best practice and if so why is it not loading - any advice to troubleshoot this?

Reply
0 Upvotes
Community Manager

@Jsum is this something you are able to advise on? Thanks!

Reply
0 Upvotes
Highlighted
Top Advisor

@NicoleSengers,

 

Iframes are used to show information from one website on another. examples are iframes iclude:

 

analytics snippets

video (youtube, vimeo, dailymotion, etc.)

careers plugins

investor information

interactive third party services (Hubspot forms, etc)

etc.

 

basically an iframe (or embed code) is an easier version of hooking into an api to pull data. I don't know why you would want to use an iframe for a slider but if it is because the slider is being provided by another site then typically that site will provide an iframe code to paste into your site. 

 

If all of the information in your slider is native to the page you are working on then I would suggest a simple set of divs and the use of slick.js. http://kenwheeler.github.io/slick/

 

All you have to do is download the files for slick.js, find the slick.js and slick.css files and plug them into hubspot in the design manager (give them their own files), then in a custom module, in the right sidebar, attach the css and js file. after that you can use any of the examples on the slick.js examples page and it should work. This is my go to slider script and I have used it for years so I know it will work for you.