Popup Campaign
The Outlast Framework Popup Campaign javascript class allows you to run popup campaigns that will trigger a call to action after a certain time period.
Initializing and options
You need to use the requirejs loading mechanism to initialize the class:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
requirejs(["system/js/ui/popup-campaign"], function(PopupCampaign){ | |
// Create a popup campaign | |
var campaign = new PopupCampaign({ | |
url: '/my/popupcampaign/show/', // The controller that displays the popup HTML (in ofw.alert) | |
selector: '#mypopup', // OR you can use this instead of url to simple removeClass('hide') on the popup campaign div | |
timeDelay: 25000, // 25 seconds delay before the popup is shown. You should use localStorage for the start time, so that the timer is preserved across page views. | |
cookieName: 'popupcampaign', // Optional, defaults to 'popupcampaign' - The name of the cookie (or localstorage key?) that stores the number of times this user has seen this item. Only needed if you have several per page. | |
cookieExpiryDays: 90, // Optional, defaults to 90 - The number of days after which the cookie / localstorage expires. | |
showCount: 1, // Optional, defaults to 1 - The number of times this visitor sees the popup campaign before it is no longer shown again (until the cookie expires). | |
showAgainAfterDays: 3, // Optional, defaults to 3 - The number of days after which a visitor should again see the popup (only relevant if showCount > 1) | |
openButton: '#someopenbutton', // Optional, defaults to null - If set, a click event will be added to this selector that triggers openPopup() | |
closeButton: '#mypopup .close', // Optional, defaults to null - If set, a click event will be added to this selector that triggers closePopup() | |
handleUrlResponse: null, // Optional, defaults to null - If set, the response from the url option will be passed to this callback function, along with the campaign as second parameter. | |
// ...if null (the default), the response from url will be ofw.alert()-ed. | |
onOpenPopup: function(campaign){}, // Optional, defaults to empty function - Callback called after the popup is openned. | |
onClosePopup: function(campaign){} // Optional, defaults to empty function - Callback called after the popup is closed. | |
}); | |
// Start the popup campaign timer | |
campaign.start(); | |
}); | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
/** Some additional API-accessible features **/ | |
// You disable and enable the campaign as well. When disabled, the campaign will not show the popup but the timer keeps running (so when you enable it the popup may show right away if enough time has passed). | |
campaign.disable(); | |
campaign.enable(); | |
// You can manually set how many times the visitor has seen and closed the popup. If you set the closeCount higher than the showCount the popup will not be shown again (until the cookie expires). | |
campaign.setCloseCount(2); | |
// You can also reset the campaign so that everything starts again (cookie and/or localstorage reset) | |
campaign.reset(); | |
// Set an example handle popup callback | |
campaign.handleUrlResponse = function(response, campaign){ | |
// Do something with the popup url response here! | |
}; | |
// Closes the popup (addClass('hide')) and increments the private closeCount | |
campaign.closePopup(); | |
// Forces openning the popup without waiting for the time delay or checking show count | |
campaign.openPopup(); | |
</script> |
todo: add more docs!