By
Tristan
June 30, 2022
Adding Web3 data and functionality to Webflow
To begin I’d like to explain where I am approaching this problem from. I am a designer and low code developer. I understand backend development and blockchains enough to interact with them but not enough to build them. So I am approaching this from the same position as most Webflow users who are interested in adding more functionality, features and data to my projects.
What do I mean by Web3? I mean the blockchain itself, NFTs, coins and wallets.
Web3 and Webflow
This might be obvious but it is important to understand before we start. Webflow is a front end development tool. While it allows you to design beautiful websites it does not allow you to make any changes to the website’s backend which is where your database, backend programming languages and frameworks are run.
Because we cannot access the backend we are - for good or bad - restricted to using front end programming languages to interact with Web 3.0. Therefore it will likely never make sense for a Web3 app to be built in Webflow, but this is fine. Webflow's forte is creating a beautiful yet manageable marketing site for a project - with some light functionality. We still have HTML, CSS, javascript and the powerful Webflow CMS at our disposal.
Fortunately we also have the Webflow CMS which we can interact with via no-code tools like Integromat to inject Web 3.0 data into our projects. This is perhaps the easiest way to ‘interact’ with Web 3.0 so we'll start here.
Adding Web 3.0 data to Webflow
Here we will explore two no code methods to inject Web 3.0 data into our Webflow projects. Anyone familiar with no code or just starting should be able to complete these.
1. Boto.io
Boto is a no-code bot builder allowing you to monitor the blockchain. It supports Ethereum and Polygon and comes with a variety of triggers. Here are some examples:
- NFT Events - mint, sale, transfer
- Opensea Listings
- Snapshot - New Proposals
- ETH Transaction Alerts
This allows you to monitor a particular contract, collection, space or wallet address and trigger an update to data you display in your Webflow project. The easiest way I’ve found to get the data into Webflow is to have Boto send an email to an Integromat scenario (mailhook) and then update the Webflow CMS with the data in the same scenario. I have no doubt there is a quicker way with code, but it works.
Above is a screenshot of one of my flows that recieves data from a Boto bot monitoring sales for a Zed horse trader, Genesis Stables. When a sale is detected by the bot, the transaction data is emailed to Integromat which triggers the scenario and updates Airtable and Webflow. You can check out the Webflow website here: GenesisStables.com
2. Etherscan API
I used to be scared of APIs. There are so many different ways to interact with them which makes them overwhelming to newbies. So to ease you in I’m going to show you what I think is the simplest way to retrieve some data from an API and inject it into your Webflow project.
I cannot mention APIs and low code without mentioning CodeMeetsNoCode.com by Conor and Aron. They have a course dedicated to low code and the basics of API. It teaches you how to explore APIs with Postman and then access the same data directly in Airtable.
For this example with the Etherscan API I’m going to inject the latest Eth price ($) into a Webflow project using Integromat. Here is an overview of the scenario:
How to do it:
- Sign up for a free Etherscan API key here.
- Browse Etherscan’s API documentation. They have various API endpoints you can use but we are looking for ‘Get Ether Last Price’
- This is the supplied endpoint which you will need to add your own API key too: https://api.etherscan.io/api?module=stats&action=ethprice&apikey=YourApiKeyToken
- Now in Integromat, you will need to start with the HTTP action. Simply put the API URL endpoint - with your API key - in the URL field. Make sure the Method is set to GET.
- Next we will need to use the JSON action to parse the data from the HTTP action. This seperates the resulting data so that we can use it more easily in the final step.
- Update your Webflow CMS item using the Webflow action.
You can now schedule this scenario to run as often as you wish and keep the data in your project updated. It can also be used easily with any API endpoint. I have a project running which uses the Zed Run API to keep NFT / horse metadata updated in Airtable and Webfow.
Other popular Web3 APIs you could explore:
Connecting a Wallet to Webflow
Now this is where things get a little more complicated, and to be honest I haven’t finished exploring yet, but I do know that Moralis is the simplest way I’ve found. For the purpose of this section we will be exploring how to authenticate a user by checking if they have a particular NFT or token in their wallet.
Moralis: Web3 API
Moralis allows you to interact with Ethereum, Solana and more through its API. This means that with some javascript on our Webflow pages, we can import live data, interact with it and even explore which tokens a user holds by allowing them to connect their wallet.
To begin with Moralis you will need to create a free account and create a server to interact with. Next I suggest that you read through their documentation, watch their video tutorials and familiarise yourself. Although this content is focused on Webflow, there is a lot to learn and takeaway from it. Anyway, if you do want ot start playing straight away, you’ll need to copy this vanilla Javascript boilerplate into the custom code section for a page in your Webflow project.
1. Familarise yourself with the Moralis docs and then head here to retrieve the vanilla Javascript boilerplate. Make sure to copy the code inside <head> to the same section in Webflow. This is accessible in the page settings.
2. You can create your own button within Webflow using the standard way but make sure to apply the corresponding ids so that they are ‘connected’ to the javascript.
3. Next you can copy the subsequent main.js code from the boilerplate into the before </body> tag for your page in Webflow. Make sure you replace the serverURL and appId with those from your Moralis server.
4. From here you should publish your project and start testing. You will need to open the console on your browser to see if you are successfully connecting your wallet. You should see your own wallet address if you manage to connect successfully.
Why connect a wallet to Webflow?
Allowing a user to connect their wallet allows you to verify that they own a particular NFT before giving them access to something. The only example I’ve built so far - with the help of a more experienced javascript developer - was a film claim app for an NFT art project. The user connects their wallet, the app verifies the wallet contains the correct NFT before serving them the high resolution file of their NFT. This required a lot more code and work then what I have discussed above, but it is more to highlight what is actually possible from within Webflow.
Tristan
Webflow Designer / Developer