Oct 18, 2018 11:52 AM
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:
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.
Oct 25, 2018 11:55 AM
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?
Oct 26, 2018 10:10 AM - edited May 31, 2019 4:53 AM
Iframes are used to show information from one website on another. examples are iframes iclude:
video (youtube, vimeo, dailymotion, etc.)
interactive third party services (Hubspot forms, 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.
Need help? Hire Us Here