Universal iframes

Our templates are made of plain HTML and Javascript, and are optimized for working directly with them. However this does not mean that creations made with external programs or sites, such as Adobe Animate CC, Google Web Developer, Creatopy or others can’t be used with our templates. A couple of steps need to be taken for it to work seamlessly.

Often, the easiest way is using an iframe. An iframe loads in another HTML file, and shows its content within the parameters of the iframe. This is very useful, but has some limitations.

First off, working with an iframe is very easy. All you need is this line:

<iframe src="yourfilename.html" width="100%" height="300" style="border: none;"> </iframe>

Which you can then place in our template. Where you place the iframe depends on the template, but it’s always in the body of the template HTML file. In the body you might find a div meant for creative content with names like ‘stage’ or ‘billboard’. In these cases, place the iframe in that div.

In other templates, often those that run on multiple devices, you’ll find multiple div elements to address the different devices. Normally this is either with names such as ‘large’, ‘medium’ and ‘small’ or ‘desktop’, ‘tablet’ and ‘mobile’. Place the iframe in the div corresponding to the device/size your content should be shown on. It’s possible to use multiple iframes, which is especially handy for our crossdevice templates.

TIP: When using iframes in cross device templates it saves a bunch of loading if you don’t fill your iframes when the banner loads, but only fill the appropriate iframe src after you have determined what content div will be visible.

<iframe id="largeIframe" src="" width="100%" height="300" style="border: none;"> </iframe>

And then you can fill the iframe like this.

document.getElementById("largeIframe").setAttribute("src", "yourfilename.html");

After you’ve placed the iframe in our template file, you can upload the template and your files, and preview your ad!

Working with an iframe does has some challenges:

• Some of our templates have fluid sizes, meaning that their size changes depending on the device. If your creation is also fluid, it should be working just fine in our template when using percentages but we do encourage to test this extensively. However, if your creation has a fixed size and you’d like to use it in one of our fluid templates, you can simple give the iframe a fixed size and position the iframe in the middle of the ad space – you can position the iframe with CSS.
  
  
• Use unique filenames, especially elements used in other iframes and uploaded to the same creative. For example, if you’re making a creative with multiple states for desktop, tablet and mobile. Make sure all files names have unique names -except the files that are reused between the iframes.
  
  
• Use the right size for the iframe, as you’ll get scrollbars otherwise. Another way to prevent scrollbars is to add an overflow: hidden; to your iframes CSS.
  
  
• We recommend using the clicklayer, as our screenad.click can’t be placed on an iframe. If you use the clicklayer below then you need to give your iframe a low z-index In its CSS.

  <div id="clickLayer" style="z-index: 100; " onclick="screenad.click();"></div> 

  Alternatively you can use our regular screenad click within your iframe creation instead of the clickLayer element by using the right scope. In order to use a screenad property or method, for example a click command, you need to add window.parent as a prefix so that the scope is correct. For example:  window.parent.screenad.click();

  You can also add this variable to the iframe dom:

  var screenad = window.parent.screenad; 

  This will let you use screenad.click(); without prefacing it with window.parent.

• Disable borders for the iframe itself. This is easily done by adding ‘borders= none;’ to the iframe properties.
  
  
• Make sure all your files are in the same folder when you upload it to the previewer