
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!


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



The difference between the web and native applications is the presence of **links**. These links are the reason why the web is a "network", as they connect pages together, making a graph. Google and its PageRank algorithm have leveraged that graph to rank websites, by assuming that the sites which have the most links are the most relevant.

![Use one Unlock lock for a variety of services and products.](/images/blog/protocol-for-memberships.png)

## Memberships > Attention

However, since the beginning, these links have also formed **communities**. Websites which discuss the same topics tend to link to each other, creating de-facto communities of interest. The social web reinforced that trend: people following each other formed more communities. Creators gathered groups of users around their work. Whether they are blogger or journalists, musician or even developers, they formed groups which attracted users because of their values, the content they produce, or even the tools that were offered to the members of the community.

Up until now, _we monetized the web through attention_. The creators who were able to "steal" the most would be paid the most. We're obviously reaching the limits of that model. It is time to start considering that these communities have value for their members... and that these members actually want to contribute to their communities as well.

## A protocol for memberships

Unlock is a protocol for memberships. Creators have locks which define the terms of the membership (price, duration, quantity, or even currency!) and consumers can purchase keys to these locks.

In practice, that means that the protocol empowers creators (or anyone, really!) to create locks for their communities. It's an open protocol, so anyone can participate: there is no gatekeeper or middleman.

Locks themselves can be used for many different things, limiting access to content (paywall...), to features (software licenses...), or even status (patronage...).

## Leading by example!

We're putting [our money where our mouth is](/blog/crypto-first/). Starting today, we've added a lock to this website. We decided to **limit access to the comments** to the members of the community.

You can unlock your membership by clicking on the bar at the bottom below (we actually set a price of 0 Ether, so you only pay for gas fees). Once you have a key, you will be able to read and write comments.

An important thing to note is that once the transaction has been confirmed, you will receive a Non Fungible Token on your crypto wallet. Like any other token, it is yours, and you can sell it, using [OpenSea](https://opensea.io/), for example.


The Unlock protocol provides a way for people to show their support and access exclusive content, features, or even status. It is a web-native way for creators to monetize their work.

Monetizing creation by leveraging membership to communities

A Protocol for Membership

<p>The difference between the web and native applications is the presence of <strong>links</strong>. These links are the reason why the web is a "network", as they connect pages together, making a graph. Google and its PageRank algorithm have leveraged that graph to rank websites, by assuming that the sites which have the most links are the most relevant.</p>
<p><img src="/images/blog/protocol-for-memberships.png" alt="Use one Unlock lock for a variety of services and products."></p>
<h2>Memberships > Attention</h2>
<p>However, since the beginning, these links have also formed <strong>communities</strong>. Websites which discuss the same topics tend to link to each other, creating de-facto communities of interest. The social web reinforced that trend: people following each other formed more communities. Creators gathered groups of users around their work. Whether they are blogger or journalists, musician or even developers, they formed groups which attracted users because of their values, the content they produce, or even the tools that were offered to the members of the community.</p>
<p>Up until now, <em>we monetized the web through attention</em>. The creators who were able to "steal" the most would be paid the most. We're obviously reaching the limits of that model. It is time to start considering that these communities have value for their members... and that these members actually want to contribute to their communities as well.</p>
<h2>A protocol for memberships</h2>
<p>Unlock is a protocol for memberships. Creators have locks which define the terms of the membership (price, duration, quantity, or even currency!) and consumers can purchase keys to these locks.</p>
<p>In practice, that means that the protocol empowers creators (or anyone, really!) to create locks for their communities. It's an open protocol, so anyone can participate: there is no gatekeeper or middleman.</p>
<p>Locks themselves can be used for many different things, limiting access to content (paywall...), to features (software licenses...), or even status (patronage...).</p>
<h2>Leading by example!</h2>
<p>We're putting <a href="/blog/crypto-first/">our money where our mouth is</a>. Starting today, we've added a lock to this website. We decided to <strong>limit access to the comments</strong> to the members of the community.</p>
<p>You can unlock your membership by clicking on the bar at the bottom below (we actually set a price of 0 Ether, so you only pay for gas fees). Once you have a key, you will be able to read and write comments.</p>
<p>An important thing to note is that once the transaction has been confirmed, you will receive a Non Fungible Token on your crypto wallet. Like any other token, it is yours, and you can sell it, using <a href="https://opensea.io/">OpenSea</a>, for example.</p>



![Dashboard Lock](/images/blog/erc20-locks/use-dai.jpg)

When creators deploy their locks using our dashboard, they can chose the following:

- the name of their locks
- how long each key is valid (from seconds to centuries!)
- how many keys they are selling (with the ability to sell an unlimited amount)
- and more importantly, the price of keys

Up until today, the price of the keys had to be in Ether. Today, we're happy to announce that we now support any ERC20 token as the currency for the price. As a creator you can now sell access to your content or features inside of your (d)applications using BNB, MKR or even BAT...

## Using stable coins

Out of ERC20 tokens, there is a category of tokens which is special: stable coins. These tokens have a value that is designed to be stable, most often against US dollars. Some of them are actually backed by financial organizations who guarantee a 1 to 1 exchange (such as USDC for example), while others are based on onchain collaterals (DAI is a good example of that!), while finally, a 3rd category is based on seigniorage: the supply expands and retracts based on price fluctuations. Learn more about stable coins with [this overview](https://multicoin.capital/2018/01/17/an-overview-of-stablecoins/) from Multicoin.

A lot of the creators that we spoke to were worried about the use of fluctuating currencies. If the price went down, they would lose some of their revenues, and if it went up, they were rightfully worried that their customers may not end up buying keys from them... as they could be waiting for appreciation of their tokens.

We believe that many locks will end up being priced using stable coins, which is why our dashboard UI will let creators pick DAI as the currency<sup>1</sup>.

## Bringing utility to utility coins!

We also strongly believe that many ERC20 currencies are "community" currencies. Their value is rooted in the fact that it is a very specific use. For example, MKR is a governance token which lets owners of it vote on changes in the Maker systems.

Now, nothing says that the MKR tokens, which are actively traded on several exchanges could not be used for other purposes, such as purchasing access keys. For example, Maker could organize a launch party for their upcoming multi-collateral currency where tickets are sold using MKR. For this, they could use Unlock's [ticket application](https://tickets.unlock-protocol.com/)...

## Get started today

Head out to the [creator dashboard](https://unlock-protocol.com/) now and click on the _Create Lock_ Button:

![Create a Lock](/images/blog/erc20-locks/create-lock.png)

Then, select DAI as the currency when picking up a price:

![Create a Lock](/images/blog/erc20-locks/select-dai.png)

Choose how much you want to charge (you can still change that later, but not the currency...). And hit submit. Once that transaction has been mined, your lock has been deployed!

Once you have embedded the lock on your page, your readers are offered the ability to Unlock it:

![A DAI lock](/images/blog/erc20-locks/dai-lock.png)

When clicking on it, they are required to approve 2 transactions (the ERC20 could be a bit simpler... but we have ideas on how to solve that!):

1. They need to approve the lock to withdraw some of their DAI (just the amount for the key purchase!):

![Approve the ERC20 transfer](/images/blog/erc20-locks/approve-withdraw-erc20.png)

2. Actually purchase the key (the lock contract will withdraw the right ERC20 balance):

![Purchasing the key](/images/blog/erc20-locks/purchase-key.png)

Once the transaction as been confirmed, the customer will receive their non fungible token!

We're very excited about this release, because it opens the door to several other releases in the next coming weeks! Stay tuned ;)

<sup>1</sup> Reach out if you need to deploy a lock using another ERC20 of your choice: we can help, even if we wanted to keep our UI minimalistic.


A lot of the creators that we spoke with were concerned by the volatile nature of Ether when using it to price their keys: we needed to support stable coins. The ERC20 standard is a way to create tokens which are all compatible, even though they may have different implementations.

Creators can chose any Ethereum based token when they sell keys to their locks.

Introducing ERC20 Locks

<p><img src="/images/blog/erc20-locks/use-dai.jpg" alt="Dashboard Lock"></p>
<p>When creators deploy their locks using our dashboard, they can chose the following:</p>
<ul>
<li>the name of their locks</li>
<li>how long each key is valid (from seconds to centuries!)</li>
<li>how many keys they are selling (with the ability to sell an unlimited amount)</li>
<li>and more importantly, the price of keys</li>
</ul>
<p>Up until today, the price of the keys had to be in Ether. Today, we're happy to announce that we now support any ERC20 token as the currency for the price. As a creator you can now sell access to your content or features inside of your (d)applications using BNB, MKR or even BAT...</p>
<h2>Using stable coins</h2>
<p>Out of ERC20 tokens, there is a category of tokens which is special: stable coins. These tokens have a value that is designed to be stable, most often against US dollars. Some of them are actually backed by financial organizations who guarantee a 1 to 1 exchange (such as USDC for example), while others are based on onchain collaterals (DAI is a good example of that!), while finally, a 3rd category is based on seigniorage: the supply expands and retracts based on price fluctuations. Learn more about stable coins with <a href="https://multicoin.capital/2018/01/17/an-overview-of-stablecoins/">this overview</a> from Multicoin.</p>
<p>A lot of the creators that we spoke to were worried about the use of fluctuating currencies. If the price went down, they would lose some of their revenues, and if it went up, they were rightfully worried that their customers may not end up buying keys from them... as they could be waiting for appreciation of their tokens.</p>
<p>We believe that many locks will end up being priced using stable coins, which is why our dashboard UI will let creators pick DAI as the currency<sup>1</sup>.</p>
<h2>Bringing utility to utility coins!</h2>
<p>We also strongly believe that many ERC20 currencies are "community" currencies. Their value is rooted in the fact that it is a very specific use. For example, MKR is a governance token which lets owners of it vote on changes in the Maker systems.</p>
<p>Now, nothing says that the MKR tokens, which are actively traded on several exchanges could not be used for other purposes, such as purchasing access keys. For example, Maker could organize a launch party for their upcoming multi-collateral currency where tickets are sold using MKR. For this, they could use Unlock's <a href="https://tickets.unlock-protocol.com/">ticket application</a>...</p>
<h2>Get started today</h2>
<p>Head out to the <a href="https://unlock-protocol.com/">creator dashboard</a> now and click on the <em>Create Lock</em> Button:</p>
<p><img src="/images/blog/erc20-locks/create-lock.png" alt="Create a Lock"></p>
<p>Then, select DAI as the currency when picking up a price:</p>
<p><img src="/images/blog/erc20-locks/select-dai.png" alt="Create a Lock"></p>
<p>Choose how much you want to charge (you can still change that later, but not the currency...). And hit submit. Once that transaction has been mined, your lock has been deployed!</p>
<p>Once you have embedded the lock on your page, your readers are offered the ability to Unlock it:</p>
<p><img src="/images/blog/erc20-locks/dai-lock.png" alt="A DAI lock"></p>
<p>When clicking on it, they are required to approve 2 transactions (the ERC20 could be a bit simpler... but we have ideas on how to solve that!):</p>
<ol>
<li>They need to approve the lock to withdraw some of their DAI (just the amount for the key purchase!):</li>
</ol>
<p><img src="/images/blog/erc20-locks/approve-withdraw-erc20.png" alt="Approve the ERC20 transfer"></p>
<ol start="2">
<li>Actually purchase the key (the lock contract will withdraw the right ERC20 balance):</li>
</ol>
<p><img src="/images/blog/erc20-locks/purchase-key.png" alt="Purchasing the key"></p>
<p>Once the transaction as been confirmed, the customer will receive their non fungible token!</p>
<p>We're very excited about this release, because it opens the door to several other releases in the next coming weeks! Stay tuned ;)</p>
<p><sup>1</sup> Reach out if you need to deploy a lock using another ERC20 of your choice: we can help, even if we wanted to keep our UI minimalistic.</p>



![Use one Unlock lock for a variety of services and products.](/images/blog/multiuselocks/hero.jpg)

One incredibly powerful thing about using Unlock is that one key can access anything that's behind a lock it has access to. That means you can place the same lock in multiple places or even use it for different purposes (as we did) and let a user who as that one key access everything. So what did we do?

![The NFT Dev Meetup ticket page.](/images/blog/multiuselocks/nft-ticket-page.jpg)

We sold tickets to the NFT Dev Meetup during NYC Blockchain Week through [our ticket app](https://tickets.unlock-protocol.com/event/0x5865Ff2CBd045Ef1cfE19739df19E83B32b783b4) (still in beta) and then allowed ticket holders to also access [the livestream of the event](https://unlock-protocol.com/blog/nft-dev-meetup/).

Without Unlock, complicated. With Unlock piece of cake.

We created a lock on the Unlock dashboard …

![The NFT events lock on the dashboard.](/images/blog/multiuselocks/nft-lock-dashboard.jpg)

We used that lock to create a ticket page …

![Creating an event page with the lock.](/images/blog/multiuselocks/nft-event-creation.jpg)

… and then used the embed code from that same lock on [the event blog post](https://unlock-protocol.com/blog/nft-dev-meetup/).

![The lock's embed code.](/images/blog/multiuselocks/nft-lock-embed.jpg)

Checkout the [tickets page](https://tickets.unlock-protocol.com/event/0x5865Ff2CBd045Ef1cfE19739df19E83B32b783b4) and [the locked blog post](https://unlock-protocol.com/blog/nft-dev-meetup/) with the event video. Want to really try it out? You can still buy a ticket to unlock the video (disclaimer: the sound isn’t great – and it mostly serves as proof of concept for locking the page).

Want to do this for your event or content? [We’re all ears!](mailto:hello@unlock-protocol.com)


Find out how a single key together with your wallet can unlock anything from tickets to content.

One key can serve many purposes

Multi Use Locks

<p><img src="/images/blog/multiuselocks/hero.jpg" alt="Use one Unlock lock for a variety of services and products."></p>
<p>One incredibly powerful thing about using Unlock is that one key can access anything that's behind a lock it has access to. That means you can place the same lock in multiple places or even use it for different purposes (as we did) and let a user who as that one key access everything. So what did we do?</p>
<p><img src="/images/blog/multiuselocks/nft-ticket-page.jpg" alt="The NFT Dev Meetup ticket page."></p>
<p>We sold tickets to the NFT Dev Meetup during NYC Blockchain Week through <a href="https://tickets.unlock-protocol.com/event/0x5865Ff2CBd045Ef1cfE19739df19E83B32b783b4">our ticket app</a> (still in beta) and then allowed ticket holders to also access <a href="https://unlock-protocol.com/blog/nft-dev-meetup/">the livestream of the event</a>.</p>
<p>Without Unlock, complicated. With Unlock piece of cake.</p>
<p>We created a lock on the Unlock dashboard …</p>
<p><img src="/images/blog/multiuselocks/nft-lock-dashboard.jpg" alt="The NFT events lock on the dashboard."></p>
<p>We used that lock to create a ticket page …</p>
<p><img src="/images/blog/multiuselocks/nft-event-creation.jpg" alt="Creating an event page with the lock."></p>
<p>… and then used the embed code from that same lock on <a href="https://unlock-protocol.com/blog/nft-dev-meetup/">the event blog post</a>.</p>
<p><img src="/images/blog/multiuselocks/nft-lock-embed.jpg" alt="The lock&#x27;s embed code."></p>
<p>Checkout the <a href="https://tickets.unlock-protocol.com/event/0x5865Ff2CBd045Ef1cfE19739df19E83B32b783b4">tickets page</a> and <a href="https://unlock-protocol.com/blog/nft-dev-meetup/">the locked blog post</a> with the event video. Want to really try it out? You can still buy a ticket to unlock the video (disclaimer: the sound isn’t great – and it mostly serves as proof of concept for locking the page).</p>
<p>Want to do this for your event or content? <a href="mailto:hello@unlock-protocol.com">We’re all ears!</a></p>
