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

Public Rich Text Element

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

Selector panel showing public content classes

Private Rich Text Element

Thanks for unlocking this content. It's only visible to members and uses the following classes.
‍

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

🎉 This is the private, member only content. It uses the unlocked class because this the content you see when you unlock a membership

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

Link

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

Paywall Configuration

Events Handling

CSS

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.