🐧How to build an NFT minting website on Webflow without code
a.k.a how to mint NFTs on Webflow or how to connect Metamask to Webflow
This article helps to set up a no-code widget that allows minting NFTs on your Webflow website.
Wix, WordPress, and Squarespace are also supported. Click to read Wix guide. Instructions for others coming soon, meanwhile, ask in our Discord
TL;DR
You can also clone one of our free Webflow minting templates and use as an example
Starting out
You need an Ethereum NFT smart contract. Create it using Buildship, or test with an example contract.
ERC721Community contract by buildship.xyz is used by 280+ collections with 1500ETH+ in total volume. It uses ERC721A, and has 40-100% lower minting gas fees, costs ~10-20$ in gas to deploy, bullet-proof security, and extensions like allowlists, funds/royalty splits, mint passes, etc.
Make sure your contract has
price
andmint
constants. The possible namings are:mint
,buy
ormintXXX
;price
orcost
.Your Webflow website is at least on a Basic site plan (required to add custom code blocks)
How to use?
Open Webflow website editor
Create a new Embedded HTML code block (at least Basic site plan required)
Copy & paste this code in Webflow Embed block
4. If you have your Ethereum NFT contract
If you don't have a contract, create it using Buildship without coding skills
Your contract should be verified on Etherscan. Otherwise you have to add
CONTRACT_ABI = [{...}]
line in the above code, with your full contract ABI inserted. If you have an error saying your ABI is too long, click here.
5. Create a button with ID mint-button
on your Webflow site
If you can't set an ID, you can set a button URL as #mint-button
or https://<your-website-url>/#mint-button
6. You're done 🎉
Example for testing
FAQ
I'm confused / it's not working, can you help me?
Yes, absolutely! You can contact us in Discord, or open a GitHub issue
How to add "Connect wallet" button?
Mint button will ask to connect wallet, so it's not necessary to add a "Connect wallet" button.
If you still want to do it, create a Webflow button with ID connect
.
How to add a custom minted counter?
Just create two text elements and assign them:
minted-counter
ID to display minted numbertotal-counter
ID to display collection size
How to use this with Polygon, Binance, or other Ethereum-based networks?
It's easy! Set NETWORK_ID
instead of IS_TESTNET
in the code snippet
Some of the network IDs you might use:
Ethereum Mainnet:
NETWORK_ID = 1
Ethereum Rinkeby Testnet:
NETWORK_ID = 4
Polygon:
NETWORK_ID = 137
Binance:
NETWORK_ID = 56
For other IDs visit Chainlist
How to style minting dialog?
How to hide minted counter from the dialog?
You need to set DEFAULTS.hideCounter
to true
Last updated