LemonPI plain HTML structure

structure.md

LemonPI plain HTML structure

1. Required files

Every creative should at least contain these files in the root directory:

index.html

Contains the structure of the creative. Inline CSS and JavaScript will be ignored.

Ad dimensions HEAD tag

The index.html must have a tag in the HEAD that specifies the creative's dimensions.

<meta name="ad.size" content="width=300, height=600">

script.js

Entry point

Every banner must implement the startBanner function in script.js. This function is called when all external resources are loaded, so this should be the starting point of the creative's animation.

function initBanner() {
    // Start banner animation here
}

window.startBanner = initBanner;

Both jQuery and TweenMax will be available after startBanner is called.

Note: The content of script.js will be wrapped in a function. If you want to put a function on the global scope, put it on the window scope explicitly.

preview-image.jpg

This is the preview image as it will appear in LemonPI. This image should match the creative's dimensions. This image will never be visible in a live environment, and is only used in LemonPI to preview a creative

2. Assets

2. CSS

An external CSS file is optional and should be called style.css and live in the root folder. Inline CSS in the index.html will be ignored.

3. Images

Images should be placed in the root folder of the creative. Currently supported formats are SVG, PNG, JPG and GIF.

4. External JavaScript

Currently, no external JavaScript resources but TweenMax and jQuery are allowed.

5. Fonts

Local fonts are not allowed. If you want to use custom fonts, please host them on a remote source (Amazon S3 for example) and reference them in style.css.

Google Fonts

Embed your Google Font inline in style.css:

@import url('https://fonts.googleapis.com/css?family=Bungee+Inline');

Clicktag

Use window.lemonpi.click as the clicktag. Never call window.open manually. For example:

document.querySelector('#clicklayer').addEventListener('click', function() {
  window.lemonpi.click();
});