How to use JS callback events with custom creative templates?

With JS callbacks, you can make changes on your website on various creative template stages (for example, to change website CSS styles on a creative initialization) or update a creative template's appearance from your website (for example, close a creative).

Supported templates

JS callbacks can be entered in the field "JS callback" which is disabled by default. To enable this field for a template, enable this field in the template's customization form.

Events and methods can be called by accessing JS variable "tmpl".

The JS object “tmpl” structure

Key Format Description
id String Unique JS callback ID
code String A creative template code
e* DOM element An HTML element object of a template
on function(event, callback) JS function to register an event
call function(method, params) JS function to call an API method

Slider

  • code: slider
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("appear"): callback for an event when a creative appears fully within a viewport
  • call("close"): closes a creative

Wallpaper

  • code: wallpaper
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • call("close"): closes a creative

Expander

  • code: expander
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("expand"): callback for an expanding event
  • on("collapse"): callback for a collapsing event
  • call("close"): closes a creative
  • call("expand"): expands a creative
  • call("collapse"): collapses a creative

Parallaxer

  • code: parallaxer
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("appear"): callback for an event when a creative appears within a viewport
  • on("disappear"): callback for an event when a creative disappears from a viewport
  • call("close"): closes a creative
  • call("redraw"): repositions a creative

Catfisher

  • code: catfisher
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("appear"): callback for an event when a creative appears fully within a viewport
  • call("close"): closes a creative

Roller

  • code: roller
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("pause"): callback for a pause event
  • on("resume"): callback for a resume event
  • call("close"): closes a creative
  • call("pause"): pauses a creative animation
  • call("resume"): resumes a creative animation

Cube

  • code: cube
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • call("close"): closes a creative

Masthead

  • code: masthead
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • on("closeSticky"): callback for a closing event of sticky ad
  • on("sticky"): callback for a sticky ad appearance event
  • on("static"): callback for a base ad appearance event
  • call("close"): closes a creative
  • call("disableSticky"): closes sticky layer and its further appearance

Backgrounder

  • code: backgrounder
  • eCont: the creative template base DOM element
  • on("init"): callback for an initialization event
  • on("load"): callback for a loading event
  • on("close"): callback for a closing event
  • call("close"): closes a creative

Examples

There are code samples. Enter just plain JS code in the field "JS callback".

To set a red background for a website when a creative template loads:

tmpl.on("load", function() {
	top.document.body.style.backgroundColor = "red";
});

To store "tmpl" object in a website scope for accessing it later:

top.genecyTmplObj = tmpl;

To close a creative template after 10 seconds:

setTimeout(function() {
	tmpl.call("close")
}, 10 * 1000);

To add the closing button to a template:

tmpl
.on('load', function() { 
	var eCloseBtn = document.createElement("a");
	eCloseBtn.href = "#";
	eCloseBtn.innerHTML = "X";
	eCloseBtn.setAttribute("style", "display:block;width:30px;height:30px;text-align:center;line-height:30px;font-size:24px;background-color:#fff;color:#000;position:absolute;top:18px;right:0;border:1px solid #000;text-decoration:none;");
	tmpl.eCont.appendChild(eCloseBtn);
	eCloseBtn.addEventListener("click", function(e) {
		e.preventDefault();
		tmpl.call('close');
	});
})
.on('close', function() { console.log('The template has been closed'); })
;