June 30, 2022
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.
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.
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.
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.
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:
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
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:
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.
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.
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.