Product Docs
Search…
🐧
How to mint NFTs on Webflow without code
a.k.a 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. Instructions coming soon, meanwhile, ask in our Discord​
Video guide on using Buildship mint button

TL;DR

  • Open your Webflow website and subscribe to the Basic site plan
  • Add a button with id = mint-button
  • Create an "Embedded HTML code" block in Webflow
  • Paste code snippet to the block
  • Update code snippet with your contract address (see below)
You can also clone one of our free Webflow minting templates and use as an example

Starting out

MetaverseNFT contract by buildship.xyz is used by 40+ collections with 1500ETH+ in total volume. It features 40% lower mint gas fees, costs ~100$ in gas to deploy, bullet-proof security, and extensions like presale lists, mint passes, etc.
  • Make sure your contract has price and mint constants. The possible namings are: mint, buy or mintXXX; price or cost.
  • Your Webflow website is at least on a Basic site plan (required to add custom code blocks)

How to use?

  1. 1.
    Open Webflow website editor
  2. 2.
    Create a new Embedded HTML code block (at least Basic site plan required)
  3. 3.
    Copy & paste this code in Webflow Embed block
1
<script>
2
CONTRACT_ADDRESS = "<your contract address here>"
3
IS_TESTNET = false
4
MAX_PER_MINT = 20
5
// place to put CONTRACT_ABI = [{...}]
6
</script>
7
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
8
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
Copied!
4. If you have your Ethereum NFT contract
  • insert your contract address in CONTRACT_ADDRESS field
  • set IS_TESTNET to false or true depending on which network is the contract on: Ethereum Mainnet or Rinkeby Testnet.
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

1
<script>
2
CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
3
IS_TESTNET = true
4
MAX_PER_MINT = 20
5
</script>
6
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
7
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
Copied!

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 number
  • total-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
1
<script>
2
CONTRACT_ADDRESS = "<your contract address here>"
3
NETWORK_ID = 1
4
// remove IS_TESTNET line
5
...
6
</script>
7
<script ...>
8
<link ...>
Copied!
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
1
<script>
2
CONTRACT_ADDRESS = "<your contract address here>"
3
NETWORK_ID = 1
4
DEFAULTS = {
5
hideCounter: true
6
}
7
...
8
</script>
9
<script ...>
10
<link ...>
Copied!
​