Product Docs
  • 🚀About buildship.xyz
  • ✅Apply for unlimited fundraise
  • 🍕How-to Guides
    • 🐶How to create an ERC721A NFT contract without code
    • 🐧How to build an NFT minting website on Webflow without code
    • 🪄How to build an NFT minting website on Wix without code
    • 🏭What is NFTFactory?
  • Technical Docs
    • 🟥Communities We Don't Approve
    • 💚Community Guidelines
    • How to refresh NFT metadata on OpenSea?
    • How to call contract methods via Etherscan?
    • How to use IPFS Desktop
  • 💻Frontend Roadmap
    • Web3 SDK
    • Mint button on Webflow
    • app.buildship.xyz
  • 🚜Solidity Roadmap
    • Metaverse NFT Factory v3
Powered by GitBook
On this page
  • TL;DR
  • Starting out
  • How to use?
  • FAQ
  1. How-to Guides

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

PreviousHow to create an ERC721A NFT contract without codeNextHow to build an NFT minting website on Wix without code

Last updated 2 years ago

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 for others coming soon, meanwhile,

TL;DR

Starting out

  • 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. Open Webflow website editor

  2. Copy & paste this code in Webflow Embed block

<script>
   CONTRACT_ADDRESS = "YOUR CONTRACT ADDRESS HERE"
   IS_TESTNET = false
   // place to put CONTRACT_ABI = [{...}]
</script>
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">

4. If you have your Ethereum NFT contract

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

<script>
   CONTRACT_ADDRESS = "0xb1db0dbad7a14370872a7e5327c8ad7c9951a661"
   IS_TESTNET = true
</script>
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">

FAQ

I'm confused / it's not working, can you help me?

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

<script>
   CONTRACT_ADDRESS = "YOUR CONTRACT ADDRESS HERE"
   NETWORK_ID = 1
   // remove IS_TESTNET line
   ...
</script>
<script ...>
<link ...>

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

How to style minting dialog?

How to hide minted counter from the dialog?

You need to set DEFAULTS.hideCounter to true

<script>
   CONTRACT_ADDRESS = "YOUR CONTRACT ADDRESS HERE"
   NETWORK_ID = 1
   DEFAULTS = {
       hideCounter: true
   }
   ...
</script>
<script ...>
<link ...>

Paste to the block

You can also and use as an example

You need an Ethereum NFT smart contract. , or test with an .

ERC721Community contract by 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.

Create a new block (at least Basic site plan required)

If you don't have a contract, without coding skills

Your contract should be on . 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, .

Yes, absolutely! You can , or open a

For other IDs visit

🍕
🐧
clone one of our free Webflow minting templates
Create it using Buildship
example contract
buildship.xyz
Embedded HTML code
create it using Buildship
verified
Etherscan
click here
contact us in Discord
GitHub issue
Chainlist
See the example here
code snippet
Click to read Wix guide.
ask in our Discord
Video guide on using Buildship mint button