smombartz

<a class="link" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()">Become a member</a> to read and submit comments.

smombartz

<!-- 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>

smombartz

<button class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()">Unlock!</button>

smombartz

<p class="unlock-content locked">🔒 Public content thats shown to all non members. It uses the locked class because this is the content you see when its locked</p>
<p class="unlock-content unlocked">🎉 This is the private, member only content. It uses the unlocked class because this the content you see when you unlock a membership</p>

smombartz

<!-- Unlock Event Handler -->
<script>
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"

smombartz

<!-- 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;

smombartz

<!-- Unlock Paywall Application Configuration -->
<script>
  var unlockProtocolConfig = {
    network: "100", // Network ID (1 is for mainnet, 4 for rinkeby... etc)  
    locks: {
        "0xef6389F33ac557405C961030Efcc3b1CE3e6bc17": {
          "name": "Webflow Integration"
        }
      },
    icon: "https://uploads-ssl.webflow.com/607ded735b3ba1e212f1c708/607f1f8d698e5aceeb6c98a9_Unlock-WordMark.png",

smombartz

<!-- 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>