Skip to content

Mint button widget

Jump to bottom
theshad.eth edited this page Jan 19, 2022 · 3 revisions

How to use?

  1. Open Webflow website editor
  2. Create a new Embedded HTML code block (at least Basic site plan required)
  3. Copy & paste this code in Webflow Embed block
<script>
   CONTRACT_ADDRESS = "<your contract address here>"
   NETWORK_ID = 1
   MAX_PER_MINT = 20
</script>
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
  1. If you have your Ethereum NFT contract, insert your contract address in CONTRACT_ADDRESS field. If you don't, contact us.

Your contract should be verified on Etherscan. Otherwise you have to add CONTRACT_ABI = ... line in the above code, replaced with your contract ABI

  1. Create a button with ID mint-button to your Webflow site.
  2. You're done 🎉

Example for testing

<script>
   CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
   IS_TESTNET = true
   MAX_PER_MINT = 20
</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?

Yes, absolutely! You can contact us at https://buildship.dev, 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 minted counter?

Just create two text elements and assign them:

  • minted-counter ID to display minted number
  • total-counter ID to display collection max size

How to use this with Polygon, Binance, or other Ethereum-based networks?

It's easy! Change NETWORK_ID in the code snippet:

  • Ethereum Rinkeby Testnet: NETWORK_ID = 4
  • Polygon NETWORK_ID = 137
  • Binance NETWORK_ID = 56
  • For others visit: https://chainlist.org/

How to style minting dialog?

To use a dark theme just set theme: "dark" in the custom code

<script>
   CONTRACT_ADDRESS = "<your contract address here>"
   NETWORK_ID = 1
   MAX_PER_MINT = 20
   STYLES = {
     theme: "dark"   
   }
</script>
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">

An example of advanced styling: a yellow-black theme with squared corners

<script>
   CONTRACT_ADDRESS = "<your contract address here>"
   NETWORK_ID = 1
   MAX_PER_MINT = 20
   STYLES = {
     primaryColor: "#000",
     backgroundColor: "#fff202",
     buttonTextColor: "#fff202",
     secondaryTextColor: "#4c4c4c",
     theme: "light",
     corners: "squared"
   }
</script>
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
Clone this wiki locally