What is EventEmitter?

The event emitter is a feature that enables you to subscribe to certain Sleeknote events that happen on your website.

These events can happen, for example, when a Sleeknote campaign is ready (the content of the campaign is loaded,) or that a certain campaign step is now entering "entry", such as the form step of a "Collect Email Addresses" campaign.

The events can be subscribed to, on the websites with a regular JavaScript event listener, by listening for the "sleekNote" event.

document.addEventListener('sleekNote', function (e){
}, false);

For example, if you want to output all sleekNote events to the console:

document.addEventListener('sleekNote', function (e) {
console.log(e.data);
}, false);

Event Types:

load

Fires when

The Sleeknote core script is initialized and ready to load campaigns.

Returns

command function. (Read about the command function below.)

ready

Fires when

A Sleeknote campaign and its content is loaded ready into the DOM.

Returns

campaignId: String that contains the ID of the campaign.

boxes: List of box objects that contains the individual steps of a campaign.

For example, a slide-in campaign with a teaser and success step will return box objects called "Form--1", "Success--1" and "Teaser--1".

(Read the box section below under return objects for more information.)

 

entry

Fires when

A step of a campaign comes into view.

For example, when a visitor clicks the teaser and the from step shows up, that fires an entry event for the form step.

Returns

campaignId: String that contains the ID of the campaign

boxes: List of box objects that contains the individual steps of a campaign.

For example, a slide-in campaign with a teaser and success step will return box objects called "Form--1", "Success--1" and "Teaser--1".

(Read the box section below under return objects for more information.)

 

exit

Fires when

A step of a campaign leaves the view.

For example, when a visitor clicks the teaser and the from step shows up, that fires an exit event for the teaser step.

Returns

campaignId: String that contains the ID of the campaign.

boxes: List of box objects that contains the individual steps of a campaign.

For example, a slide-in campaign with a teaser and success step will return box objects called "Form--1", "Success--1" and "Teaser--1".

(Read the box section below under return objects for more information.)

 

submit

Fires when

A Sleeknote campaign with a form is submitted.

For example, when a Collect Email Addresses campaign is submitted by a visitor.

Returns

campaignId: String that contains the ID of the campaign

data: a URL encoded query string of all data submitted to the campaign, such as:

• email: The email submitted in a Collect Email Addresses campaign
• other fields: other input fields on the campaign
• guid: A unique GUID generated for that submit
• SleeknoteId: The ID of the campaign
• SignupPage: the URL where the submit happened
• UserAgent: The browser useragent of the visitor's browser on submit.

 

click

Fires when

A link button is clicked.

For example, a "Guide Your Visitors" campaign with a link button that links to another page.

Returns

campaignId: String that contains the ID of the campaign

DOMNode: the DOM node of the button.

href: The URL where the link button links to.

 

Functions:

command

The "command" function gives you the ability to send commands to the Sleeknote API.

A simple way to access the command function is to add the command function to window when the load event is fired.

document.addEventListener('sleekNote', function (e) {
if (e.data.type == 'load') window.command = e.data.command
}, false);

That way, commands can be fired with:

window.command();

The supported parameters for the command function are:

"reset"

'reset' removes all currently shown campaigns and teasers.

No other parameters.

Example:

window.command("reset");

"close"

Removes a specific campaign and teaser from the page.

Parameters:

campaignId: The ID of the campaign

Example:

window.command('close', 'f45c55fb-1ab0-4379-adc6-6191d0558080');

"launch"

Forces a campaign to show the first step of the campaign.

For example, if you want to show a campaign based on a button click or another similar event.

Parameters:

campaignId: The ID of the campaign

onlyShowPreloaded: Boolean, if you want the launch command to obey targeting options set on the campaign, for example, the URL contains targeting option.

If true, and the launch command is fired on a campaign where a targeting option does not allow the campaign to show, the campaign will not show.

If false, the campaign will be shown even if targeting options on the campaign does not allow it.

Example:

//Shows the campaign even if other targeting options are not met
window.command('launch', 'f45c55fb-1ab0-4379-adc6-6191d0558080', false)

"open"

Forces a campaign that is already on the page to show a specific step.

Parameters:

campaignId: The ID of the campaign

stepName: The name of the step you want to show

//forces the success step to show
window.command('open', 'f45c55fb-1ab0-4379-adc6-6191d0558080', 'Success--1')

Return Objects

box:

A box object is an object that contains a step of a campaign, such as the "teaser" step or "success" step.

For example, a slide-in campaign with a teaser and success step will return box objects called "Form--1", "Success--1" and "Teaser--1".

form: {name: "Form--1", DOMNode: span#Form--1[CAMPAIGNID].[CLASSNAME].}
success: {name: "Success--1", DOMNode: span#Success--1[CAMPAIGNID].[CLASSNAME].}
teaser: {name: "Teaser--1", DOMNode: span#Teaser--1[CAMPAIGNID].[CLASSNAME].}

Each box object has two attributes:

name: The name of the step, i.e., "Teaser--1"

DOMNode: The full HTML DOM node of the step.

The DOM Node of a box contains a lot of useful information about the particular step of a campaign, such as:

• The pixel height or width of the step.
• The class name of the containing <span>
• The offset and much more.