Adding Unlock to your Site

Using Unlock's Paywall Application you can add a lock and members only content to any Webflow page and CMS Collection. It's as simple as adding a few classes, embed elements and custom header code. Let's dive in.

There are 3 parts to integrating the Unlock Paywall App

  1. The Content
  2. Checkout Initiation
  3. Paywall Integration: Script, Config, Handler, CSS

1. The Content

Unlock uses three classes in the selector panel to define content
unlock-content unlocked locked

The way Unlock works is it checks for the unlock-content and then hides the content blocks that have theunlocked class and shows the ones with thelocked class.

What you'll have to do is create two version of the content – one thats unlocked and visible to non members and a one thats locked and only visible to members.

Let's look at two examples, one using native webflow elements the other using an embed element.

Public Rich Text Element

This section is visible when the content is locked, hence it has the locked class set.
‍

Selector panel showing public content classes

Private Rich Text Element

This is for members only. Unlock to view.

‍

Selector panel showing member only content classes

Content inside of an Embed Element

🔒 Public content thats shown to all non members. It uses the locked class because this is the content you see when its locked

2. Checkout Initiation

The link and button that bring up the Unlock paywall are also special and they are both embed elements with the following custom code. The embed feature requires an active site plan or a paid account plan.

Button

<button class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()">Unlock!</button>
view raw unlock-webflow-paywall-initiation-button.html hosted with ❤ by GitHub

Link

view raw unlock-webflow-paywall-initiation-link.html hosted with ❤ by GitHub

3. Paywall Integration

You need to add the Paywall Script, Paywall Configuration, Event Handler and Unlock CSS to the Head Code in the custom code section of your site which you can access from the the the head section of your website. You can find all of the code that needs to go into the head here.

Paywall Script

<!-- 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>
view raw unlock-webflow-paywall-application.html hosted with ❤ by GitHub

Paywall Configuration

<!-- 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",
"callToAction": {
"default": "Please unlock this demo!"
}
}
</script>
view raw unlock-webflow-paywall-application-configuration.html hosted with ❤ by GitHub

Events Handling

<!-- 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"
})
})
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>
view raw unlock-webflow-paywall-eventhandler.html hosted with ❤ by GitHub

CSS

<!-- 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>
view raw unlock-webflow-paywall-css.html hosted with ❤ by GitHub

Get Into the Code

Want to play around with the code? You can  clone the project from the showcase page or experiment in this JSFiddle.

Styling for Elements inside Code Embeds

Button Text
This is some text inside of a div block with a link.
Made in Webflow