Live
x
<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><script> var unlockProtocolConfig = { "network": 100, // Network ID (1 is for mainnet, 4 for rinkeby, 100 for xDai, etc) "locks": { "0xac1fceC2e4064CCd83ac8C9B0c9B8d944AB0D246": { "name": "Unlock Members" } }, "icon": "https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg", "callToAction": { "default": "Please unlock this demo!" } }</script><h1>Unlock Demo</h1><p class="unlock-content locked">Unlock Demo is currently locked 🔒 </p><p class="unlock-content unlocked">Unlock Demo is currently unlocked 🎉</p><p class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()"><button class="button"> Unlock! </button></p>
Live
xxxxxxxxxx12
.unlock-content { display: none;}.unlock-content .locked { display: none;}.unlock-content .unlocked { display: none;}
Live
xxxxxxxxxx19
window.addEventListener("unlockProtocol.status", function (event) { // We hide all .unlock-content elements document.querySelector(".unlock-content").style.display = "none"; // We show only the relevant element document .querySelectorAll(`.unlock-content.${event.detail.state}`) .forEach((element) => { element.style.display = "block"; });});window.addEventListener("unlockProtocol.authenticated", function (event) { // event.detail.addresss includes the address of the current user, when known});window.addEventListener("unlockProtocol.transactionSent", function (event) { // event.detail.hash includes the hash of the transaction sent});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.