General usage
SignIn/SignOut
Video tutorial
Account details
All access keys
Parse Contract
Send token
Authentification
Create Account
Delete Account
HubSpot 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 using basic NEAR functionality have been developed. Further collection will be expanded as the demanded functionality is implemented. Plugins are developed and can be used for projects created on the HubSpot platform.
Plugins are installed from the Marketplace in the form of a page, as well as a database component. All you need to do is install the plugin on a blank page of your project and configure the database. Interaction with the Near protocol is based on the
NAER-API-JS library, using REST API requests, which you can read more about here.
For more details on how to install the plugin separately, you can read by selecting the plugin you are interested in, as well as watch video tutorials.
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
Plugins Video Tutorial
In this video tutorial you will learn how to create and install a Near plugin theme on your project in HubSpot. In order to install this theme in your project. Follow these steps. Go to your HubSpot account, then go to Marketplace. In the menu under the search bar, select Themes. In the search box, enter Near Plugin and then click on Install for free.After installation, start using the theme as described in the video review.
▸ Plugins Video tutorial
Account Details Plugin
In this tutorial you will learn how to create and install a plugin on your project in AppGyver. In order to connect the plugin to your AppGyver page, you will need to follow three simple steps, each of which is very important, follow them in sequence. For a better understanding you can watch the video lesson.
▸ Step one - Install Plugin on the page
Based on the example that you can see here.
The first step is to install the plugin on your blank page. To do this, you need to go to Marketplace and enter the token code - DpPThcrElCBNk9KTxEkUng in the search box. After that you need to click on the button install
Once the plugin is installed, go to step 2 - setting up the database.
▸ Step two - Setting Database
Great, you have installed the plugin on a blank page, in this step you need to add two databases. The first database will be created to retrieve data through REST API direct integration. The second database will be created to store the retrieved data locally On-device storage
1. To install the REST API data plugin, you need to click on add data resource and select the menu Marketplace search then in the search box to enter the token code - GR8vQ_2zbNc0fNvm2XZahg, click on the plugin and install it in your project.
2. Set On-device Storage Data to process received data via REST API. To do this you need to go to the date folder, then click on the plus sign on the right - add data resource select On-device storage in the menu. After the settings window opens, enter the name in the Resource ID field - viewAccountData.
3. Then you need to create a Resource shema which will include an object with 7 properties.
▸ Create a resource named result and set its Object properties
▸ Create in result object a resource named amount and set Integer text properties for it
▸ Create in result object a resource named locked and set its properties Integer text
▸ Create in result object a resource named code_hash and set the properties Text
▸ Create in result object a resource named block_hash and set the properties Text
▸ Create in result object named block_height and set the Number property for it
▸ Create in result object a resource named storage_usage and set Number properties for it
▸ Create in result object a resource named storage_paid_at i and set Number properties for it
▸ Account Details Plugin Video tutorial
All Access Keys Plugin
In this tutorial you will learn how to create and install a plugin on your project in AppGyver. In order to connect the plugin to your AppGyver page, you will need to follow three simple steps, each of which is very important, follow them in sequence. For a better understanding you can watch the video lesson.
▸ Step one - Install Plugin on the page
Based on the example you see here.
The first step is to install the plugin on your blank page. To do this, you need to go to Marketplace and enter the token code - OUkI2MRDGCnT_LpYBkjo_A in the search box. After that you need to click on the button install.
Once the plugin is installed, go to step 2 - setting up the database.
▸ Step two - Setting Database
Great, you have installed the plugin on a blank page, in this step you need to add two databases. The first database will be created to retrieve data through REST API direct integration. The second database will be created to store the retrieved data locally On-device storage
1. To install the REST API data plugin, you need to click on add data resource and select the menu Marketplace search then in the search box to enter the token code - CgqjlVbmtL0OmVKeuksT6g, click on the plugin and install it in your project.
2. Set On-device Storage Data to process received data via REST API. To do this you need to go to the date folder, then click on the plus sign on the right - add data resource select On-device storage in the menu. After the settings window opens, enter the name in the Resource ID field - keysData.
3. Then you need to create a Resource shema which will include an object with 7 properties.
▸ Create a resource named result and set its Object properties
▸ Create in result object a resource named block_hash and set Text properties for it
▸ Create in result object a resource named block_height and set its properties Number
▸ Create in result object a resource named keys and set the properties Object
▸ Create in keys object a resource named access_key and set the properties Object
▸ Create in keys object named public_key and set the URL property for it
▸ Create in access_key object a resource named nonce and set Number properties for it
▸ Create in result object a resource named permission i and set Any value properties for it
▸ All Access Keys Plugin Video tutorial
Parse Seed Prase Plugin
In this tutorial you will learn how to create and install a plugin on your project in AppGyver. In order to connect the plugin to your AppGyver page, you will need to follow three simple steps, each of which is very important, follow them in sequence. For a better understanding you can watch the video lesson
▸ Step One - Install Plugin on the page
Based on the example you see here.
The first step is to install the plugin on your blank page. To do this, you need to go to Marketplace and enter the token code - 6ESZa_WQmnsSh3ZnEDqTAw in the search box. After that you need to click on the button install.
Once the plugin is installed, go to step 2 - setting up the database.
▸ Step Two - Setting Database
Great, you have installed the plugin on a blank page, in this step you need to add two databases. The first database will be created to retrieve data through REST API direct integration. The second database will be created to store the retrieved data locally On-device storage
1. To install the REST API data plugin, you need to click on add data resource and select the menu Marketplace search then in the search box to enter the token code - wDa-6pCXc--ERfERMAoSOQ, click on the plugin and install it in your project.
2. Set On-device Storage Data to process received data via REST API. To do this you need to go to the date folder, then click on the plus sign on the right - add data resource select On-device storage in the menu. After the settings window opens, enter the name in the Resource ID field - PerseData.
3. Then you need to create a Resource shema which will include with 3 properties.
▸ Create a resource named seedPhrase and set Text properties for it
▸ Create a resource named publicKey and set URL properties for it
▸ Create a resource named secretKey and set URL properties for it
▸ Parse Seed Phrase Plugin Video Tutorial
View Method Plugin
In this tutorial you will learn how to create and install a plugin on your project in AppGyver. In order to connect the plugin to your AppGyver page, you will need to follow three simple steps, each of which is very important, follow them in sequence. For a better understanding you can watch the video lesson
▸ Step One - Install Plugin on the page
Based on the example you see here.
The first step is to install the plugin on your blank page. To do this, you need to go to Marketplace and enter the token code - tDXZHA9E-p4gIVnsf6gGMA in the search box. After that you need to click on the button install
Once the plugin is installed, go to step 2 - setting up the database.
▸ Step Two - Setting Database
Great, you have installed the plugin on a blank page, in this step you need to add two databases. The first database will be created to retrieve data through REST API direct integration. The second database will be created to store the retrieved data locally On-device storage
1. To install the REST API data plugin, you need to click on add data resource and select the menu Marketplace search then in the search box to enter the token code - ghHhZBknhQgGtT7m25zXwA, click on the plugin and install it in your project.
2. Set On-device Storage Data to process received data via REST API. To do this you need to go to the date folder, then click on the plus sign on the right - add data resource select On-device storage in the menu. After the settings window opens, enter the name in the Resource ID field - viewData.
3. There is On-device Storage Data no need to create additional resours for this. The data will be automatically displayed after the response record is created.
▸ View Method Plugin Video Tutorial
▸ Step Two - Building a code snippet
Call Method Plugin
In this tutorial you will learn how to create and install a plugin on your project in AppGyver. In order to connect the plugin to your AppGyver page, you will need to follow three simple steps, each of which is very important, follow them in sequence. For a better understanding you can watch the video lesson
▸ Step One - Install Plugin on the page
Based on the example you see here.
The first step is to install the plugin on your blank page. To do this, you need to go to Marketplace and enter the token code - DXqno-zpUNNaRZxxRi5NIQ in the search box. After that you need to click on the button install
Once the plugin is installed, go to step 2 - setting up the database.
▸ Step Two - Setting Database
Great, you have installed the plugin on a blank page, in this step you need to add two databases. The first database will be created to retrieve data through REST API direct integration. The second database will be created to store the retrieved data locally On-device storage
1. To install the REST API data plugin, you need to click on add data resource and select the menu Marketplace search then in the search box to enter the token code - bwCquhrxN2VkP8qoTNdvmA, click on the plugin and install it in your project.
2. Installation of On-device Storage Data is not required, because after sending the message, it will be recorded in the blockchain and see the changes in the contract will now be possible only by applying Veiw Method.
After clicking on send message, the redirect function to the View Method Plugin page will work. where you can enter the contract name (guest-book.testnet) and method name (getMessages) and then you will see the changes made in this contract.
IMPORTANT: in this example the smart contract guest-book is addressed, which can be found here, before using Call Method Plugin for correct work be sure to install View Method Plugin
