Unlock 🛠 Integrating Memberships Into Your Project with Unlock Protocol - Julien Genestoux

foreign [Applause] [Music] ER at unlock protocol and basically I'm going to show you how to easily integrate memberships into your projects uh with unlock protocol um first of all what is unlock protocol so unlock protocol is a protocol it's a system that creates memberships and sell access nfts membership cards if you want in minutes and you can do that from your website directly it's useful for membership subscriptions you know media subscriptions ticketing to events token getting SAS and more it is obviously open source Community govern by a community of people that are built and are using unlock there's a bunch of applications libraries and developer tools that we've built or that the community has built and uses these days it was funded in 2018 by me I mean it's kind of a bit weird to sing things to say but I previously was a founder of a company that was sold to medium the publishing platform um and the whole team has a lot of different experience from companies like Google Facebook GoDaddy and a bunch of others as well as more importantly than anything else a global community of people that are using it what others have built with unlock already uh even ticketing so for example a bunch of hackathons have used unlock for the ticketing to the hackathon East varsha and varsity uh in Russia so I used it uh subscriptions uh to media sites there's a couple funny sites that you can uh access by having an nft in your wallet and it's automatically recurring to access video software podcast and many others uh time membership time based membership for clubs or Dows there's people that use this where you know every month every quarter people have to pay to keep being a member of the club which is pretty cool certification so it's kind of the idea of an ft that expires is useful for certifying that somebody has gone through you know validation of what they've learned your driving license if you're from the US expires every five years it is something that is an nft that expires and could be used in that example and we've also seen people build digital collectible um nft pfp using unlock because the time time aspect of the nft is actually very useful to do for example dynamic nfts there is a pretty large custom of people that are using or that are integrating unlock in many different ways I'm not going to name all of the logos here but just so you know we're also deploying on eight different evm networks from mainnet obviously to polygon optimism cello Avalanche arbitrum etc etc there's also a lot of different developer tools that make it easy to use unlock so for example today we announced an integration with third web which you already know of it's a it's a SDK for building web 3 applications we also integrated with the graph as you've seen in the previous presentation etc etc there's also plugins for WordPress for different cms's so you can easily add memberships uh to these kind of websites so that's uh again I'm not going to name everything here but there's a pretty large set of integration so let's talk about nft holders as the new membership model um we've seen nfts as pfp as Collectibles obviously that has emerge just so you know unlock has been doing nfts way before nfts were cool uh since 2018 uh we've been actually building stuff with nfts because I do think that nft as a primitive is a lot more than just a virtual digital image of a you know of a monkey or something else it's actually a a new primitive for the internet in the same way that the domain name or a website are Primitives for the internet website can be anything I do think nfts can be anything in the same way so the question is like well any nft could be a membership in theory yes but in practice not really and the reason for this is because most nfts for example are not expiring there forever so if you have an nft that gives you access to a website then that means that the website has sold that nft once and then they need to provide you know services or content forever they're actually not making any more Revenue even though they sold the nft just once and that is not an ideal model there's a ton of other reason why base nfts erc721s are not good enough but it's actually pretty easy to add stuff to the base erc721 and this is actually what we've done at unlock so why not any nft so first of all you go from something that is Perpetual like a board ape is something that you have in your wallet forever it doesn't change to something that is time bound and as a Creator you want to actually have the idea of recurring Revenue being able to charge your users once a quarter once a month once a minute doesn't make a lot of sense but that's something that you might want to build when you do this you go from a one-time payment again at the mint to a recurring payment something that is allows your business to kind of Thrive for the longer term rather than just by doing uh one thing it moves away from the idea of royalties uh royalty Revenue are actually very inconsistent they're hard to predict obviously and they're also philosophically speaking not really good because it means that the only way you can make money is if your fans churn if they keep selling your nfts that's how you make money which doesn't make a lot of sense you actually want very loyal all fans that are sticking around not people that are just hopping to the next project from from every time to actually um so you can make money we've also built uh what we call Web 2.5 the way for people that don't have crypto wallets to actually use membership nfts so we have a credit card Gateway that actually supports Apple pay Google pay and credit cards uh right out of the box for non-crypto users you create an account email password and it just works they also get an NFC which is really really interesting in that scenario we also also move from an off-chain access verification which is uh what you know these other nft might have where there's like okay we'll just have you know New Seasons every year and we'll change how the application work to an Unchained verification where on chain the nft is marked as expired which means that your application doesn't have to change every year to support a new nft or something else obviously you moved from a model where they're all transferable to something where the transfer itself is programmable you can decide that yes the nfts can be transferred or no they cannot be transferred but everything in the middle is also possible they can be transferred if x y and z and that's actually very useful for a lot of memberships you may say oh the nft is transferable if that user has had it for a year or for six months something like this you also have the concept of for example cancellations a lot of memberships are considerable my Netflix account I can cancel it and so that's something that the contract supports natively as well and removable also away from the idea that the contract is added is forever to something that is upgradable that can be changed and evolved over time to actually support the membership use case of an organization at some point you know Netflix is beginning more expensive or at some point it moves from a week long to a month longboard that kind of change can happen for every Creator as they as they grow so basically um if you're thinking about adding any kind of membership or monetization to your application to your projects here doing the hackathon well unlock is a solution for this here's a couple of ideas of how you could use unlock you don't have to do any of these and there's actually a lot more I was actually just thinking about another idea in the previous conversation I'll tell you about this so as a Creator you can use the unlock dashboard we've built a web a web UI a pretty simple dashboard to deploy your membership contract and then configure a WordPress site with a you know a plugin to just token gate content so that only people that have the nft in their body can actually access the content inside of a WordPress site no code required it's just you know no code tools UI you copy paste a bunch of things here and there and it just works you can also create sell and verify tickets as nfts we've also built a system that you can use to scan QR code with a phone that verify that an nft is actually indeed a valid ticket for an event you can enable credit card to you know get more revenue for non-crypto users as well as and this is a new feature that we introduced last week build what you call checkout URL so basically URL that you can build and then share with your friend and so that they buy your nft that don't have to go to like openc or a specific platform you can literally send them a link say hey click here and that's how you're going to buy my one of my nft memberships so far so good as a developer and I hope that's probably going to be more applicable to most people here you can directly tokengate this another smart contract you can say okay let's say I have this uh lending protocol and I want to allow only people that have a specific membership to provide capital or to borrow Capital uh from this and that membership might be a certification of hey you've gone through a D5 class you know how D5 behaves or works now you can borrow money you can token get features into your application themselves either on the backend or the front end as a way to monetize this you probably all use mobile phones on which there is in-app purchases that's a way to do in-app purchase in a decentralized way your application can just limit access to some features and then users can buy you know access to these features directly into your application actually we're going to go uh quickly in a couple minutes build an application that does this you can also help creators users of your application monetize their content so that monetization doesn't have to be for your application but let's say you build a blogging platform you might say okay cool I want to allow the people that are blogging on my platform to monetize their content by deploying their own membership contract directly from your platform make sense um here are a couple inspiration uh so life here another sponsor here is doing a video streaming protocol you can for example do a token game in video streaming so maybe this here somebody might be recording and say hey only the people that have a ticket to the hackathon can watch the stream and you can do that very easily with unlock and live here similarly you can unlock with lens to create uh you know paid subscription on social networks there's been a bunch of debates over the last few days I'm sure you've seen around Twitter charging a dollar uh for their thing you can build something like that it doesn't have to be a dollar it could be one dollar for a month or something like this using unlock and lens very easily you can also integrate with xmtp which is a messaging protocol to have a wage for a Creator to send messages just to their fans using xmtp in that example you can use unlock and midpoint to do paid subscription to access an endpoint in an API we just had the the graph presentation I don't know if most of you were here but you can also for example build uh a graph endpoint that instead of users paying you know per request they would have a subscription that allows them to do kind of unlimited access to the endpoint for a day a week a month uh using that kind of system so building kind of SAS business models um with nfts and memberships other kind of inspiration you can create an nft lending platform uh where you would leverage two of the features that uh our smart contract offer which is the idea of lending and unlending nfts we've actually decoupled ownership from transfer rights in the contract so you can own an nft for which you don't have the transfer rights and so that's a good way to lend something so I I'll transfer it to you I keep the transfer right now you own it but then if I want it back I can because I have to transfer so I lend it and then I can take it back you can create a subscription membership management tool for a subscriber that could easily upgrade or cancel their memberships or even sell to someone else on the security market so imagine a security Market of Netflix accounts or Spotify accounts for example uh you can create wrappers around our contract so for example you can enable voting on a Dao based on who has a membership for example using tally which is a pretty cool tool for these kind of things of course a lot more ideas are possible feel free to join us on Discord or our booth to discuss any idea that you have we're more than happy to guide you in the right direction when it comes to looking at these things let's actually go ahead and do a bit of live coding here so um and obviously that's a bit risky if you want to scan this you'll end up on the on the on the code repo but let me know when when you've all scanned the thing but basically I built and you'll see this in a second a very very basic weather application so you put a zip code and it gives you the weather in that in that in that in that in that location um you'll see the repo here feel free to check it out and then I'm actually going to go ahead and load the application so the application is already created it's a pretty simple react application you're pretty familiar with that idea but um there is a an index page uh to which we load a weather component and the weather component itself has a little call to retrieve the weather using an API that's public and basically we'll show the weather uh in here there's a button to save my location in the app and that is the feature that we wanted to create let's actually use the app a couple seconds so you understand exactly how this works but it's again a very basic application and you've seen these all over the place here so I'm just going to load this in my web browser um and so again very basic application I put a zip code I'm going to put the one in New York because I I know that when I live there currently it's apparently uh it's night it's the moon uh and and uh it's a it's a good weather let me actually do I I'm on the wrong Branch here so I'm going to just move to the master Branch first uh no it's the main branch sorry and then I'm going to do this again so refresh so putting the ZIP code call learning the weather now there's as you can see there's a button to remember my location that button will save my preference so that when I refresh the page if I refresh here there's nothing but when I refresh the French if I save the location then it will show the weather in my location and we want to make this feature a premium feature a feature that's only accessible for our paying members does that make sense so I'll do it again I mean somebody anybody who knows another zip code I don't know I'll just okay uh Mexico it's you know nights and a bit a bit cloudy right now let's remember that location now it's saved uh that feature is not to get it so if I refresh it is there what we want to do is token get the features so that only people that are paying members can actually do this so building kind of an in-app purchase experience so let's actually go back uh to the code here uh you see we have the save button and that's where most of the logic is going to happen here I'm going to switch to the other Branch so I can I can comment the code rather than actually write it down uh write it as I speak because I'm going to mess it up otherwise uh so I've got an unlock branch and you'll see in the repo that this branch is available for everyone and in that we still have the save button but the save button has a little bit more information so first of all it includes a hook a react who can I assume some of you know about react but it's a way to kind of trigger events um on the page and that react hook will basically just implement the unlock protocol um calls to the blockchain to ensure that the user has um um a valid membership the first step is like we configured this hook uh and we just basically sorry uh when we configure the hook we pass a couple things so we pass a title uh we'll see how it's used on the checkout UI and then we pass what we call Locks which are the smart contracts that provide the membership as uh options here and there I passed this one because this one that I created earlier I'll show you how you can deploy your own contract obviously afterwards and it's on the network number five which is girly in the test net as I said we're on mainnet polygon optimism nurses chain arbitrum cello Avalanche binance chain I didn't forget any anyone so basically we're just configuring The Hook and the hook now yields uh a lot of different uh functions so first it yields a loading um status that we can use to check whether the application is active loading or or this then it checks to it it yells two function one of them is checkout it's a function that we can call to prompt the user to go purchase a membership in Ft another one is called authenticate which is the one that users will click on to connect their wallet to the application um then is authorize which is a Boolean to know if the user actually has access or should have access and then user which is the address of the user does that make sense so that really is uh the bulk of what we're looking for here and then basically we have a couple conditions the first one is like if we don't have the user well what are we going to do we're going to ask the user to authenticate uh to save uh their zip code so if they're not authenticated we can't really check whether they actually have a valid membership so the first step is to ask them to authenticate so far so good once they're authenticated we'll actually get a Boolean that tells us whether they're authorized or not if they're not authorized well we'll tell them you need to buy premium to actually be able to save uh sorry to save your uh your location as part of that application and then hopefully at that point if they're both authenticated and authorized while in that scenario we'll actually show them the option to save the ZIP code make sense cool and that's pretty much it so I'm just going to start the app and I'm going to refresh here and at this point I cannot authenticate to save that I cannot save because I'm not authenticated so if I you know go in New York City one one two one seven sorry I can't say because I'd rather than get it so what I'm going to click on is this button to authenticate here we're doing something that is very you know familiar with it's called sign in with theorem you've done this it's basically connecting your wallet to an application here obviously I'm using metamask as my wallet but we support on that UI a lot of different options including wallet connect or coinbase wallet and even something that is unlock accounts I'm not going to go into details here but it's the idea that if your non-crypto user can set up an account with unlock it's an email and password and at that point you'll be able to pay for the membership your query card let's actually go back to metamask you see this thing here and I'm going to click this button to sign in with VM at that point you're pretty familiar with that flow I'm going to sign a message saying hey I authorized this website to know my address um and so I'm just going to sign this message and now the website knows my address you can see here uh that the website knows my address because it was called back with this long query string and the application actually is able to handle this um we're still in the old Cabo San Luca but if I 11217 I can now click on remember location because I have the membership already and so now I have access to this let's actually go look at the unlock dashboard so I can show you here oh sorry it was there I just refresh for nothing uh yep the my weather in-app purchase membership um is a new contract that I deployed and I'm just going to copy that address and put that into the configuration of that of that contract interesting I I have a bank here because I had this here and I should be able to save because I don't have the membership I shouldn't have the membership let's actually check this uh these authorizes false which is interesting because if I put something else it lets me save it uh remember location yet let's even though it's not authorized so I clearly have a bug in my application here uh if not it authorized purchase premium why isn't it just [Music] um did someone see the bug I'm sure there's a stupid thing here oh that's exactly right I'm missing the return statement thank you yes thank you very much so let's actually go back okay now it well now I can't save uh I need to actually purchase the membership thank you for your for your vigilance here so I'm going to click this button and now we're going to show this checkout UI this checkout UI has been pre-configured uh with the smart contract headers that I put in I could have added multiple contracts multiple addresses as you see I've configured to show my weather app the icon is customizable I haven't done this year for the sake of the demo but I'm actually going to go ahead and now purchase the nft so I'm going to click on next I can pick the recipient here I'm purchasing from me but I could purchase that nft for somebody else to give them access if they wanted to the to the application click on next again payment method I'm going to pay with crypto in that example obviously if credit card had been enabled there would have been an option here I'm going to select paper crypto at that point I see a final confirmation scheme that says hey it's going to be 0.01001 East which is roughly two dollars and I'm just going to pay with crypto at this point metamask [Music] there is a bug here again it worked an hour ago it's pretty annoying but anyway so I should be able to buy this membership let's actually try um I'm confused here about why this didn't work let's actually try this one I'm gonna I'm gonna switch uh contract here and then just go back to the application and obviously you don't have the membership for that one so I'm going to purchase this one I guess I messed up in my contract setup damn it next nope we have a little bug here so I'm gonna have to fix this and see what's going on in my application but basically uh you get the idea I would be able to purchase the membership nft then the membership nft would be in my wallet and at that point I would be able to access the application because the ease authorized Boolean this time would be would be set to true does that make sense even though there's a couple bugs any questions yes you can make the price Dynamic so you can either change it so actually I should show you this um let's actually go here so this page that I'm showing here is what we call the dashboard it's a place where as a Creator I can see all of the membership contract that I've created and update them so yes I can first change it to be anything I want I need to authenticate here so I'm going to authenticate so I can change the price to be anything that I want here so I can click on this button and by the way what's interesting is I can pick the currency here I'm picking eth on Gertie but I could have chosen you know usdc or any erc20 GRT tokens or any kind of currency that I would want so for example if I got a social coin in my community I can use that social coin as the base currency for my purchases um here I'm going to keep to ease and I can change the price every time I can also make the price Dynamic using what we call hooks so the smart contract itself has the concept of hooks that can be used to change how the contract behaves in specific context so you can say okay if it's 2 pm the price is this much if it's 5 PM is that much so that's the kind of thing that you can do easily yes so the contract itself doesn't have an owner it has what we call managers and can have an unlimited number of managers as well as they can renounce themself so I can deploy a contract and then transfer it to you by just making you a manager and then revoking that role for myself is there more questions all right let's go back to the presentation um so we're obviously sponsoring the hackathon uh there are a couple prices um for the most inventive use of unlock protocol so be creative and wild uh first prize is two thousand dollar uh in uh unlocked governance token uh second price is uh one thousand five hundred and the third price is 500 um so again be creative I'm going to be one of the judges tomorrow uh we also have a team that's here to help so I'm here Angela is on our booth uh right over there uh Chris is in the back here Patrick in the back as well we also have Kelly du and Shelley where oh in the back yes over there so everybody's here uh feel free to come ask us any question you have we're all easily identifiable with unlock hoodies or t-shirts uh finally you can go check a bunch of walkthroughs and tutorials that we have on the website we have a pretty active YouTube channel where you can find a lot of different tutorials and guides so feel free to scan this one we also have obviously a pretty extensive documentation uh the text version of the YouTube content feel free to scan that one as well as I said we're intuiting with a lot of different developer tools if you use ethers for your you know managing your contract with JavaScript we have obviously a little tutorial on how to do this easily and how to deploy contract or purchase memberships from ethers finally we have guides for creators that show them how to do a lot of different things and use integration in no code way again you can scan that one so for example you can token get a calendar with cal.com you can token get a video meeting with huddles you're on you can use WordPress as I said earlier you can integrate this with Guild XYZ there's actually a native integration there you can customize how the membership look on openc etc etc etc we're also available on Discord for help we have actually a couple more team members that are away from San Francisco that can help you at 5am when everybody else is asleep feel free to join uh Discord discord.unlockprotocol.

com when you go there you will actually get the chance to purchase uh I mean purchase a free one but get your first unlocked membership to unlock access to the Discord channel that gives you another idea of what kind of Integrations you can do here um and that's it