Unlock Webflow Example

Example of full integration of the Unlock snippet.

by smombartz

HTML

<!-- Unlock Paywall Application Script -->
<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>

<!-- Unlock Paywall Application Configuration -->
<script>
  var unlockProtocolConfig = {
      "locks": {
        "0xB0114bbDCe17e0AF91b2Be32916a1e236cf6034F": {
          "name": "Unlock Members"
        }
      },
      "icon": "https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg",
      "callToAction": {
        "default": "Please unlock this demo!"
      }
	}
</script>

<div class="unlock-demo">
<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>
</div>

CSS

/* Unlock Content: Initially hidden till the handler loads to prevent flickering */

.unlock-content {
  display: none;
}

.unlock-content .locked {
  display: none;  
}

.unlock-content .unlocked {
  display: none;
  
}

.unlock-demo {
  height: 100px;
}

JavaScript

/* Unlock Event Handler */

window.addEventListener('unlockProtocol.status', function(event) {
  // We hide all .unlock-content elements
  document.querySelectorAll('.unlock-content').forEach((element) => {
    element.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
})