Building an Ad Free Experience
Utilizing Unlock Protocol to Provide an Ad Free Experience to Members
The Unlock Protocol and its supporting software can be used for a multitude of uses cases. One of these use cases currently in the wild is leveraging the Unlock Protocol to provide an Ad Free Experience to key holders.
The general approach to towards the implementation follows the generic steps outline below.
- 1.
- 2.Add the Unlock paywall application JavaScript to your page:
<script> (function(d, s) {
var js = d.createElement(s),
sc = d.getElementsByTagName(s)[0];
js.src="https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
sc.parentNode.insertBefore(js, sc); }(document, "script"));
</script>
- 1.Configure the display of the paywall component:
var unlockProtocolConfig = {
locks: {
'0xabc': { // 0xabc is the address of a lock.
name: 'Ad Free Experience'
}
},
icon: 'https://staging-app.unlock-protocol.com/static/images/svg/default.svg',
callToAction: {
default: 'Remove the ads from this page with a Key'
}
}
- 1.Add an event handler to capture the change of state between locked and unlocked; rendering ad components when relevant.
window.addEventListener('unlockProtocol', function(e) {
var state = e.detail
if(state === 'locked' ){
// load ad rendering component here
} else {
// Current visitor is a member
}
})
While some tailoring may be required for your specific use case, this should provide a starting point towards utilizing the Unlock Protocol to provide your members with an Ad Free experience.
Last modified 1yr ago