Connect web3 to Webflow without coding skills
Mint button for Webflow/Wix/Wordpress
Add a mint button to your website without coding skills required.
โก Quick start
Use our new app to set up your button embed: https://embed.buildship.xyz
Features
๐ No-code mint button for Webflow, Wix, WordPress with instructions ๐ Supports custom contract methods (mint, maxSupply, etc.) ๐ Supports non-verified contracts ๐ Pay to remove watermark ๐ Supports other chains (Polygon, Optimism, Arbitrum, etc.) ๐ Easy to useVideo guide
Text guide
This widget allows minting NFTs on your website.
To start, you need an Ethereum NFT contract. Create it via Buildship app, or test with an example contract.
ERC721Community contract by buildship.xyz is used by 400+ NFT collections with $10M+ in total volume ($5M+ primary sales, $5M+ secondary marketplace volume) and 400,000+ NFTs minted across all contract versions. It uses ERC721A, allowing for 50-100% lower minting gas fees, costs ~10-20$ in gas to deploy, bullet-proof security and extensions like allow lists, mint passes, etc. Create your contract now
How to use it with Webflow?
โก Instructions for Wix/Wordpress/HTML & easy setup are available on embed.buildship.xyz
- 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
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">- If you have your Ethereum NFT contract
CONTRACT_ADDRESS field
โ
Set IS_TESTNET to false or true depending on which network is the contract on: Ethereum Mainnet or Goerli Testnet
โ
Make sure it fits requirements from Custom smart contract requirements
If you don't have a contract, create it via Buildship app
Your contract should be verified on Etherscan. Otherwise you have to add CONTRACTABI = [{...}] line in the above code, with your full contract ABI inserted. If you have an error saying your ABI is too long, click here.
- Create a button with ID
mint-buttonon your Webflow site
On the left side, press Add and find Button
Select your button, then on the right side, set Button id to mint-button
If you can't set an ID, you can set a button URL as mint-button or https://<your-website-url>/#mint-button
- You're done ๐
Custom smart contract requirements
If you are using mint widget with a contract not deployed via https://app.buildship.xyz, it has to be:
- verified on Etherscan
- public
pricemethod outputting price in wei. It could be namedprice,costorgetPrice - public
mintmethod acceptingnTokensas parameter. Alternative names:mint,mintNFTorpublicMint - public
maxSupplymethod outputting collection size - public
totalSupplymethod outputting total number of minted NFTs
Here's the code that handles this: src/mint/web3.js
Example for testing
<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 in Discord, or open a GitHub issueHow 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-counterID to display minted numbertotal-counterID to display collection size
How to use this with Polygon, Binance, or other Ethereum-based networks?
It's easy! SetNETWORKID instead of ISTESTNET in the code snippet
Do you collect any data?
Anonymous data collected using Amplitude, so we can know how many users the widget has. The only thing we collect is website URL. If you want to opt out, setCan I add my own custom analytics?
Check out this guide: https://github.com/buildship-dev/webflow-nft-components/wiki/Custom-Analytics
Free Template
If that instruction was too complicated, check out our free clonable NFT website templates for Webflow
Roadmap
- [x] Fix issues with WalletConnect on mobile
- [x] Support for Coinbase Wallet
- [x] Guide for Wix
- [x] Guide for Wordpress
- [ ] Guide for Squarespace
- [ ] Native support for Ledger
- [ ] Support for Magic Wallet
- [ ] Support for gasless mints
- [x] Support for buying with credit card: MoonPay / CrossMint
- [ ] Migrate to RainbowKit or ConnectKit
- [ ] Migrate to ethers.js
- [ ] Refactor code
- [ ] "Disconnect wallet"
- [ ] View wallet's NFTs via rainbow.me
- [ ] Support for token-gating
Contributing
Fork the repo and clone itgit clone https://github.com/buildship-dev/webflow-nft-components.gitInstall dependencies with yarn (node v14+ required)
yarn installStart server on localhost:3000
yarn startPush changes, open a PR in our repo, and you'll be able to test your changes immediately on nftcomponents-git-your-branch-name.vercel.app.
Leave a message in our Discord to discuss & review your PR faster!
