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

• Floater
• Slider
• Wallpaper
• Expander
• Baselayer
• Parallaxer
• Catfisher
• Intexter
• Roller
• Interstitial
• Responsiver
• Cube
• Sitebar
• Masthead
• Backgrounder
• Slash
• Welcomer
• Carousel
• Rotator

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

Floater

• code: floater
• 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

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

Baselayer

• code: baselayer
• 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("layerOpen"): callback for a layer appearing event
• on("layerClose"): callback for a layer disappearing event
• call("close"): closes a creative
• call("showLayer"): shows a layer
• call("hideLayer"): hides a layer

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

Intexter

• code: intexter
• eCont: the creative template base DOM element
• eFrame: an "iframe" HTML element that calls the creative template
• 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
• call("close"): closes a creative

Roller

• code: roller
• eCont: the creative template base DOM element
• eFrame: an "iframe" HTML element that calls the creative template
• 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
• set("stop", true): stops a creative appearance
• set("stop", false): loads a creative

Interstitial

• code: interstitial
• 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

Responsiver

• code: responsiver
• 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

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

Sitebar

• code: sitebar
• eCont: the creative template base DOM element
• eFrame: an "iframe" HTML element that calls the creative template
• 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

Slash

• code: slash
• eCont: the creative template base DOM element
• on("init"): callback for an initialization event
• on("load"): callback for a loading event
• on("move"): callback for the divider moving event (1st argument returns the cursor position)
• on("close"): callback for a closing event
• call("close"): closes a creative

Welcomer

• code: welcomer
• eCont: the creative template base DOM element
• on("init"): callback for an initialization event
• on("load"): callback for a loading event
• on("scroll"): callback for the vertical scrolling event (1st argument returns visible part of the ad in percentages)
• on("close"): callback for a closing event
• call("close"): closes a creative

Carousel

• code: carousel
• 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

Rotator

• code: rotator
• 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'); })
;

To add a watermark logo to the top-right corner:

tmpl.on('load', function() { 
	var eLogo = document.createElement('img');
	eLogo.src = "https://www.genecy.com/build/images/logo_black.svg";
	eLogo.setAttribute("style", "display:block;position:absolute;top:10px;right:10px;width:120px;height:auto;z-index:99999999;margin:0;border-radius:0;border-width:0;background-color:rgba(255,255,255,0.4);padding:4px;");
	tmpl.eCont.appendChild(eLogo);
});