General usage
SignIn/SignOut
Account balance
Account details
All access keys
Account state
Contract Method
Send token
Create Account
Delete Account
Webflow plugins tutorials for NEAR protocol in your projects
In this brief overview you will learn general information about using plagins and how you can use them in your projects
▸ Why is it needed?
First of all, it may well be a question - why do we need it? This is the right question because we have moved into a new era of the Internet, which today is called WEB3 - based on blockchain, which includes such concepts as decentralization and token-based economy. Web3 market is already worth trillions, and is expected to 10x by 2030. What does this mean for developers like you?
Massive opportunities, much like those of the iPhone app era and early days of Web2. Web3 needs your skills now.
If you missed the mobile and Web2 revolutions - this is your chance.
Powered by blockchain, Web3 is already more open, fair, and empowering for individual users than Web2 can ever be.
It solves the problems we face in Web2.
How?
By removing the need for trust, and by removing the need for permission.To interact with Web3 applications, all you need is a wallet. This wallet contains your private key, which is used to sign transactions. Those transactions are then checked, confirmed and processed by the blockchain. Blockchains are really just databases, but the crucial difference is they are split across thousands of different nodes, rather than centralized on a few servers. Each node holds a complete copy of all data stored on the blockchain. Once data is verified, accepted, and written to the blockchain, it cannot be altered.
This means blockchains enable secure, peer-to-peer transactions without human intermediaries.It also means anyone with a wallet can program and interact with them.
For this reason we have created the basic elements that you can use today and connect your projects with the NEAR protocol.
▸ What is NEAR?
NEAR is a decentralized application platform that makes blockchain accessible to everyday people who are excited for the future of the Open Web. A web that is more private, more secure, and puts people in control of their money, data, and identity. NEAR’s purpose is to enable community-driven innovation to benefit people around the world.
What makes NEAR special?
1. NEAR is the inevitable evolution of existing platforms
▸ Bitcoin made digital currency a reality, a global transfer of value programmed on a blockchain. Ethereum took it a step further and made it possible to create basic applications leveraging digital currency on blockchains, but has faced issues with scaling and prohibitive fees.
▸ NEAR solves these challenges and finally makes building the Open Web possible by introducing a breakthrough sharding design that creates opportunities for innovation never possible in blockchain before.
2. NEAR is made for the real world
▸ NEAR is the fastest path to market for builders to create blockchain applications that are as easy to use as they are to build. It uses common development patterns and programming languages that are immediately familiar to web developers.
▸ NEAR was built with pragmatism of a Silicon Valley tech startup by engineers who have shipped scalable solutions for the world’s leading technology companies.
▸ NEAR is secure enough for high value assets like Digital Currencies or Identities and performant enough to scale for DeFi or Gaming applications without prohibitively expensive fees or network latency.
3. NEAR is designed to be interoperable
▸ NEAR is designed to work with existing blockchain platforms and is easy for existing applications to migrate to.
▸ NEAR uses the Ethereum Virtual Machine and Web Assembly so that builders can seamlessly swap from Ethereum to NEAR (and back) on the NEAR Rainbow Bridge to leverage the performance, security, and favorable economics of NEAR without having to rebuild their applications or smart contracts.
▸ With NEAR, you don’t have to choose between NEAR and Ethereum or commit to only one blockchain. Interoperability and usability across platforms will be key to the mass adoption of blockchain.
NEAR is the first blockchain platform truly built for the real world. It is a builder's fastest path to market to create blockchain applications that are as easy to use as they are to build. Using NEAR technology you can start building your new projects in the new economy today, and the plugins that we have developed can greatly facilitate your way to WEB3.
Learn more about NEAR 🠒
▸ How the plugins work?
At the moment 7 plugins have been developed to use the basic functionality of NEAR. Further collection will be replenished as the demanded functionality is realized. Plugins are developed and can be used for Webflow, as well as for other html pages.
The plugins are created as a Code snippet that you can place on your local page. All you need to do is build the structure of the page with the elements you want to use, open the desired plugin in Plugin Builder and fill in the fields required for your task. After that all you have to do is copy the two pieces of code and paste them into your page. nteractions with Near protocol are based on NAER-API-JS library, which you can read about in details here.
To understand in more detail how to install a plugin separately, you can read in detail by selecting the plugin you are interested in. The first plugin, which is an important element for interacting with the NEAR protocol - SignIn/SignOut plugin, we recommend we recommend to start studying the tutorial with it
SignIn/SignOut Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step one - Create buttons on the page
Let's proceed from the example, you need to install on the page two buttons that will perform the functions SignIn and SignOut. Each button must be assigned two classes. One class will make the button active, the other will hide it. For the first button, which will perform the SignIn function, you need to assign a main class, which will have Display block property, and an additional class, which will have Display none property.
For the button that will be performing the SigOut function, it's necessary to assign a main class that will have the Display none property and an additional class that will have the Display block property For example, the SignIn button will have a main class active with the Display block property, and an additional class hidden with the Display none property. For the SignOut button, the main class will be hidden and an additional class will be active. After adding the classes, it is necessary to assign each button a personal ID (for example, for the SignIn button you can specify ID - login, for the SignOut button you can specify ID - logout).
For a more detailed explanation you can watch the video lesson.
▸ Step two - Building a code snippet
Once you have prepared the SignIn and SignOut buttons, added classes, you can move on to the second step - the construction of the code snippet. Go to the Plugin Builder.
Select Get codeSignIn/SigOut plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - CONTRACT NAME enter the name of Smart Contract you would like to connect the registration to. This can be your personal smart contract or any other smart contract you would like to use for your project. Click Insert.
3. In the VIEW METHODS field, enter the view methods that are specified for the contract. Specify method names in single quotes; if there is more than one method, put a comma, for example 'get', 'set'. Press Insert button.
4. In the CHANGE METHODS field enter the change methods that are specified in the contract. Specify method names in single quotes, put a comma in case there is more than one method - for example 'get', 'set'. Click Insert button.
If you want to connect a third-party contract and do not know the methods of viewing and changing the contract, you can specify them here. You need to enter the name of the contract after clicking the button you will get all the methods that belong to the requested contract.
5. In the field - BUTTON ID SIGNIN - enter the main name of the ID that you specified when you created the button in the first step (for example #login). Remember the ID name must be entered using the # sign as indicated in the example. Press the Insert button.
6. In the - BUTTON ID SIGNOUT field, enter the main ID name, that you specified when you created the button in the first step (for example #logout). Remember the name of the ID must be entered using the # sign as specified in the example. Click the Insert button.
7. In the - BUTTON ACTIVE CLASS field, enter the name of the main class that you specified when you created the button in the first step (for example, .active). Remember the name of the class must be entered using a dot in front of the name as specified in the example. Press the Insert button.
8. In the field - BUTTON HIDDEN CLASS - enter the name of the main class that you specified when you created the button in the first step (for example, .hidden). Remember the name of the class must be entered using a dot in front of the name as specified in the example. Press the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area.
After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ Video tutorial
Account Balance Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step one - Create element on the page
Based on the example that you can see here.
The first step is to create four elements on your page. This would be one button and three inputs. Place the button on the page and give it a unique ID (for example #getBalance) Remember that the ID must be specified through a special symbol # which you specify at the beginning of the name.
Next, create three input elements to which you want to assign a unique identifier. One input will be used for the Accaunt_ID input. For it, we need to put the form to which the input will be attached. The second element will be the usual div block - to display information about the total amount. The third element will also be a div block to display information about the available amount. After setting the elements and specifying the identifier, go to step 2 - Create the code snippet
▸ Step two - Building a code snippet
Once you have prepared all the elements, added classes and IDs, you can move on to the second step - building the code snippet.
Go to the Plugin Builder.
Select Get Account Balance plugin and a constructor will open, where you need to fill in all the empty fields
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - INPUT ID ACCOUNT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
3. In the TOTAL OUTPUT CLASS enter the class of the input element that will show Total balance. Remember that the class must be entered using the special symbol at the beginning of the name put a dot. Click the Insert button.
4. In the AVAILABLE OUTPUT CLASS enter the class of the input element that will show Available balance. Remember that the class must be entered using the special symbol at the beginning of the name put a dot. Click the Insert button.
5. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ Account Balance Plugin Video tutorial
Account Details Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step one - Create element on the page
Based on the example you see here.
The first step is to create three elements on your page. This would be one button and one input and a simple div block. Place the button on the page and give it a unique ID (for example, #getDetail) Remember that the ID must be specified through a special hashtag character # that you specify at the beginning of the name.
Next create an input element and assign a unique ID. This input will be used for Accaunt_ID.Create a second element regular div block which is for outputting detail information. After setting the elements and specifying the ID, go to step 2 - Create the code snippet
▸ Step two - Building a code snippet
Once you have prepared all the elements on the page added classes and IDs, you can move on to the second step - building the code snippet. Go to the Plugin Builder.
Select Get Account Details plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - TEXT AREA ID enter the ID of the output element (div block) that will output the details. Remember that the ID must be entered using a special character at the beginning of the name, enter the hashtag #. Click the Insert button.
3. In the INPUT ID ACCOUNT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
4. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ Account Details Plugin Video tutorial
All Access Keys Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step one - Create element on the page
Based on the example you see here.
The first step is to create three elements on your page. This would be one button and one input and a simple div block. Place the button on the page and give it a unique ID (for example, #getKeys) Remember that the ID must be specified through a special hashtag character # that you specify at the beginning of the name.
Next create an input element and assign a unique ID. This input will be used for Accaunt_ID.Create a second element regular div block which is for outputting information. After setting the elements and specifying the ID, go to step 2 - Create the code snippet
▸ Step two - Building a code snippet
Once you have prepared all the elements on the page added classes and IDs, you can move on to the second step - building the code snippet.. Go to the Plugin Builder.
Select Get All Access Keys plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - TEXT AREA ID enter the ID of the output element (div block) that will output the details. Remember that the ID must be entered using a special character at the beginning of the name, enter the hashtag #. Click the Insert button.
3. In the INPUT ID ACCOUNT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
4. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished!After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ All Access Keys Plugin Video tutorial
Account State Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step One - Create element on the page
Based on the example you see here.
The first step is to create three elements on your page. This would be one button and one input and a simple div block. Place the button on the page and give it a unique ID (for example, #getState) Remember that the ID must be specified through a special hashtag character # that you specify at the beginning of the name.
Next create an input element and assign a unique ID. This input will be used for Accaunt_ID.Create a second element regular div block which is for outputting information. After setting the elements and specifying the ID, go to step 2 - Create the code snippet
▸ Step Two - Building a code snippet
Once you have prepared all the elements on the page added classes and IDs, you can move on to the second step - building the code snippet.. Go to the Plugin Builder.
Select Get Account Details plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - TEXT AREA ID enter the ID of the output element (div block) that will output the details. Remember that the ID must be entered using a special character at the beginning of the name, enter the hashtag #. Click the Insert button.
3. In the INPUT ID ACCOUNT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
4. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
Select Get State Account plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - TEXT AREA ID enter the ID of the output element (div block) that will output the details. Remember that the ID must be entered using a special character at the beginning of the name, enter the hashtag #. Click the Insert button.
3. In the INPUT ID ACCOUNT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
4. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step Tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ State Account Plugin Video Tutorial
Contract Method Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step One - Create element on the page
Based on the example you see here.
The first step is to create three elements on your page. This would be one button and one input and a simple div block. Place the button on the page and give it a unique ID (for example, #getContractMethod) Remember that the ID must be specified through a special hashtag character # that you specify at the beginning of the name.
Next create an input element and assign a unique ID. This input will be used for Contract_id.Create a third element regular div block which is for outputting information. After setting the elements and specifying the ID, go to step 2 - Create the code snippet
▸ Step Two - Building a code snippet
Once you have prepared all the elements on the page added classes and IDs, you can move on to the second step - building the code snippet.. Go to the Plugin Builder.
Select Get Contract Method plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the network NEAR to which you want to connect your plugin (default setting is "testnet") if you do not know what type of network to use, you can read more here.
2. In the field - TEXT AREA ID enter the ID of the output element (div block) that will output the details. Remember that the ID must be entered using a special character at the beginning of the name, enter the hashtag #. Click the Insert button.
3. In the INPUT ID CONTRACT_id enter the ID of the input element that will receive the account_id data. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click Insert.
4. In the BUTTON ID enter the ID of the button which will send a request to the server. Remember that the ID must be entered using the special symbol at the beginning of the name enter the hashtag #. Click the Insert button.
And that's it the second step is finished! After you have prepared the elements on the page and added unique IDs, go to the second step - the construction of the code snippet.
▸ Step Tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
▸ Get Contract Method Plugin Video Tutorial
▸ Step Two - Building a code snippet
Send Token Plugin
In this tutorial you will learn how to build and install a plugin on your project in Webflow or different html page. In order to connect the plugin to your Webflow page, you will need to follow three simple steps, each step is very important follow them in sequence. And for a better understanding, you can watch the video tutorial
▸ Step One - Create element on the page
Based on the example you see here.
To implement this plugin, you need to create four buttons, one output and an input. Let's start with the buttons, as in the case of the SigIn/SignOut plugin, you need to create buttons to authorize the user who will send the tokens.Important! Use the ACTIVE and HIDE classes for the default buttons (see the tutorial video for details). To send tokens, you need to build a third button, which will need to be assigned a unique ID. To check the transaction you will need to build a fourth button (if necessary) and assign it a unique ID
After creating the buttons, you must create two inputs and one output and assign them a unique identifier. The Uotput will perform the function of displaying the user's balance. The first input is needed to enter the Id of the recipient, and the second input is needed to enter the number of tokens. Use the video tutorial for more information.
▸ Step Two - Building a code snippet
Once you have prepared all the elements on the page added classes and IDs, you can move on to the second step - building the code snippet. Go to the Plugin Builder.
Select Get Contract Method plugin and a constructor will open, where you need to fill in all the empty fields.
1. In the field - NET enter the name of the NEAR network to which you want to connect your plugin (by default "testnet"), if you do not know what type of network to use, you can read more here.
2. In the field - INPUT ID RECEIVER_id enter the ID of the item that will be the recipient of the tokens. Remember that the ID must be entered using a special character at the beginning of the name, enter hashtag #. Click the Insert button.
3. In the field - OUTPUT ID BALANCE enter the ID of the output item, will show the balance of the user, when the account will be authorized. Remember that the ID must be entered with a special character at the beginning of the name, enter the hashtag #. Click Insert.
4. In the INPUT ID AMOUNT field, enter the input ID will accept the number of tokens to be sent. Remember that the ID must be entered using the special character at the beginning of the name enter hashtag #. Click the Insert button.
5. In the field - BUTTON ID SIGNIN - enter the main name of the ID that you specified when you created the button in the first step (for example #login). Remember the ID name must be entered using the # sign as indicated in the example. Press the Insert button.
6. In the - BUTTON ID SIGNOUT field, enter the main ID name that you specified when you created the button in the first step (for example #logout). Remember the name of the ID must be entered using the # sign as specified in the example. Click the Insert button.
7. In the - BUTTON SEND TOKEN field, enter the basic ID name you specified when you created the button in the first step (for example, #send) Remember that the ID name must be entered using the # sign, as specified in the example. Click the Insert button.
8. In the field - BUTTON CHECK TRANSACTION - enter the basic ID name you specified when you created the button in the first step (for example, #check) Remember that the ID name must be entered using the # sign, as specified in the example. Click the Insert button.
That's it, step two is complete! Once you've prepared the elements on the page and added unique IDs, move on to the second step - building the code snippet.
▸ Step Tree - Code Setup
The final third step is to install the code.
To do this you first need to copy the first part of the code (which is the shortest) and paste it into your page - it is important to put this part of the code into the inside <head> tag area.
The second part of the code (which is large) should be placed in the befor </body> tag area. After that the page should be published and that's all, your SignIn/SigOut plugin is installed and ready to work!
