unlock-webflow-paywall-headcode.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>

<!-- Unlock Event Handler -->
<script>
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
})
</script>

<!-- Styling the Unlock content to be initially hidden till the handler loads to prevent flickering -->
<style>
  .unlock-content {
    display: none;
  }
  .unlock-content .locked {
    display: none;  
  }
  .unlock-content .unlocked {
    display: none;
  }
</style>