
Twitter's blue checkmark has generated a lot of attention over the years. This week, Ethereum's Vitalik Buterin rightfully [noted](https://twitter.com/VitalikButerin/status/1164490401765572611) that the blue checkmark was a status symbol. Last week-end, [Dani Grant](https://twitter.com/thedanigrant) released a [fun Chrome extension](dani.town/nfts) which will show a Twitter users' NFT on their twitter profile.

Yesterday, we deployed a lock which lets anyone purchase a Blue Checkmark. [Get yours now](https://unlock-blue-checkmark.glitch.me/). It's cheap: 0.01 ether and we'll donate the proceeds to SHE256. Also, Dani was kind enough to merge a [pull request](https://github.com/danigrant/nft-twitter-ext/commit/d81615e05f902ec67db09d638a0e1b8eac160fd0) on her extension so that if someone owns the NFT blue checkmark, it will actually show on their Twitter profile ;)

![Dani, Verified](/images/blog/blue-checkmark-nft/dani-verified.png)

At Unlock, we believe that Non Fungible Tokens can be badges to show "membership", and yes, the Twitter Checkmark is an identifier for, as Vitalik calls it _the blue checkmark class_.

It turns out that Twitter's system is very much broken right now. Nobody knows what it really means to have a checkmark but we can't argue that in the days of deep fakes, having some kind of "labels" on the social web is a very useful pattern to identify people (or bots!) based on their affiliations for example.

Our Blue Checkmark Lock is obviously a joke and a fun experiment, but it shows the power of NFT which exist "outside" of the space for which they're created. Using Non Fungible Tokens, rather than records on Twitter's databases means that other applications could re-use these labels and maybe expand them. For example, wouldn't it be useful for Github to show some of the tags from StackOverflow? I'd love [my RSS creds](https://stackoverflow.com/help/badges/4540/rss?userid=73987) to be visible on my Github profile!

What other kinds of memberships would you want to see represented as Non Fungible Tokens?


Locks are the core of the Unlock protocol. They are smart contracts deployed on the Ethereum chain which lets your community become members by purchasing keys to your lock.

A fun experiment to show how Non Fungible Tokens can be used to represent badges!

A blue check-mark NFT

<p>Twitter's blue checkmark has generated a lot of attention over the years. This week, Ethereum's Vitalik Buterin rightfully <a href="https://twitter.com/VitalikButerin/status/1164490401765572611">noted</a> that the blue checkmark was a status symbol. Last week-end, <a href="https://twitter.com/thedanigrant">Dani Grant</a> released a <a href="dani.town/nfts">fun Chrome extension</a> which will show a Twitter users' NFT on their twitter profile.</p>
<p>Yesterday, we deployed a lock which lets anyone purchase a Blue Checkmark. <a href="https://unlock-blue-checkmark.glitch.me/">Get yours now</a>. It's cheap: 0.01 ether and we'll donate the proceeds to SHE256. Also, Dani was kind enough to merge a <a href="https://github.com/danigrant/nft-twitter-ext/commit/d81615e05f902ec67db09d638a0e1b8eac160fd0">pull request</a> on her extension so that if someone owns the NFT blue checkmark, it will actually show on their Twitter profile ;)</p>
<p><img src="/images/blog/blue-checkmark-nft/dani-verified.png" alt="Dani, Verified"></p>
<p>At Unlock, we believe that Non Fungible Tokens can be badges to show "membership", and yes, the Twitter Checkmark is an identifier for, as Vitalik calls it <em>the blue checkmark class</em>.</p>
<p>It turns out that Twitter's system is very much broken right now. Nobody knows what it really means to have a checkmark but we can't argue that in the days of deep fakes, having some kind of "labels" on the social web is a very useful pattern to identify people (or bots!) based on their affiliations for example.</p>
<p>Our Blue Checkmark Lock is obviously a joke and a fun experiment, but it shows the power of NFT which exist "outside" of the space for which they're created. Using Non Fungible Tokens, rather than records on Twitter's databases means that other applications could re-use these labels and maybe expand them. For example, wouldn't it be useful for Github to show some of the tags from StackOverflow? I'd love <a href="https://stackoverflow.com/help/badges/4540/rss?userid=73987">my RSS creds</a> to be visible on my Github profile!</p>
<p>What other kinds of memberships would you want to see represented as Non Fungible Tokens?</p>



Unlock is a protocol for memberships. Members of a given community often have access to perks, content or features which are just for them. For example, members (and only them!) of our blog can read and leave comments.

# Scout

Today, we're very excited and proud to announce that our friends at [Scout](https://scout.cool/) have added locks to their dashboards.

Scout provides analytics for Ethereum smart contracts. It provides unique (and real time) insights into economics and governance of on chain protocols.

For example, it provides a very useful dashboard to inspect the [state of the Aragon network](https://scout.cool/aragon/mainnet), or the state of the [Set Protocol](https://scout.cool/setprotocol/mainnet).

Of course, they also added a [dashboard for Unlock](https://scout.cool/unlockprotocol/mainnet), where you can view the total number of locks deployed, the balances of Ether or DAI across all locks, and even all the latest key purchases.

![Scout dashboard for Unlock](/images/blog/unlocking-scout/unlock-scout-dashboard.png)

However, we only wanted to grant access to members of our community, so, unless you already have a valid key to our lock, here is what you'll see:

![Scout is locked](/images/blog/unlocking-scout/scout-locked.png)
<small>Click that button: it's free</small>

We're very excited to see other web3 applications use Unlock to limit access to their content or features only to owners of keys for a given lock.
One of the really interesting features is that you do not need a user account on our blog, nor one on Scout: your Ethereum address is your identity and if you own a key, you are member of the lock!

Kuan, founder at Scout adds:

> "Unlock protocol is the easiest off the shelf solution that can enable our customers to control access of their dashboards. And it is blockchain native!"

If you're considering adding a Scout dashboard to your smart contract give the scout team your lock address!

Our friends at Scout use React for their front-end application (like we do!) and they used [our React tutorial](/blog/integratating-unlock-react), but we provide more details on how to integrate any front end application on [this wiki page](https://github.com/unlock-protocol/unlock/wiki/Integrating-Unlock-on-your-site): add a lock to your content today! Our team is here to help you...


Our friends at Scout have integrated Unlock on the Unlock dashboard. Here's how it works

Unlocking Scout

<p>Unlock is a protocol for memberships. Members of a given community often have access to perks, content or features which are just for them. For example, members (and only them!) of our blog can read and leave comments.</p>
<h1>Scout</h1>
<p>Today, we're very excited and proud to announce that our friends at <a href="https://scout.cool/">Scout</a> have added locks to their dashboards.</p>
<p>Scout provides analytics for Ethereum smart contracts. It provides unique (and real time) insights into economics and governance of on chain protocols.</p>
<p>For example, it provides a very useful dashboard to inspect the <a href="https://scout.cool/aragon/mainnet">state of the Aragon network</a>, or the state of the <a href="https://scout.cool/setprotocol/mainnet">Set Protocol</a>.</p>
<p>Of course, they also added a <a href="https://scout.cool/unlockprotocol/mainnet">dashboard for Unlock</a>, where you can view the total number of locks deployed, the balances of Ether or DAI across all locks, and even all the latest key purchases.</p>
<p><img src="/images/blog/unlocking-scout/unlock-scout-dashboard.png" alt="Scout dashboard for Unlock"></p>
<p>However, we only wanted to grant access to members of our community, so, unless you already have a valid key to our lock, here is what you'll see:</p>
<p><img src="/images/blog/unlocking-scout/scout-locked.png" alt="Scout is locked">
<small>Click that button: it's free</small></p>
<p>We're very excited to see other web3 applications use Unlock to limit access to their content or features only to owners of keys for a given lock.
One of the really interesting features is that you do not need a user account on our blog, nor one on Scout: your Ethereum address is your identity and if you own a key, you are member of the lock!</p>
<p>Kuan, founder at Scout adds:</p>
<blockquote>
<p>"Unlock protocol is the easiest off the shelf solution that can enable our customers to control access of their dashboards. And it is blockchain native!"</p>
</blockquote>
<p>If you're considering adding a Scout dashboard to your smart contract give the scout team your lock address!</p>
<p>Our friends at Scout use React for their front-end application (like we do!) and they used <a href="/blog/integratating-unlock-react">our React tutorial</a>, but we provide more details on how to integrate any front end application on <a href="https://github.com/unlock-protocol/unlock/wiki/Integrating-Unlock-on-your-site">this wiki page</a>: add a lock to your content today! Our team is here to help you...</p>



![introducing tickets](/images/blog/introducing-tickets/introducing-tickets.jpg)

The Unlock Protocol isn't just a way to pay to access services on the internet.

We’re building a protocol that can be used to unlock access to _anything_ - and while that means [content, software
licenses and more](https://unlock-protocol.com/blog/ways-to-unlock-the-web/), we also want to help people sell access
things in the real world.

In the future, the Unlock Protocol may be used to sell tickets for transportation, as a way to seamlessly manage room
access in hotels and holiday rentals, and as a way to prove you've paid for a membership. Today, we're starting with
events.

You can buy a ticket to the [Berlin Open Source Salon](https://berlin.opensourcesalon.com/) with DAI using Unlock.
[Visit the Unlock event page](https://tickets.unlock-protocol.com/event/0x98c0cbF0e9525f1a6975A51c9D5E8e063c034D6D),
purchase a ticket, and then show your special QR code at the door. Your ticket will be validated on the blockchain.

![Berlin Open Source Salon ticket page](/images/blog/introducing-tickets/boss-tickets.png)

## How tickets work with Unlock

Every Unlock transaction - whether for content, an event, software licenses, or anything else - works by selling a _key_
to a _lock_ using Ethereum. Tickets are no different.

![Unlock ticket creation screen](/images/blog/introducing-tickets/create-an-event.png)

Once a lock has been created, creators have access to a number of ways to use it: different applications that sit on top of
the Unlock Protocol. The ticketed event application allows you to save a date, title, description, and location for the
event. These aren't stored on the blockchain itself: instead, they create a database record that references the lock's
Ethereum address.

An attendee with an Ethereum wallet like Metamask can buy a key with one click. The event page then shows a QR code, which
contains the user's public key and a signed version of the lock address. This can be verified at the door with a
commodity QR code reader, which are now built into the camera apps in every major mobile operating system.

## Multi-use locks

On the Unlock Protocol, you're not limited to using one application per lock. This means that a ticketed event and a
content paywall can run on the same lock: if you purchase access to the paywall, you'll be able to get access to the
event, or if you purchase access to the event, you'll automatically be able to view protected content.

This means you can very easily string together a series of connected assets to sell as a bundle. Perhaps you want to
give premium customers for your publication access to a series of workshops. Or you want to provide access to a custom
social network for attendees of your event. As we add more applications, and third parties build on top of our open
protocol to add even more, the possibilities will become endless.

## Learn more

We're building Unlock in the open. You can always say hello in our [Discord](https://discord.gg/Ah6ZEJyTDp), join
us on our [Github project](https://github.com/unlock-protocol/unlock/) or reach out at
[hello@unlock-protocol.com](mailto:hello@unlock-protocol.com). We would love to hear from you.


Now you can buy tickets to real-world events using Ethereum and the Unlock Protocol.

Now you can buy tickets to real-world events using Ethereum

Introducing Tickets

<p><img src="/images/blog/introducing-tickets/introducing-tickets.jpg" alt="introducing tickets"></p>
<p>The Unlock Protocol isn't just a way to pay to access services on the internet.</p>
<p>We’re building a protocol that can be used to unlock access to <em>anything</em> - and while that means <a href="https://unlock-protocol.com/blog/ways-to-unlock-the-web/">content, software
licenses and more</a>, we also want to help people sell access
things in the real world.</p>
<p>In the future, the Unlock Protocol may be used to sell tickets for transportation, as a way to seamlessly manage room
access in hotels and holiday rentals, and as a way to prove you've paid for a membership. Today, we're starting with
events.</p>
<p>You can buy a ticket to the <a href="https://berlin.opensourcesalon.com/">Berlin Open Source Salon</a> with DAI using Unlock.
<a href="https://tickets.unlock-protocol.com/event/0x98c0cbF0e9525f1a6975A51c9D5E8e063c034D6D">Visit the Unlock event page</a>,
purchase a ticket, and then show your special QR code at the door. Your ticket will be validated on the blockchain.</p>
<p><img src="/images/blog/introducing-tickets/boss-tickets.png" alt="Berlin Open Source Salon ticket page"></p>
<h2>How tickets work with Unlock</h2>
<p>Every Unlock transaction - whether for content, an event, software licenses, or anything else - works by selling a <em>key</em>
to a <em>lock</em> using Ethereum. Tickets are no different.</p>
<p><img src="/images/blog/introducing-tickets/create-an-event.png" alt="Unlock ticket creation screen"></p>
<p>Once a lock has been created, creators have access to a number of ways to use it: different applications that sit on top of
the Unlock Protocol. The ticketed event application allows you to save a date, title, description, and location for the
event. These aren't stored on the blockchain itself: instead, they create a database record that references the lock's
Ethereum address.</p>
<p>An attendee with an Ethereum wallet like Metamask can buy a key with one click. The event page then shows a QR code, which
contains the user's public key and a signed version of the lock address. This can be verified at the door with a
commodity QR code reader, which are now built into the camera apps in every major mobile operating system.</p>
<h2>Multi-use locks</h2>
<p>On the Unlock Protocol, you're not limited to using one application per lock. This means that a ticketed event and a
content paywall can run on the same lock: if you purchase access to the paywall, you'll be able to get access to the
event, or if you purchase access to the event, you'll automatically be able to view protected content.</p>
<p>This means you can very easily string together a series of connected assets to sell as a bundle. Perhaps you want to
give premium customers for your publication access to a series of workshops. Or you want to provide access to a custom
social network for attendees of your event. As we add more applications, and third parties build on top of our open
protocol to add even more, the possibilities will become endless.</p>
<h2>Learn more</h2>
<p>We're building Unlock in the open. You can always say hello in our <a href="https://discord.gg/Ah6ZEJyTDp">Discord</a>, join
us on our <a href="https://github.com/unlock-protocol/unlock/">Github project</a> or reach out at
<a href="mailto:hello@unlock-protocol.com">hello@unlock-protocol.com</a>. We would love to hear from you.</p>



Unlock is a [protocol for memberships](/blog/protocol-for-membership). It helps creators monetize by selling access keys to their community - fans, supporters, or even simple users - by helping them deploy a lock and sell access keys to this lock (they can chose their currency, price, the duration of the keys and the number of keys they want to sell).

We decided to create a lock for members of our community. It's a good way for us to show what's possible with a lock. Since our goal was not to make money, we decided to charge _0 eth_ for the keys.

When integrating the lock on this blog, we decided to reflect the membership status in 3 different things:

1. The lower bar at the bottom of every page. ⬇️ Since I am a member, mine shows this:

![member bar](/images/blog/unlock-blog/member-bar.png)

2. On each post, **members** can view and leave [comments](#comments).

3. We've locked some exclusive content. For example, this Google Slideshow from a presentation made at Betaworks about [Non Fungible Tokens](/blog/non-fungible-tokens-betaworks).

# Bundling

The lock we use on this blog is in no way limited to this site. We could (and will, stay tuned...) re-use the lock on different sites or applications. As a matter of fact, you could even add _our_ lock to _your_ site or application, if you wanted to only grant access to people who are part of our community. That approach is how creators can deploy "bundles": a single lock is used on several different websites or applications!

# Several locks

Another important detail is that we could very well add multiple locks to this site. If we did so, a single key to any of the locks would unlock the whole page.

Maybe we'd have a lock for our most loyal fans (with a limit on the number of keys), and maybe we'd have another one for everyone else, using another currency or one which we would "share" with several other applications to be part of their bundle. The possibilities are endless.

# A Non Fungible Token

Of course, this website implements what we call [optimistic unlocking](/blog/hello-optimistic-unlocking/). Basically, our blog will treat you as a member as soon as you've sent the transaction, without waiting for it to have completed mining. But, once the transaction actually goes through, you will receive you unique access key. It is a non fungible token and you can [view them all on this page](https://opensea.io/assets/unlock-blog-members).

Like all other non fungible tokens, you can trade your keys! For example, I am auctionning my key to this very blog for 0.1Eth: get it for free here, [or buy it from me](https://opensea.io/assets/0xCE62D71c768aeD7EA034c72a1bc4CF58830D9894/2/sell#!)!


We've put a lock on our own blog! Members can leave comments, read exclusive content and will receive a Non Fungible Token.

Unlock this blog

<p>Unlock is a <a href="/blog/protocol-for-membership">protocol for memberships</a>. It helps creators monetize by selling access keys to their community - fans, supporters, or even simple users - by helping them deploy a lock and sell access keys to this lock (they can chose their currency, price, the duration of the keys and the number of keys they want to sell).</p>
<p>We decided to create a lock for members of our community. It's a good way for us to show what's possible with a lock. Since our goal was not to make money, we decided to charge <em>0 eth</em> for the keys.</p>
<p>When integrating the lock on this blog, we decided to reflect the membership status in 3 different things:</p>
<ol>
<li>The lower bar at the bottom of every page. ⬇️ Since I am a member, mine shows this:</li>
</ol>
<p><img src="/images/blog/unlock-blog/member-bar.png" alt="member bar"></p>
<ol start="2">
<li>
<p>On each post, <strong>members</strong> can view and leave <a href="#comments">comments</a>.</p>
</li>
<li>
<p>We've locked some exclusive content. For example, this Google Slideshow from a presentation made at Betaworks about <a href="/blog/non-fungible-tokens-betaworks">Non Fungible Tokens</a>.</p>
</li>
</ol>
<h1>Bundling</h1>
<p>The lock we use on this blog is in no way limited to this site. We could (and will, stay tuned...) re-use the lock on different sites or applications. As a matter of fact, you could even add <em>our</em> lock to <em>your</em> site or application, if you wanted to only grant access to people who are part of our community. That approach is how creators can deploy "bundles": a single lock is used on several different websites or applications!</p>
<h1>Several locks</h1>
<p>Another important detail is that we could very well add multiple locks to this site. If we did so, a single key to any of the locks would unlock the whole page.</p>
<p>Maybe we'd have a lock for our most loyal fans (with a limit on the number of keys), and maybe we'd have another one for everyone else, using another currency or one which we would "share" with several other applications to be part of their bundle. The possibilities are endless.</p>
<h1>A Non Fungible Token</h1>
<p>Of course, this website implements what we call <a href="/blog/hello-optimistic-unlocking/">optimistic unlocking</a>. Basically, our blog will treat you as a member as soon as you've sent the transaction, without waiting for it to have completed mining. But, once the transaction actually goes through, you will receive you unique access key. It is a non fungible token and you can <a href="https://opensea.io/assets/unlock-blog-members">view them all on this page</a>.</p>
<p>Like all other non fungible tokens, you can trade your keys! For example, I am auctionning my key to this very blog for 0.1Eth: get it for free here, <a href="https://opensea.io/assets/0xCE62D71c768aeD7EA034c72a1bc4CF58830D9894/2/sell#!">or buy it from me</a>!</p>



![new lock](/images/blog/first-lock/new-lock.jpg)

A lock is a way to represent a _membership_. Each member has a key to the lock which they can purchase from the lock directly.

## So, you want to create your first lock?

First, you need an Ethereum wallet. On desktop, the most popular is [Metamask](https://metamask.io/), but things should work similarly with any Ethereum wallet. For now, we recommend using a desktop computer rather than mobile device because the UI is much cleaner there.

Go to the _Creator Dashbboard_ on [https://unlock-protocol.com](https://unlock-protocol.com). This creator dashboard will help you manage your locks (create them, update them, or view some data about them...).

For now, it should be empty and look like this:

![empty dashboard](/images/blog/first-lock/empty-dashboard.png)

On the top left, you can see which network you're connected to. Ethereum has a single "Main Network" and several test networks such as Goerli. Make sure you're on the Main Network. You can also view which address your wallet is currently using.

On the top right, a button lets you create a lock. Once you click on it, a form appears and lets you prepare your first lock.

![create lock form](/images/blog/first-lock/create-lock-form.png)

When creating a lock, each field can be edited.

### The name

First, the name. The lock's name is stored on-chain and is used by other applications which may want to show information about your lock and its keys, such as [Etherscan](https://etherscan.io/), [OpenSea](https://opensea.io/) and more. Use something descriptive but fairly short as every character counts toward the fees you'll pay to deploy this lock.

### The Duration

Each key has a duration. At the end of the duration the membership is considered "expired" and should not grant access to the key holder. In this case, members can renew to make their key valid again.

The duration is expressed in seconds in the smart contract, but given the inherent latency of the blockchain we believe that durations shorter than 1 day are not practical. Most creators will pick durations of months to years.

Picking the right duration is useful because a key holder can "cancel" their key by sending it back to the lock to get a refund. The elapsed duration is used to assess the amount to be refunded.

### The number of keys

As the lock owner you can choose how many people can purchase keys. This is important because many membership are "exclusive". For example, an artist may want to only allocate a small number of keys to their truest fans (in that case, they would have several locks, each represented a _level_ of membership).

It is possible to set an unlimited number of members.

Note that expired keys still count toward the maximum number of keys, but as we've seen, keys can be extended (by sending another payment to the lock) and they can be transfered as well...

### Key Price

The price of each key is made of 2 things: the currency and the amount of that currency. By default, our UI uses Ether, the native Ethereum currency, but the UI also leaves the option to use [DAI](https://makerdao.com/en/dai), a stable coin, whose value is always 1$. <small>(Our smart contract actually supports any [ERC20](https://www.investopedia.com/news/what-erc20-and-what-does-it-mean-ethereum/). Please get in touch if you need to deploy a lock which uses something else than DAI!)</small>

Once you've chosen your currency, you can set the price you want, from 0 to billions!

### Submitting

Make sure all values you've chosen are correct. Most of them cannot be changed once the lock has been deployed.

After submitting, your wallet will ask for a confirmation. Deploying a lock is fairly "expensive" in gas (at least 4M), because it a a full contract deployed under your address. Unless deploying the lock is urgent, you should probably set a low gas price.

It is important that you wait for the lock to be deployed, because its address (starting with `0x`) will only be final then, and that address will be used by your members to send payments and you don't want them to send a payment to the wrong address!

### No Ether? No problem

Locks themselves can be transfered. This means that we can create the locks for you and transfer them to you. If we do this, you do not even need Ether to pay for the fees. We will create the lock based on your needs and send it to your address so you can start using it ASAP!

## Next!

That's it! Your lock has now been created. The next step is to integrate it on your website to let people become members. See the wiki page on [how to integrate unlock](https://github.com/unlock-protocol/unlock/wiki/Integrating-Unlock-on-your-site), and a few posts on how to integrate this in your CMS, such as [Known](/blog/integrating-unlock-with-known/), or inside a front end web framework, such as [React](/blog/integratating-unlock-react/).

If you need help for your own stack, please, reach out, we're here to help!


A lock is a smart contract which holds the list of members of your community.

Creating your first lock

<p><img src="/images/blog/first-lock/new-lock.jpg" alt="new lock"></p>
<p>A lock is a way to represent a <em>membership</em>. Each member has a key to the lock which they can purchase from the lock directly.</p>
<h2>So, you want to create your first lock?</h2>
<p>First, you need an Ethereum wallet. On desktop, the most popular is <a href="https://metamask.io/">Metamask</a>, but things should work similarly with any Ethereum wallet. For now, we recommend using a desktop computer rather than mobile device because the UI is much cleaner there.</p>
<p>Go to the <em>Creator Dashbboard</em> on <a href="https://unlock-protocol.com">https://unlock-protocol.com</a>. This creator dashboard will help you manage your locks (create them, update them, or view some data about them...).</p>
<p>For now, it should be empty and look like this:</p>
<p><img src="/images/blog/first-lock/empty-dashboard.png" alt="empty dashboard"></p>
<p>On the top left, you can see which network you're connected to. Ethereum has a single "Main Network" and several test networks such as Goerli. Make sure you're on the Main Network. You can also view which address your wallet is currently using.</p>
<p>On the top right, a button lets you create a lock. Once you click on it, a form appears and lets you prepare your first lock.</p>
<p><img src="/images/blog/first-lock/create-lock-form.png" alt="create lock form"></p>
<p>When creating a lock, each field can be edited.</p>
<h3>The name</h3>
<p>First, the name. The lock's name is stored on-chain and is used by other applications which may want to show information about your lock and its keys, such as <a href="https://etherscan.io/">Etherscan</a>, <a href="https://opensea.io/">OpenSea</a> and more. Use something descriptive but fairly short as every character counts toward the fees you'll pay to deploy this lock.</p>
<h3>The Duration</h3>
<p>Each key has a duration. At the end of the duration the membership is considered "expired" and should not grant access to the key holder. In this case, members can renew to make their key valid again.</p>
<p>The duration is expressed in seconds in the smart contract, but given the inherent latency of the blockchain we believe that durations shorter than 1 day are not practical. Most creators will pick durations of months to years.</p>
<p>Picking the right duration is useful because a key holder can "cancel" their key by sending it back to the lock to get a refund. The elapsed duration is used to assess the amount to be refunded.</p>
<h3>The number of keys</h3>
<p>As the lock owner you can choose how many people can purchase keys. This is important because many membership are "exclusive". For example, an artist may want to only allocate a small number of keys to their truest fans (in that case, they would have several locks, each represented a <em>level</em> of membership).</p>
<p>It is possible to set an unlimited number of members.</p>
<p>Note that expired keys still count toward the maximum number of keys, but as we've seen, keys can be extended (by sending another payment to the lock) and they can be transfered as well...</p>
<h3>Key Price</h3>
<p>The price of each key is made of 2 things: the currency and the amount of that currency. By default, our UI uses Ether, the native Ethereum currency, but the UI also leaves the option to use <a href="https://makerdao.com/en/dai">DAI</a>, a stable coin, whose value is always 1$. <small>(Our smart contract actually supports any <a href="https://www.investopedia.com/news/what-erc20-and-what-does-it-mean-ethereum/">ERC20</a>. Please get in touch if you need to deploy a lock which uses something else than DAI!)</small></p>
<p>Once you've chosen your currency, you can set the price you want, from 0 to billions!</p>
<h3>Submitting</h3>
<p>Make sure all values you've chosen are correct. Most of them cannot be changed once the lock has been deployed.</p>
<p>After submitting, your wallet will ask for a confirmation. Deploying a lock is fairly "expensive" in gas (at least 4M), because it a a full contract deployed under your address. Unless deploying the lock is urgent, you should probably set a low gas price.</p>
<p>It is important that you wait for the lock to be deployed, because its address (starting with <code>0x</code>) will only be final then, and that address will be used by your members to send payments and you don't want them to send a payment to the wrong address!</p>
<h3>No Ether? No problem</h3>
<p>Locks themselves can be transfered. This means that we can create the locks for you and transfer them to you. If we do this, you do not even need Ether to pay for the fees. We will create the lock based on your needs and send it to your address so you can start using it ASAP!</p>
<h2>Next!</h2>
<p>That's it! Your lock has now been created. The next step is to integrate it on your website to let people become members. See the wiki page on <a href="https://github.com/unlock-protocol/unlock/wiki/Integrating-Unlock-on-your-site">how to integrate unlock</a>, and a few posts on how to integrate this in your CMS, such as <a href="/blog/integrating-unlock-with-known/">Known</a>, or inside a front end web framework, such as <a href="/blog/integratating-unlock-react/">React</a>.</p>
<p>If you need help for your own stack, please, reach out, we're here to help!</p>



React is one of the main JavaScript front end frameworks. Unlock's JavaScript API provides an easy way for any creator to restrict access to content or features.

Here is a tutorial on how to integrate Unlock in your react application. We will create a React application (using [create-react-app](https://github.com/facebook/create-react-app)) which will show the user whether they own a key (unlocked!), or if they need to purchase one (locked). The [code for the application is on Github](https://github.com/unlock-protocol/react-example); you can try it yourself directly on the [corresponding github page](https://unlock-protocol.github.io/react-example/).

We will assume you have already created a react application and that application should behave differently based on whether the user is a member or not.

1. Include the Unlock snippet

We do that by changing the `index.html` (main HTML template) of our application. The following snippet is added the `<head>` section:

```
<script> (function (d, s) {
    var js = d.createElement(s),
      sc = d.getElementsByTagName(s)[0];
    js.src = "https://paywall.unlock-protocol.com/unlock.latest.min.js";
    sc.parentNode.insertBefore(js, sc);
  }(document, "script"));
</script>
```

Note: this loading technique is non blocking, which means this does not have any performance impact on rendering.

2. Add the configuration

The snippet inserted above needs to know which lock are used on this page. For this example, we will use a single lock, the one that is already being used on that blog.

```
<script>
  var unlockProtocolConfig = {
    locks: {
      '0xb77030a7e47a5eb942a4748000125e70be598632': {
        name: 'The Unlock Members lock',
        network: 137,
      },
    },
    icon: 'https://unlock-protocol.com/images/svg/unlock-word-mark.svg'
  }
</script>
```

3. Writing the component which listens to Unlock

React components can have their own local state (which can be passed down to their children components). Here, our state will likely include a `locked` key. The value associated with that key can be any of the 3 following:

- `locked`
- `unlocked`
- `pending`

The `pending` state allows us to not show to the use a "flash" when toggling between the 2 other state. When the page loads, we do not know right away whether the state should be locked or unlocked. Fortunately though, the unlock JavaScript API is very fast (we cache a lot of data) to make sure that, in the vast majority of cases, the user will actually not witness the `pending` state.

```
constructor(props) {
  super(props)
  this.state = {
    locked: "pending" // there are 3 state: pending, locked and unlocked
  }
}
```

React's component have lifecycle methods which let developers integrate with JavaScript API calls. Unlock uses the `window.addEventListener` API to trigger an `unlockProtocol` in order to indicate the state of the lock for the current visitor, so our component needs to implement the following method when it is mounted:

```
componentDidMount() {
  window.addEventListener("unlockProtocol", this.unlockHandler)
}
```

Note: `this.unlockHandler` will be implemented below.

Similarly, when the component is to be removed, we want to perform some cleanup to avoid wasting the browser's resources.

```
componentWillUnmount() {
  window.removeEventListener("unlockProtocol", this.unlockHandler)
}
```

We need to add our `unlockHandler` in the constructor:

```
constructor(props) {
  super(props)
  this.unlockHandler = this.unlockHandler.bind(this)
  this.state = {
    locked: "pending" // there are 3 state: pending, locked and unlocked
  }
}
```

And we also implement it by using React's `setState` method. Unlock will emit either `locked` or `unlocked`.

```
unlockHandler(e) {
  this.setState(state => {
    return {
      ...state,
      locked: e.detail
    }
  })
}
```

When the state is `locked`, we want to let the user purchase a key. For this, we use the modal provided by the Unlock JavaScript API, but you could very well implement that logic yourself (it would require tinkering with the web3 providers though...)

```
checkout() {
  window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()
}
```

Now that we have the state and ways to invoke a key purchase, we can easily render based on it. This is probably where your app's logic will likely diverge the most, but here is what we did for our demo application:

- if the content is locked, we show a 🔒, and clicking on it will open the checkout model.
- if the content is unlocked, we show a 🗝!

```
render() {
  const { locked } = this.state
  return (
    <div className="App">
      <header className="App-header">
        {locked === "locked" && (
          <div onClick={this.checkout} style={{ cursor: "pointer" }}>
            Unlock me!{" "}
            <span aria-label="locked" role="img">
              🔒
            </span>
          </div>
        )}
        {locked === "unlocked" && (
          <div>
            Unlocked!{" "}
            <span aria-label="unlocked" role="img">
              🗝
            </span>
          </div>
        )}
      </header>
    </div>
  )
}
```

## Conclusion

Unlock's JavaScript API is very simple and will get out of the way to let you implement behaviors that your application requires.

If the status of the lock is re-used in several components, it might be a good idea to isolate that logic in a single one and pass the state as props to sub-components!


Integrating Unlock with React is straightforward! Here's a quick tutorial on how to get there!

Our Javascript API is very easy to integrate with React!

Integrating Unlock with React

<p>React is one of the main JavaScript front end frameworks. Unlock's JavaScript API provides an easy way for any creator to restrict access to content or features.</p>
<p>Here is a tutorial on how to integrate Unlock in your react application. We will create a React application (using <a href="https://github.com/facebook/create-react-app">create-react-app</a>) which will show the user whether they own a key (unlocked!), or if they need to purchase one (locked). The <a href="https://github.com/unlock-protocol/react-example">code for the application is on Github</a>; you can try it yourself directly on the <a href="https://unlock-protocol.github.io/react-example/">corresponding github page</a>.</p>
<p>We will assume you have already created a react application and that application should behave differently based on whether the user is a member or not.</p>
<ol>
<li>Include the Unlock snippet</li>
</ol>
<p>We do that by changing the <code>index.html</code> (main HTML template) of our application. The following snippet is added the <code>&#x3C;head></code> section:</p>
<pre><code>&#x3C;script> (function (d, s) {
    var js = d.createElement(s),
      sc = d.getElementsByTagName(s)[0];
    js.src = "https://paywall.unlock-protocol.com/unlock.latest.min.js";
    sc.parentNode.insertBefore(js, sc);
  }(document, "script"));
&#x3C;/script>
</code></pre>
<p>Note: this loading technique is non blocking, which means this does not have any performance impact on rendering.</p>
<ol start="2">
<li>Add the configuration</li>
</ol>
<p>The snippet inserted above needs to know which lock are used on this page. For this example, we will use a single lock, the one that is already being used on that blog.</p>
<pre><code>&#x3C;script>
  var unlockProtocolConfig = {
    locks: {
      '0xb77030a7e47a5eb942a4748000125e70be598632': {
        name: 'The Unlock Members lock',
        network: 137,
      },
    },
    icon: 'https://unlock-protocol.com/images/svg/unlock-word-mark.svg'
  }
&#x3C;/script>
</code></pre>
<ol start="3">
<li>Writing the component which listens to Unlock</li>
</ol>
<p>React components can have their own local state (which can be passed down to their children components). Here, our state will likely include a <code>locked</code> key. The value associated with that key can be any of the 3 following:</p>
<ul>
<li><code>locked</code></li>
<li><code>unlocked</code></li>
<li><code>pending</code></li>
</ul>
<p>The <code>pending</code> state allows us to not show to the use a "flash" when toggling between the 2 other state. When the page loads, we do not know right away whether the state should be locked or unlocked. Fortunately though, the unlock JavaScript API is very fast (we cache a lot of data) to make sure that, in the vast majority of cases, the user will actually not witness the <code>pending</code> state.</p>
<pre><code>constructor(props) {
  super(props)
  this.state = {
    locked: "pending" // there are 3 state: pending, locked and unlocked
  }
}
</code></pre>
<p>React's component have lifecycle methods which let developers integrate with JavaScript API calls. Unlock uses the <code>window.addEventListener</code> API to trigger an <code>unlockProtocol</code> in order to indicate the state of the lock for the current visitor, so our component needs to implement the following method when it is mounted:</p>
<pre><code>componentDidMount() {
  window.addEventListener("unlockProtocol", this.unlockHandler)
}
</code></pre>
<p>Note: <code>this.unlockHandler</code> will be implemented below.</p>
<p>Similarly, when the component is to be removed, we want to perform some cleanup to avoid wasting the browser's resources.</p>
<pre><code>componentWillUnmount() {
  window.removeEventListener("unlockProtocol", this.unlockHandler)
}
</code></pre>
<p>We need to add our <code>unlockHandler</code> in the constructor:</p>
<pre><code>constructor(props) {
  super(props)
  this.unlockHandler = this.unlockHandler.bind(this)
  this.state = {
    locked: "pending" // there are 3 state: pending, locked and unlocked
  }
}
</code></pre>
<p>And we also implement it by using React's <code>setState</code> method. Unlock will emit either <code>locked</code> or <code>unlocked</code>.</p>
<pre><code>unlockHandler(e) {
  this.setState(state => {
    return {
      ...state,
      locked: e.detail
    }
  })
}
</code></pre>
<p>When the state is <code>locked</code>, we want to let the user purchase a key. For this, we use the modal provided by the Unlock JavaScript API, but you could very well implement that logic yourself (it would require tinkering with the web3 providers though...)</p>
<pre><code>checkout() {
  window.unlockProtocol &#x26;&#x26; window.unlockProtocol.loadCheckoutModal()
}
</code></pre>
<p>Now that we have the state and ways to invoke a key purchase, we can easily render based on it. This is probably where your app's logic will likely diverge the most, but here is what we did for our demo application:</p>
<ul>
<li>if the content is locked, we show a 🔒, and clicking on it will open the checkout model.</li>
<li>if the content is unlocked, we show a 🗝!</li>
</ul>
<pre><code>render() {
  const { locked } = this.state
  return (
    &#x3C;div className="App">
      &#x3C;header className="App-header">
        {locked === "locked" &#x26;&#x26; (
          &#x3C;div onClick={this.checkout} style={{ cursor: "pointer" }}>
            Unlock me!{" "}
            &#x3C;span aria-label="locked" role="img">
              🔒
            &#x3C;/span>
          &#x3C;/div>
        )}
        {locked === "unlocked" &#x26;&#x26; (
          &#x3C;div>
            Unlocked!{" "}
            &#x3C;span aria-label="unlocked" role="img">
              🗝
            &#x3C;/span>
          &#x3C;/div>
        )}
      &#x3C;/header>
    &#x3C;/div>
  )
}
</code></pre>
<h2>Conclusion</h2>
<p>Unlock's JavaScript API is very simple and will get out of the way to let you implement behaviors that your application requires.</p>
<p>If the status of the lock is re-used in several components, it might be a good idea to isolate that logic in a single one and pass the state as props to sub-components!</p>



The wallet. It’s your interface into the blockchain. It lets you transact with the blockchain and in Ethereum’s case also with its smart contracts. You could think of it as an account but its more of an identifier with the crucial difference that you are in possession of it. It’s not stored on a server but lives with you, on your computer, your phone or hardware wallet.

# Control & Transparency

The fact that you’re in full control and the sole owner of your wallet and therefore the means with which you transact with the blockchain are a powerful aspect.

Think about it: your bank account is managed by your bank, the data associated with it (your personal data, but also the data that represents your money) lives on servers that the bank controls, even your credit card is owned by the bank and governed by a cardholder agreement. It’s your money though! And it doesn’t end there. When you’re sending money your transaction is facilitated by the sending and receiving bank, plus the processor (Visa, Mastercard, etc.) and whoever else is in the middle of that transaction (Western Union, Transferwise, Square, Stripe). And then you wonder, where is my money that’s mentioned in my bank account actually physically? The reason this matters is that you are dependent on the bank, their rules, fees and whims. If you take this to an extreme and imagine the bank going bankrupt, because they took on too much risk, you have no control and your money might be gone. On a less extreme level they might not let you do business with them because you fall into a legal gray zone – think Wikileaks or many blockchain projects.

<p style="text-align:center">
	<img src="/images/blog/digital-cash/digitalcash.jpg" width="400px" alt="BLockchain has many features that make it digital cash.">
</p>

# Digital Cash

Blockchain transactions behave more like cash. We have a mutual understanding of the value of our physical money and you own and control the cash that’s in your real world wallet. You hand over the cash without anyone in middle and the transaction is done. This is very similar to the blockchain with a few additional advantages: your blockchain wallet can live in several places and you can transact without having to be in the same physical space. On top of that the Ethereum blockchain (and other blockchain projects) let you create smart contracts that allow you to codify and automate parts of the transaction.

I liked this analogie by [Steven Chien](https://twitter.com/stevenmeets): he calls the internet the “Information Superhighway” – which allowed for the large scale (and cost efficient) distribution of information and the blockchain the “Value Superhighway” – that allow for a large scale and cost efficient but also more equitable distribution of value. It’s a good read, check it out on [Hackernoon](https://hackernoon.com/blockchain-the-value-superhighway-into-your-wallet-9330cec5bf8f).

<p style="text-align:center">
	<img src="/images/blog/digital-cash/keychain.jpg" width="400px" alt="Towards an access ecosystem.">
</p>

# Access

So that’s cool, we have a wallet, we control what’s in it, how we transact and there are no intermediaries. Its also relatively fast all things considered: blockchain transactions sometimes take a while to confirm but in terms of overall settlement its faster than a bank transfer or a credit card transaction (they can take anywhere from 3 to 30 days to complete).

Because there's a ledger of every transaction, apps can easily determine who’s paid for access and unlock it for you. In that sense your wallet is also a keychain.

<p style="text-align:center">
	<img src="/images/blog/digital-cash/creditcard.jpg" width="400px" alt="One wallet, access to many different things.">
</p>

# Beyond Cash

Taking that idea a step further you could start swapping, trading or even bundling keys where one key gives you access to multiple sites or pieces of content that all share the same lock (I wrote about this in our [Multi Use Locks](https://unlock-protocol.com/blog/multi-use-locks/) post if you’re curious about that). The most interesting part is yet to come: ledger plus smart contracts allows users to receive tokens for specific actions – so if you refer a creators content or you’ve paid for access 10 times you could get a kickback.

This feature set is really powerful: imagine if you could get into your WeWork office with your credit card (because you’ve paid for your desk with it) but it also gives you access to the new york times online, gets you bonus points at your local coffee shop and at the end of the day opens up and pays for your car2go or zipcar.

You have thoughts or comments? Reach out I’d love to chat. [@UnlockProtocol](https://twitter.com/UnlockProtocol) or [hello@unlock-protocol.com](mailto:hello@unlock-protocol.com).


A quick exploration into blockchain wallets, their applications and why they're so powerful.

Wallets and their superpowers for users.

Digital Cash. Big Deal.

<p>The wallet. It’s your interface into the blockchain. It lets you transact with the blockchain and in Ethereum’s case also with its smart contracts. You could think of it as an account but its more of an identifier with the crucial difference that you are in possession of it. It’s not stored on a server but lives with you, on your computer, your phone or hardware wallet.</p>
<h1>Control &#x26; Transparency</h1>
<p>The fact that you’re in full control and the sole owner of your wallet and therefore the means with which you transact with the blockchain are a powerful aspect.</p>
<p>Think about it: your bank account is managed by your bank, the data associated with it (your personal data, but also the data that represents your money) lives on servers that the bank controls, even your credit card is owned by the bank and governed by a cardholder agreement. It’s your money though! And it doesn’t end there. When you’re sending money your transaction is facilitated by the sending and receiving bank, plus the processor (Visa, Mastercard, etc.) and whoever else is in the middle of that transaction (Western Union, Transferwise, Square, Stripe). And then you wonder, where is my money that’s mentioned in my bank account actually physically? The reason this matters is that you are dependent on the bank, their rules, fees and whims. If you take this to an extreme and imagine the bank going bankrupt, because they took on too much risk, you have no control and your money might be gone. On a less extreme level they might not let you do business with them because you fall into a legal gray zone – think Wikileaks or many blockchain projects.</p>
<p style="text-align:center">
	<img src="/images/blog/digital-cash/digitalcash.jpg" width="400px" alt="BLockchain has many features that make it digital cash.">
</p>
<h1>Digital Cash</h1>
<p>Blockchain transactions behave more like cash. We have a mutual understanding of the value of our physical money and you own and control the cash that’s in your real world wallet. You hand over the cash without anyone in middle and the transaction is done. This is very similar to the blockchain with a few additional advantages: your blockchain wallet can live in several places and you can transact without having to be in the same physical space. On top of that the Ethereum blockchain (and other blockchain projects) let you create smart contracts that allow you to codify and automate parts of the transaction.</p>
<p>I liked this analogie by <a href="https://twitter.com/stevenmeets">Steven Chien</a>: he calls the internet the “Information Superhighway” – which allowed for the large scale (and cost efficient) distribution of information and the blockchain the “Value Superhighway” – that allow for a large scale and cost efficient but also more equitable distribution of value. It’s a good read, check it out on <a href="https://hackernoon.com/blockchain-the-value-superhighway-into-your-wallet-9330cec5bf8f">Hackernoon</a>.</p>
<p style="text-align:center">
	<img src="/images/blog/digital-cash/keychain.jpg" width="400px" alt="Towards an access ecosystem.">
</p>
<h1>Access</h1>
<p>So that’s cool, we have a wallet, we control what’s in it, how we transact and there are no intermediaries. Its also relatively fast all things considered: blockchain transactions sometimes take a while to confirm but in terms of overall settlement its faster than a bank transfer or a credit card transaction (they can take anywhere from 3 to 30 days to complete).</p>
<p>Because there's a ledger of every transaction, apps can easily determine who’s paid for access and unlock it for you. In that sense your wallet is also a keychain.</p>
<p style="text-align:center">
	<img src="/images/blog/digital-cash/creditcard.jpg" width="400px" alt="One wallet, access to many different things.">
</p>
<h1>Beyond Cash</h1>
<p>Taking that idea a step further you could start swapping, trading or even bundling keys where one key gives you access to multiple sites or pieces of content that all share the same lock (I wrote about this in our <a href="https://unlock-protocol.com/blog/multi-use-locks/">Multi Use Locks</a> post if you’re curious about that). The most interesting part is yet to come: ledger plus smart contracts allows users to receive tokens for specific actions – so if you refer a creators content or you’ve paid for access 10 times you could get a kickback.</p>
<p>This feature set is really powerful: imagine if you could get into your WeWork office with your credit card (because you’ve paid for your desk with it) but it also gives you access to the new york times online, gets you bonus points at your local coffee shop and at the end of the day opens up and pays for your car2go or zipcar.</p>
<p>You have thoughts or comments? Reach out I’d love to chat. <a href="https://twitter.com/UnlockProtocol">@UnlockProtocol</a> or <a href="mailto:hello@unlock-protocol.com">hello@unlock-protocol.com</a>.</p>


Thousands of people participate in the [IndieWeb](https://indieweb.org): a growing movement that encourages people to publish on their own site rather than "silo" networks like Facebook and Twitter. [As The New Yorker put it](https://www.newyorker.com/tech/annals-of-technology/can-indie-social-media-save-us):

> Proponents of the IndieWeb offer a fairly straightforward analysis of our current social-media crisis. They frame it in terms of a single question: Who owns the servers? The bulk of our online activity takes places on servers owned by a small number of massive companies. Servers cost money to run. If you’re using a company’s servers without paying for the privilege, then that company must be finding other ways to “extract value” from you—and it’s that quest for large-scale value extraction, they argue, that leads directly to the crises of compromised privacy and engineered addictiveness with which we’re currently grappling.

[Known](https://withknown.com) was one of the first indieweb publishing platforms. It lets anyone host a social media profile on their own webspace. You can respond to posts on other indieweb platforms, or invite visitors to discuss directly on your posts.

Integrating Unlock with Known means allowing these indieweb users to sell memberships to aspects of their sites. Disclaimer: I'm the co-founder of Known and its first user. [I still use it on my website](https://werd.io) - and I want to use Unlock there, too. So it was in my interest to create a plugin.

Here's what I wanted to achieve:

- I want to restrict access to long-form content
- I want to restrict access to commenting
- I don't want Known users to have to write a single line of code

In other words, I want to add a paywall to my long-form posts (but just my long-form posts), and I want comments on _all_ posts to be limited to people who have bought access with Unlock.

If you don't care about how I built this, you can stop now: [the plugin is available to download on GitHub](https://github.com/benwerd/unlock), and you can install it as a plugin in the latest Known platform. Everything is powered using a simple admin panel.

![The Unlock admin panel in Known.](/images/blog/known/unlock-admin.png)

To build the plugin, I used two aspects of Unlock in tandem: the paywall and the Unlock JavaScript API.

![The Unlock paywall on Known.](/images/blog/known/known-unlock.png)

## 1. The paywall.

I added the site-wide ability to attach a lock to my Known site. When this is present, all long-form posts will be protected by that Unlock lock.

![Unlock fields](/images/blog/known/unlock-fields.png)

I also added a per-post lock field. Instead of using a site-wide lock, I could choose to add a lock address to just one or two particularly valuable posts. Then most of my site would remain free, but these posts would be restricted. I could _also_ keep the whole site protected under one lock, but then use a different lock address for a handful of posts. That would allow me to charge extra for access to those.

When Known finds a lock on the page - either site-wide or relating to the post we're trying to view - it loads the paywall code, which looks like this:

```

<script src="https://paywall.unlock-protocol.com/paywall.min.js"
        data-unlock-url="https://paywall.unlock-protocol.com"></script>
<meta name="lock" content="<?= $lockAddress ?>"/>
```

Note that this is identical to the paywall code that anyone can use. The only difference is that we're retrieving the lock
address from the site or post configuration with a short snippet of PHP.

## 2. The Unlock API.

On every post, I restricted access to commenting.

Here, I wanted to display my own UI, rather than using a built-in Unlock app. So I needed to use a combination of the
Unlock JavaScript API and Known's back-end PHP library.

To begin with, I made sure both the Unlock configuration and library were loaded in the `<head />` section of each page appropriately.

First the configuration object:

```
<script>
    var unlockProtocolConfig = {
    locks: {
        '<?=$lockAddress?>': {
            name: '<?=\Idno\Core\Idno::site()->config()->getTitle()?> Members',
        },
    },
    icon: 'https://unlock-protocol.com/images/svg/unlock-word-mark.svg',
    callToAction: {
        default:
            'Members can leave comments and participate in discussion.',
        },
    }
</script>
```

And then the library itself:

```
<script>
    (function (d, s) {
    var js = d.createElement(s),
    sc = d.getElementsByTagName(s)[0];
    js.src = "https://paywall.unlock-protocol.com/unlock.latest.min.js";
    sc.parentNode.insertBefore(js, sc);
    }(document, "script"));
</script>
```

I then created a replacement comment template in Known. Here, I loaded HTML for the comment form into a variable called `commentForm`; I also added HTML for a link with a call to action into a variable called `commentCta`.

```
<div id="comment-form"></div>
<script>
    // Load JS variable values from PHP variables
    var commentForm = <?=json_encode($commentForm)?>;
    var commentCta = <?=json_encode($commentCta)?>;

    // Listen to Unlock protocol API
    window.addEventListener('unlockProtocol', function (e) {
        var state = e.detail
        if (state === 'unlocked') {
            $('#comment-form').html(commentForm);
        }
        if (state === 'locked') {
            $('#comment-form').html(commentCta)
        }
    })
</script>
```

What's happening here? Once the Unlock protocol handler is loaded (which we did by adding the library and configuration above), all we need to do is listen for events generated by `unlockProtocol`. If `event.detail` is equal to `unlocked`, we know the current user has access to the lock. Conversely, if `event.detail` is equal to `locked`, we know the current user _doesn't_ have access.

The form HTML is purely for Known, so I won't go into it here, but it's worth looking more closely at the CTA:

```
<div class="unlock-cta">
    <a href="#" onclick="window.unlockProtocol && unlockProtocol.loadCheckoutModal()">
        Purchase access to leave comments.</a>
</div>
```

On click, I check that `window.unlockProtocol` exists (i.e., the library has been loaded), and then load a provided method called `unlockProtocol.loadCheckoutModal()` that loads a modal containing the Unlock lock. The text shouldn't be a surprise: I set it in the `callToAction` of my configuration section.

![Unlock modal](/images/blog/known/unlock-modal.png)

And that's all I need to do. The Unlock API manages the purchase process and all of the access control. It's as lightweight as it can be.

Have you integrated Unlock into your application? We'd love to hear from you. You can email us at [hello@unlock-protocol.com](mailto:hello@unlock-protocol.com) or come say hi on [our Discord](https://discord.gg/Ah6ZEJyTDp).

The Unlock API is flexible and easy to use. Now any Known user can use Unlock on their website with a simple plugin. Here's how we did it.

How I added the Unlock protocol to an open source publishing platform quickly and easily.

Integrating Unlock with Known

<p>Thousands of people participate in the <a href="https://indieweb.org">IndieWeb</a>: a growing movement that encourages people to publish on their own site rather than "silo" networks like Facebook and Twitter. <a href="https://www.newyorker.com/tech/annals-of-technology/can-indie-social-media-save-us">As The New Yorker put it</a>:</p>
<blockquote>
<p>Proponents of the IndieWeb offer a fairly straightforward analysis of our current social-media crisis. They frame it in terms of a single question: Who owns the servers? The bulk of our online activity takes places on servers owned by a small number of massive companies. Servers cost money to run. If you’re using a company’s servers without paying for the privilege, then that company must be finding other ways to “extract value” from you—and it’s that quest for large-scale value extraction, they argue, that leads directly to the crises of compromised privacy and engineered addictiveness with which we’re currently grappling.</p>
</blockquote>
<p><a href="https://withknown.com">Known</a> was one of the first indieweb publishing platforms. It lets anyone host a social media profile on their own webspace. You can respond to posts on other indieweb platforms, or invite visitors to discuss directly on your posts.</p>
<p>Integrating Unlock with Known means allowing these indieweb users to sell memberships to aspects of their sites. Disclaimer: I'm the co-founder of Known and its first user. <a href="https://werd.io">I still use it on my website</a> - and I want to use Unlock there, too. So it was in my interest to create a plugin.</p>
<p>Here's what I wanted to achieve:</p>
<ul>
<li>I want to restrict access to long-form content</li>
<li>I want to restrict access to commenting</li>
<li>I don't want Known users to have to write a single line of code</li>
</ul>
<p>In other words, I want to add a paywall to my long-form posts (but just my long-form posts), and I want comments on <em>all</em> posts to be limited to people who have bought access with Unlock.</p>
<p>If you don't care about how I built this, you can stop now: <a href="https://github.com/benwerd/unlock">the plugin is available to download on GitHub</a>, and you can install it as a plugin in the latest Known platform. Everything is powered using a simple admin panel.</p>
<p><img src="/images/blog/known/unlock-admin.png" alt="The Unlock admin panel in Known."></p>
<p>To build the plugin, I used two aspects of Unlock in tandem: the paywall and the Unlock JavaScript API.</p>
<p><img src="/images/blog/known/known-unlock.png" alt="The Unlock paywall on Known."></p>
<h2>1. The paywall.</h2>
<p>I added the site-wide ability to attach a lock to my Known site. When this is present, all long-form posts will be protected by that Unlock lock.</p>
<p><img src="/images/blog/known/unlock-fields.png" alt="Unlock fields"></p>
<p>I also added a per-post lock field. Instead of using a site-wide lock, I could choose to add a lock address to just one or two particularly valuable posts. Then most of my site would remain free, but these posts would be restricted. I could <em>also</em> keep the whole site protected under one lock, but then use a different lock address for a handful of posts. That would allow me to charge extra for access to those.</p>
<p>When Known finds a lock on the page - either site-wide or relating to the post we're trying to view - it loads the paywall code, which looks like this:</p>
<pre><code>&#x3C;!-- Include this script in the &#x3C;head> section of your page -->
&#x3C;script src="https://paywall.unlock-protocol.com/paywall.min.js"
        data-unlock-url="https://paywall.unlock-protocol.com">&#x3C;/script>
&#x3C;meta name="lock" content="&#x3C;?= $lockAddress ?>"/>
</code></pre>
<p>Note that this is identical to the paywall code that anyone can use. The only difference is that we're retrieving the lock
address from the site or post configuration with a short snippet of PHP.</p>
<h2>2. The Unlock API.</h2>
<p>On every post, I restricted access to commenting.</p>
<p>Here, I wanted to display my own UI, rather than using a built-in Unlock app. So I needed to use a combination of the
Unlock JavaScript API and Known's back-end PHP library.</p>
<p>To begin with, I made sure both the Unlock configuration and library were loaded in the <code>&#x3C;head /></code> section of each page appropriately.</p>
<p>First the configuration object:</p>
<pre><code>&#x3C;script>
    var unlockProtocolConfig = {
    locks: {
        '&#x3C;?=$lockAddress?>': {
            name: '&#x3C;?=\Idno\Core\Idno::site()->config()->getTitle()?> Members',
        },
    },
    icon: 'https://unlock-protocol.com/images/svg/unlock-word-mark.svg',
    callToAction: {
        default:
            'Members can leave comments and participate in discussion.',
        },
    }
&#x3C;/script>
</code></pre>
<p>And then the library itself:</p>
<pre><code>&#x3C;script>
    (function (d, s) {
    var js = d.createElement(s),
    sc = d.getElementsByTagName(s)[0];
    js.src = "https://paywall.unlock-protocol.com/unlock.latest.min.js";
    sc.parentNode.insertBefore(js, sc);
    }(document, "script"));
&#x3C;/script>
</code></pre>
<p>I then created a replacement comment template in Known. Here, I loaded HTML for the comment form into a variable called <code>commentForm</code>; I also added HTML for a link with a call to action into a variable called <code>commentCta</code>.</p>
<pre><code>&#x3C;div id="comment-form">&#x3C;/div>
&#x3C;script>
    // Load JS variable values from PHP variables
    var commentForm = &#x3C;?=json_encode($commentForm)?>;
    var commentCta = &#x3C;?=json_encode($commentCta)?>;

    // Listen to Unlock protocol API
    window.addEventListener('unlockProtocol', function (e) {
        var state = e.detail
        if (state === 'unlocked') {
            $('#comment-form').html(commentForm);
        }
        if (state === 'locked') {
            $('#comment-form').html(commentCta)
        }
    })
&#x3C;/script>
</code></pre>
<p>What's happening here? Once the Unlock protocol handler is loaded (which we did by adding the library and configuration above), all we need to do is listen for events generated by <code>unlockProtocol</code>. If <code>event.detail</code> is equal to <code>unlocked</code>, we know the current user has access to the lock. Conversely, if <code>event.detail</code> is equal to <code>locked</code>, we know the current user <em>doesn't</em> have access.</p>
<p>The form HTML is purely for Known, so I won't go into it here, but it's worth looking more closely at the CTA:</p>
<pre><code>&#x3C;div class="unlock-cta">
    &#x3C;a href="#" onclick="window.unlockProtocol &#x26;&#x26; unlockProtocol.loadCheckoutModal()">
        Purchase access to leave comments.&#x3C;/a>
&#x3C;/div>
</code></pre>
<p>On click, I check that <code>window.unlockProtocol</code> exists (i.e., the library has been loaded), and then load a provided method called <code>unlockProtocol.loadCheckoutModal()</code> that loads a modal containing the Unlock lock. The text shouldn't be a surprise: I set it in the <code>callToAction</code> of my configuration section.</p>
<p><img src="/images/blog/known/unlock-modal.png" alt="Unlock modal"></p>
<p>And that's all I need to do. The Unlock API manages the purchase process and all of the access control. It's as lightweight as it can be.</p>
<p>Have you integrated Unlock into your application? We'd love to hear from you. You can email us at <a href="mailto:hello@unlock-protocol.com">hello@unlock-protocol.com</a> or come say hi on <a href="https://discord.gg/Ah6ZEJyTDp">our Discord</a>.</p>



A recipe to go from zero to one cannot exist. Creating a company, a team, a product or a protocol require a lot of work and faith. Our goal is ambitious, but it can only be achieved an incredible amount of small steps (4000 [Pull Requests](https://github.com/unlock-protocol/unlock/pulls) as of Tuesday!).

This week, we took some time to think about our **mission**, which is what we do, our **vision**, which is why we do it, and our **values**, which describe how we do it. We got some help and it took us a full day, but this work will help us in each decision and will act as a "scaffold" for the whole team.

## Our Vision

We believe that, now, most creators are not able to capture enough of the value that they create. Open source developers, musicians, writers, or even curators provide incredible value for all users of the internet and beyond. But we also have to acknowledge that most of them are not being rewarded for that work, and when they are, it is often through gatekeepers: middlemen who set the terms and too often end up competing with them.

We know there is a better way. This is our vision:

> “Every creator can make a sustainable living from their work, while respecting the time, privacy and health of their community.”

## Our Mission

In order to make that vision a reality, we believe it starts with creators and this is why our mission is the following:

> "We empower creators to capture the value they create for their community, on their own terms."

## Our Values

Values define "how" we want to achieve our mission and realize the vision. They provide principles that we want to live by, both internally, but also externally, with users of the protocol and members of our own community. Here are the ones we chose:

- Collaborative
- Human Centered
- Mission Driven
- Simple
- Transparent

Of course, in that list there are things that we already apply, and others which are, at least for now, more aspirational.

Based on that list, it should be pretty clear that your input matters to us. We hope that you'll provide us guidance on how to adopt these principles during our journey! Please, reach out to us, in comments below, on [Discord](https://discord.gg/Ah6ZEJyTDp), or even privately using the Intercom widget in the lower right corner of this page.


Identifying Mission, Vision and Values informs business strategy and paints a holistic and accurate picture of a business.

We empower creators to capture the value they create for their community, on their own terms

Mission, Vision and Values

<p>A recipe to go from zero to one cannot exist. Creating a company, a team, a product or a protocol require a lot of work and faith. Our goal is ambitious, but it can only be achieved an incredible amount of small steps (4000 <a href="https://github.com/unlock-protocol/unlock/pulls">Pull Requests</a> as of Tuesday!).</p>
<p>This week, we took some time to think about our <strong>mission</strong>, which is what we do, our <strong>vision</strong>, which is why we do it, and our <strong>values</strong>, which describe how we do it. We got some help and it took us a full day, but this work will help us in each decision and will act as a "scaffold" for the whole team.</p>
<h2>Our Vision</h2>
<p>We believe that, now, most creators are not able to capture enough of the value that they create. Open source developers, musicians, writers, or even curators provide incredible value for all users of the internet and beyond. But we also have to acknowledge that most of them are not being rewarded for that work, and when they are, it is often through gatekeepers: middlemen who set the terms and too often end up competing with them.</p>
<p>We know there is a better way. This is our vision:</p>
<blockquote>
<p>“Every creator can make a sustainable living from their work, while respecting the time, privacy and health of their community.”</p>
</blockquote>
<h2>Our Mission</h2>
<p>In order to make that vision a reality, we believe it starts with creators and this is why our mission is the following:</p>
<blockquote>
<p>"We empower creators to capture the value they create for their community, on their own terms."</p>
</blockquote>
<h2>Our Values</h2>
<p>Values define "how" we want to achieve our mission and realize the vision. They provide principles that we want to live by, both internally, but also externally, with users of the protocol and members of our own community. Here are the ones we chose:</p>
<ul>
<li>Collaborative</li>
<li>Human Centered</li>
<li>Mission Driven</li>
<li>Simple</li>
<li>Transparent</li>
</ul>
<p>Of course, in that list there are things that we already apply, and others which are, at least for now, more aspirational.</p>
<p>Based on that list, it should be pretty clear that your input matters to us. We hope that you'll provide us guidance on how to adopt these principles during our journey! Please, reach out to us, in comments below, on <a href="https://discord.gg/Ah6ZEJyTDp">Discord</a>, or even privately using the Intercom widget in the lower right corner of this page.</p>



On June 21st, 2019, the team at [Betaworks Studios](https://betaworks-studios.com/) invited us to talk about Non Fungible Tokens.

They are a type of crypto token which aims at represented unique (or rare) "things". This is intentionnaly vague because they can be used to represent many many things, both virtual and physical.

For example, Non Fungible Tokens can be used to represent membership. If you are a member to Unlock's blog, then you own a Non Fungible Token called a "key".

Among other things, this key will let you access access the slides of the presentation below!


Non Fungible are one of the largest emerging token categories in the crypto asset world. We presented an intro to them at Betaworks Studios!

Non Fungible are one of the largest emerging token categories in the crypto asset world.

Non Fungible Tokens at Betaworks Studios

<p>On June 21st, 2019, the team at <a href="https://betaworks-studios.com/">Betaworks Studios</a> invited us to talk about Non Fungible Tokens.</p>
<p>They are a type of crypto token which aims at represented unique (or rare) "things". This is intentionnaly vague because they can be used to represent many many things, both virtual and physical.</p>
<p>For example, Non Fungible Tokens can be used to represent membership. If you are a member to Unlock's blog, then you own a Non Fungible Token called a "key".</p>
<p>Among other things, this key will let you access access the slides of the presentation below!</p>
