Metamask

How to integrate MetaMask with Webflow

Web3 functionality enables wallet-connected experiences like NFT galleries, token-gated content, and blockchain authentication. All MetaMask integrations require custom code.

The integrations include Web3Modal via CDN for the fastest setup and multi-wallet compatibility. Pre-built GitHub widgets work for specific use cases but require ongoing maintenance. MetaMask SDK provides official mobile support for complex interactions.

Use Web3Modal via CDN

Web3Modal provides CDN-based integration within the Webflow custom code constraints.

The features include the following:

• CDN integration with no build tools
• Wallet data display (addresses, ETH balances) via Ethers.js
• Session persistence with cacheProvider: true
• Light/dark theme customization

Place Ethers.js and Web3Modal CDN links in custom code in the head and body tags. Use defer attributes for external libraries and initialize within DOMContentLoaded. Test on the staging domain, as the custom code only works on published sites with HTTPS.

Use pre-built GitHub widgets

GitHub widgets like MetaMask button, Webflow, and Webflow NFT components provide functional connections without writing Web3 code from scratch.

Note: Most Web3 GitHub projects have inconsistent maintenance. Pin specific versions and test thoroughly before production.

The widget functionality includes the following:

• MetaMask connection via Ethers.js with automatic wallet detection
• NFT minting through smart contract integration
• Multi-chain support: Ethereum, Polygon, Arbitrum, Optimism, Base, BNB Chain

Create button elements with HTML IDs, add widget scripts to Before body tag section, and configure variables (CONTRACTADDRESS, ISTESTNET, MAXPERMINT). Test on testnets (Goerli/Sepolia) before mainnet.

Use MetaMask SDK

MetaMask SDK provides official desktop/mobile wallet support through a unified API — best for mobile support or complex wallet interactions.

SDK capabilities:

• Mobile wallet connection via deep linking
• Session persistence across refreshes
• Automatic desktop/mobile detection
• dappMetadata configuration for site identification

Install via CDN in custom code, initialize with dApp metadata, verify connection with eth_accounts, and implement error handling. Mobile integration triggers deep links to MetaMask app for approval.

Display NFT galleries

Query blockchain data through Alchemy, Infura, or QuickNode using REST APIs or JSON-RPC endpoints. Fetch NFT data after wallet connection, then dynamically create HTML elements.

API calls take 5-30 seconds. Implement loading states and error handling.

Example using Alchemy:

const ALCHEMY_API_KEY = "YOUR_API_KEY";
const walletAddress = "0x...";

fetch(`https://eth-mainnet.g.alchemy.com/nft/v3/${ALCHEMY_API_KEY}/getNFTsForOwner?owner=${walletAddress}`)
  .then(res => res.json())
  .then(data => {
    data.ownedNfts.forEach(nft => {
      const img = document.createElement('img');
      img.src = nft.media[0].gateway;
      img.alt = nft.title;
      document.getElementById('nft-gallery').appendChild(img);
    });
  })
  .catch(error => console.error('Failed to fetch NFTs:', error));

What you can build

Web3 integrations with Webflow help build blockchain-enabled site features. All implementations require custom code:

• NFT minting platforms: Wallet connection + direct minting. Requires smart contracts, gas handling, and supply tracking.
• Token-gated membership sites: Access restricted to NFT/token holders. Server-side verification required.
• DeFi landing pages: Wallet connection + balance display. Smart contract interaction requires development expertise.
• Web3 authentication systems: Wallet-based login via cryptographic signatures. Requires backend setup.