How to connect MetaMask Ethereum wallet to Webflow website

Connect MetaMask to Webflow

If you want to create your own NFT and are looking for ways to integrate Web3 to your Webflow website for wallet connect access, then below are a few ways to do it.

1. The easiest and most convenient option is to use a free ready-made website or widget from Via.Exchange

Cross-chain NFT sale and minting

After filling out the form on the Via website, you will receive a link by clicking on which users can easily mint NFT by authorizing through any wallet such as WalletConnect, MetaMask, Rainbow, or Phantom.

You only need to paste this link into the “Mint” button on your website or use this page instead of the website.

Via Exchange Cross-chain NFT sales and mints

On the plus side, after the purchase, users will see a convenient sharing function on Twitter, which makes your collection more popular.

Also, if you don’t want buyers to go to a third-party site, you can install a custom widget right on your Webflow site.

Go to the Via Exchange community on Discord

2. You can use the embed widget from Buildship

How to mint NFTs on Webflow without code

How to use it?

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 the created block. If you already have a deployed contract, insert your address, ABI, and website link

<script>
   CONTRACT_ADDRESS = "<your contract address here>"
   IS_TESTNET = false
   MAX_PER_MINT = 20
   // 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

• 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

<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">

3. The hardest way is to use the library Web3Modal

GitHub - Web3Modal/web3modal: A single Web3 / Ethereum provider solution for all Wallets

You will have to work hard to integrate this library, but the end result is a pretty nice interface that many DeFi users will be familiar with.