How to Embed an iframe on an Ad
There are two places in which you could embed an Iframe, in the ad creative of a campaign, or in the Creative editor.
❗️Before we dive into the how to, please take into account the following points:
The URL to the page that will reside within an Iframe must be publicly accessible. It should also be able to be accessed in both HTTP and HTTPS.
The page must contain only the creative that is to be shown within the Iframe itself. In other words, it should not contain any header, footer and rail widgets.
The Iframe asset must be responsive if the campaign is to run cross-platform
Switch to "Code View"
The first step to embed an Iframe is to switch the view from normal to "code view", to do this, just click on the last icon on the editors' toolbar, the icon looks something like this "</>" (screenshot below).
Content Editor showing the button to switch from normal view to code view.
Getting your iframe code
Once on code view, you will need to create or get your iframe HTML code. Most of the time, you will be receiving this iframe from a third party vendor that has it ready and setup for you.
If you would like to create your own iframe, here is an example you could use for testing purposes:
HTML
<iframe src="http://www.pages02.net/worldaccess-mondial/EagleBytes_Optin_Nativo/default.html" scrolling="no"></iframe>
📘Good to know
The scrolling property on the iframe code dictates whether or not the iframe will render with scrollbars, it will also dictate whether the user will be able to scroll or not, if you set the scrolling property to "no" the user will not see any scrollbars nor be able to scroll at all.
Placing the iframe code in the desired location
Now that you have the content editor on "Code View" and the iframe HTML code, it is time to paste it in the desired location where you want it to render.
Content Editor showing the iframe after is pasted between two paragraphs.
Once the iframe is in the Code view and everything is good to go, scroll all the way to the top of the page and click save, you are done!
🚧Its normal!
When switching back the content editor to normal view, you may see the Iframe as a blank space, this is totally normal, if you would like to see how your iframe looks you could always generate a preview of the content.
Styling iframes
There are two main ways to apply styling to an iframe, you could either do it inline inside the iframe tag, or you could create a style code block above the iframe code.
Inline Styling
To apply inline styling to an iframe we just need to add another property to the iframe tag, this property is called style. Here is an example of how it would look with the style property and some CSS to make it have 100% width, 472px height, and no borders:
HTML
<iframe src="http://www.pages02.net/worldaccess-mondial/EagleBytes_Optin_Nativo/default.html" scrolling="no" style="width: 100%; height: 472px; border: none;"></iframe>
Style code block
To apply styling to an iframe using a style code block, we need to add a style block before the Iframe. Here is an example of a style code block with some CSS in it to style the Iframe:
HTML
<style> iframe { width: 100%; height: 472px; border: none; } </style>
Content Editor showing the Style code block above the Iframe.
❗️Dont do it!
Please refrain from inserting full Javascript or CSS files into the content editor as it might cause problems with how it renders and functions.
Examples and useful Resources
Iframe on content Preview/Example: http://demo.ntv.io/genericsite.com/sponsoredcontent.html?prx_t=QcEEAAAAAAZ_4PA&prx_ro=s
External Resources
Understanding Iframe tag: https://www.w3schools.com/tags/tag_iframe.asp
Iframe Example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
📘Questions?
Reach out to [email protected] if you have any additional questions.