Push Protocol 🛠 How to build Web3 Messaging & Notifications Apps

[Music] hey everyone uh this is H from push protocol uh Project Lead and founder uh today we are going to talk about how you can build web messaging and notification apps or how you can build your dabs using web3 messaging and notification but why is it important well just think about it what's the first thing that you do in the morning you take your phone out and you see all the notification from all the web2 apps that you have whether it's email whether it's Discord whether it's Twitter whether it's any gaming all of them they send you notification telling you something has uh something important for you has occurred and what you want to do and that is how web web2 operates and that is how web2 scales up in the ux uh but yeah when you come to web3 Notifications was not there and that was why push was created to enable web3 apps and enable web3 contracts to send notification out to you along with other form of communication like chat and video and so all so how do we do it well we do it by making sure that push becomes this decentralized communication middleware using which any protocol can send any communication whether onchain or offchain uh including notifications that are then tied to your wallet address and because push is a open and secure network now any crypto wallet such as metamask can tap into this network and can show these notifications out to you uh why push web3 notifications we'll just think about it your protocol is a smart contract or it's a web backend and your usernames are wallet addresses therefore it makes so much sense to send a re-engagement notice to them when let's say someone's ens expires or a defi loan is about to be liquidated and so much more more and that's why push notifications we are very happy to announce that from when we started notification to now we have become the market leaders in that and because of that we spoke to a lot of Partners and then they said that apart from just sending notification out they wanted to know the preference for the users and that's why we have notification settings and we'll have the workshop to look into it I'll just briefly touch upon the next step in push notifications which is push chat basically notifications enables re-engagement for your app and chat enables socializing in your tab or at the worst case scenario making sure that you have a support chat wherein the wallet address that's interacting with your protocol can have a direct line of connection in case something goes wrong so push chart it basically enables a lot of cool things some uh some of them are group chat uh including token Gator chart that is something that is not done in web3 uh or not done in any messaging platform uh other things is of course support chat you can also use it to negotiate nfts and so much more again gated group chat is something that we are going to go into gated group chart is really interesting because what it can do is it allows you to create on your front end a way for wallets to come and interact based on gated condition such as if they have 30 Matic or if they have let's say one e only then they can join your group uh if they have 10 e or 40 pops only then they can talk uh this is extended to push spaces as well which is kind of like Twitter spaces where you can token gate uh the entire conversation but for this demo we are just going to stick with notification and chart just a little about how push has terraformed the entire B3 from then to now which is 2022 now we have sent over 55 million notification to over 150,000 subscribers and have 650 plus Integrations including the likes of unisab uh polygon Unstoppable getcoin de Central land and so much more uh one more thing guys like we started from E Global 2020 as a hacker so we are really looking forward for some of the really neat and cool creative innovations that you guys will do today all right so onto the demo let me just go and start the demo with I app so let's just go to staging do.org you can go to app. p.org for mainnet apps but because this is a staging we'll go over here we'll sign in and the very first thing that you see for notifications are channels so what are channels well channels are your protocol that have activated themselves on our protocol why do we need channels well because this is a web tree interoperable Network you will have many protocol sending notifications out and we wanted to make sure that the user has this in as anti-spam way as possible so when your protocol creates a channel after that if a user logs in to our appap or to your front end because this is happening on the protocol they basically see this optin button which essentially allows them to opt in to a channel once they have opted in only then the channel can send a notification out and once you have opted in uh that's about it you as a user are all ready to uh see the notification out but how do you uh send a notification so this wallet address I've already created a channel but to create a channel all you have to do is go to push. org slocs scroll down go to Notifications and over here in the tutorial you can see how to create your channel it's very easy takes 5 minutes and it's a onetime process once done your channel is ready and once your channel is ready you can send notification out so for this demo I also have created another user on Firefox and what I've done is I've opted into this hackathon channel but yeah let me opt out and refresh and let me back in because as I said we also have notifications so once you have your channel if you want to add not uh notification settings you just have to go to manage settings and you can do settings like range and announcement and so on so going back okay hopefully it loads up yeah so so I have this channel I opt in because I have these settings I can also turn it on and off so let's say I want my loan Health notification when it's at 105 I don't want announcement and that's it I do opt in and I'm all good to receive notification so how do I send it out manually if I have to I'll just go to the tab go to send notification you can choose what type toast is sending to every user of your channel Target is sending to just one subset is sending uh to a particular batch so and then you can type in your message but notification doesn't have to be just title and message uh it can be so much more uh for example I can also have a media URL I already have a cat selfie over here so I'll just put in I'll see the preview uh I can also set what notification setting I'm uh sending uh and if I do that then basically if the user has opted into that setting only then the notification will go with default it will go to Every user so once that's done I'll just gasless Le sign it and that's done because it's a broadcast we get a notification over here as well as we get a notification over here uh I had sent a notification earlier that that's why you seen two cats but not only that you also get a notification on metamask because we have metamask X push snap uh of course this is listening to production so you see notification from the channel that I've opted in uh and you also get a notification on the extension on Unstoppable and all the wallets that have already integrated us so yeah that's how easy it is to send a notification manually but we don't know what to do manually we want to do it uh via API right so again best way to do it go to push.

or/ Dos go to notification there are two ways by which you can play around one is you can play around on the docks itself so for example we have this live editor which has our SDK loaded in and you can just play around with this for example this is fetching all the notification by using uh a notification. list API and uh all I do is Fitch notification over here sign and it will Fitch my notifications uh same thing I can also stream notification this other example tells me how to stream the notification out I can just click trigger notification over here and it will trigger it out so that's one way but other cool way by which you can do it is by going to our push SDK uh you can go to playground uh and it will tell you how to download and how to set it up but going to our push SDK and then going to packages and examples and you have all the examples about all the things that you can you will need over here but let's go to boiler plate uh for once let's go to code I've already added uh uh my uh wallet address over here or the private key of the channel it's doged but yeah how to send it out first thing I'll create a user so it's user Alice I'll just do AIT uh I've imported push API and constants from push protocol rest API so push API do initialize I'll pass in the signer and uh the constant. environment. staging best way like whenever you are doing either notification or chat you have to initialize the user first so best way just do a copy and paste so I I'll just do that one signer is there and user addys is there now I just want to make sure that I know the signer address so I'll just do this and uh yeah I'll just do yeah and start and the address is here okay to now let's say I wanted to get my subscribers so how do I do this I do cons sub equals to await uh user Alice which is what we have initialized then Channel dot uh sry user Alice channel. subscribers this will fetch me all my subscriber but I wanted to pass some option so I want just page one I yes page one is there uh limit I want that to be 20 and I also want user settings to be delivered to me so that uh I know what settings have been opted in by what users and I can respond accordingly and I'll do console.

log subs and it will take a second and you'll get all the subscriber setting but yeah what about if I want to send a message out it's just as easy as again going to docs uh I'll go to send notification you can send notification by a smart contract as well uh you can check that out but for this we'll just uh uh stick to sending notification from here so when we are doing send asri that's broadcast uh but this time around I just want this to be targeted so I'll do I'll just add one wallet address over here and I'll do channel. send uh I'll pass title and body and uh yeah that's about it you can already see the notification is delivered so that's easy that's as easy as it gets to get the notification set up and running and if you want an advanced version you can just go through the options uh very quickly we can also touch on chat so chart is even easier again best way go to push. or/ docs go to chat so as I said like the least you can do to make sure that your user experience improves is to have support set right and what we have done is while you can of course build everything out on your own because you have again initialized user and all the API calls but what you can do is also go to UI components and uh it's just a on line code for UI components uh AP unless you want to themiz it so all you need to do is uh import UI web and get this component uh added in your front end and once you do that you will see the chart over here and you can just chat automatically now over here we have passed in the wallet of our AI bot so if I just start chatting with uh it it should reply back very soon so yeah that's as easy as it gets to get the support chart going even for push chart is the same thing just two lines of code and I spoke about token gating right so let's say I wanted to create our token gated community so one thing you can do uh very fast is you can go either over here and get the rules or you can just go to chat create a group name the group out and you can add all all your conditions that you want whether you want token gated nft or custom gated you can do that you can gate on Entry as well as conditions on if they can send a message or not once you are done with it what you'll get is this chat ID uh let me just open uh group out so let me go to push. orbb so we have this token gated group created over here so go to group info you will get the chat ID and all you have to do is pass that chat ID uh right in the component so for example over here this is the chart ID of mar but now if I change it to BRB chat it will load BRB chat so it it's as easy as that if you want to send a message out let's say via chat over here all you have to do is chat. send content hello Bob and once you do that that in the fir Fox if I sign this message outed yeah I'll see the message uh charts again are uh anti spam which means chat land on the request app you have to accept it out uh you can do it from the CK or from the front end that's your call uh but yeah that's how easy it is to integrate push into your apps uh I do have some time for questions two and a half minutes so yeah any questions all right so no questions again uh because I have two minutes I can probably uh retouch on things go to push.

or/ Dos that's the best way to start everything that you do will start from initialized user all the API calls are there if you want more help the best thing you can do is get the push SDK out like clone the push SDK and go to packages and example and you have all the example including toen gated chart including automated chart and chart stream you can just go over there and uh do a yarn start and it will basically uh tell you how everything is getting done and you can go to code for each of the example and you will have the code of how everything is done uh even streaming and everything else all right hope you enjoyed uh the presentation thank you guys uh if you want just uh uh scan our Discord link or our push talk or you can also go to our live Workshop which has everything in detail and uh yeah awesome also we have cheat sheets uh which basically is a summarized form of everything you can find our team uh sitting at the back wearing pink cotton candy pink uh yeah just take a cheat cheet out and uh we are at the booth to help you guys Happy hacking