Metamask

How to integrate MetaMask with Webflow

MetaMask integration with Webflow requires custom code implementation because no official marketplace app or native integration exists. You'll embed JavaScript through Webflow's custom code features to connect wallets, verify NFT ownership, and process crypto transactions directly in the browser. This approach gives you complete control over wallet interactions and UI design that pre-built marketplace apps typically don't offer.

Three implementation pathways are documented below, listed from quickest setup to most control: first, the MetaMask JavaScript SDK for direct wallet connection with minimal code; second, EIP-6963 browser extension detection for lightweight integration without package installation; third, React-based frameworks like Wagmi or ConnectKit when you need pre-built UI components and already use React.

Use MetaMask SDK and browser extension detection

MetaMask provides multiple low-code approaches for wallet connection without building custom API integrations. Choose the SDK for complete wallet management features, browser extension detection for the smallest code footprint, or React frameworks when you need pre-built UI components.

Install the MetaMask JavaScript SDK

The MetaMask JavaScript SDK provides the most direct path to wallet connection. Install via npm or yarn, initialize with the MetaMaskSDK class, and call the connect() method to request user authorization.

Add the SDK to your Webflow site through the Custom Code Embed element or site-wide code injection in Site settings > Custom code (in the Head section for SDK scripts that should load before page content or the Footer section for scripts that should load after page content).

Implementation capabilities:

• Initialize SDK connection with MetaMask JavaScript SDK setup
• Request account access using eth_requestAccounts method
• Monitor wallet state through EIP-1193 event listeners (accountsChanged, chainChanged, connect, disconnect)
• Switch networks with wallet_switchEthereumChain RPC method
• Handle disconnection with provider disconnect event listener

The SDK handles low-level blockchain interactions while maintaining flexibility for custom implementations. Character limits in Webflow's custom code blocks (10,000-50,000 characters) may require hosting the SDK via external CDN rather than inline embedding.

For framework-specific implementations, MetaMask provides dedicated SDKs. The JavaScript + Wagmi integration offers React hooks with pre-built ConnectButton components. The Vue SDK supports Vue.js projects with similar functionality.

Detect the MetaMask browser extension

Browser extension detection provides the smallest code footprint without SDK installation. This method uses the EIP-6963 standard with event listeners for eip6963:announceProvider to detect and connect to the MetaMask extension, replacing the deprecated legacy approach of accessing window.ethereum directly.

Use the EIP-6963 standard with event listeners for multi-wallet support. Legacy detection through window.ethereum is deprecated but still functional for MetaMask-only integrations.

Detection capabilities:

• Multi-wallet discovery with EIP-6963 provider detection
• Single wallet access through window.ethereum (legacy method)
• Browser compatibility checks for JavaScript BigInt support
• Connection state management with manual event listener setup

EIP-6963 detection works by dispatching an eip6963:requestProvider event and listening for eip6963:announceProvider responses. Each installed wallet announces itself with metadata including name, icon, and provider object.

This approach requires more manual event handling than the SDK but produces smaller code footprints. Add detection scripts to your site through Webflow's custom code in head and body tags or using the Custom Code Embed element.

The JavaScript DApp tutorial walks through detection code and user account access implementation.

Build with React components

React-based integration provides pre-built UI components for wallet connections. Two primary options exist: ConnectKit and Wagmi integrations, both offering pre-built UI components for React projects according to MetaMask's framework-specific integration documentation.

ConnectKit setup provides pre-built UI components for wallet connections. The Wagmi integration offers a React hooks-based approach with pre-built ConnectButton components for account management, transaction handling, and network switching.

Component features:

Framework-Specific UI Components:

When integrating MetaMask with Webflow using Wagmi or ConnectKit frameworks, these pre-built UI components become available:

• Pre-styled connection buttons via Wagmi's ConnectButton components
• Modal wallet selection supporting multiple providers through Wagmi or ConnectKit
• Connection state indicators showing connected accounts (native to provider implementations)
• Network switching UI with chain selection capabilities
• Responsive design adapting to mobile and desktop environments

For non-framework implementations using EIP-6963 provider detection or direct MetaMask SDK integration, developers must implement these UI elements manually through custom JavaScript and CSS in Webflow custom code blocks.

React components require embedding through Webflow's custom code capabilities, which offer two implementation methods: the Custom Code Embed element (a drag-and-drop component for page-level code) or the Custom Code in Head/Body Tags settings (for site-wide code injection). Due to character limits on embedded code blocks (10,000-50,000 characters depending on location), you'll need to bundle your React application separately, host the compiled JavaScript on an external CDN, and load it via script tags through either the Custom Code Embed element or custom code injection settings.

React integration works best when you're using a framework like Wagmi or ConnectKit that provides pre-built UI components, allowing you to minimize custom styling work while maintaining consistent wallet connection functionality across your application.

Build with Webflow and MetaMask API

Direct API integration gives complete control over wallet interactions and blockchain operations. MetaMask's Ethereum Provider API follows the EIP-1193 standard, exposing JSON-RPC methods through the window.ethereum object.

This approach enables custom authentication flows, complex smart contract interactions, and token-gated content systems through specific blockchain methods and responses, which pre-built solutions can't accommodate. You write JavaScript that calls specific blockchain methods via the Ethereum provider API and handles responses.

Connect wallets and manage accounts

Wallet connection starts with account access requests. The primary method for establishing connections is eth_requestAccounts, which prompts users to authorize your site and is specified by EIP-1102.

Call eth_requestAccounts to trigger the MetaMask popup asking for permission. The method returns an array of Ethereum addresses if approved, or an error code if rejected.

Account management methods:

• Request account access with eth_requestAccounts (EIP-1102)
• Access accounts using patterns from the MetaMask access accounts guide
• Monitor account changes with the accountsChanged event listener
• Handle rejections by catching error code 4001 (user rejection)

After initial connection, monitor the accountsChanged event to detect when users switch wallets or revoke access. An empty accounts array indicates disconnection.

Store connected addresses temporarily in browser session storage rather than the Webflow CMS. Webflow fundamentally does not support server-side execution or server-side data storage, making it unsuitable for managing sensitive wallet data.

Sign messages and verify ownership

Message signing enables wallet authentication and verification through cryptographic signatures without requiring blockchain transactions. Two signing methods serve distinct use cases: personal_sign for authenticating with human-readable text messages and eth_signTypedData_v4 for verifying structured data that follows the EIP-712 standard.

Signing capabilities:

• Authenticate users with personal_sign challenges
• Sign structured data using ethsignTypedDatav4 (EIP-712)
• Verify signatures through cryptographic validation (requires external backend)
• Create session tokens by combining signatures with timestamp nonces and validate server-side

Sign authentication messages client-side and verify signatures on a backend server. Since Webflow lacks server-side execution capabilities, you must use external webhook endpoints or serverless functions to validate signatures securely.

Token gating implementations commonly use wallet authentication via message signing (personal_sign) followed by read-only contract calls (eth_call) to verify token or NFT ownership before granting access.

Send transactions and interact with contracts

Blockchain transactions enable cryptocurrency transfers, NFT minting, and smart contract interactions. The ethsendTransaction method handles transaction signing and submission to the blockchain, while ethcall performs read-only contract queries without consuming gas.

Contract interaction requires encoding function calls into transaction data fields. Use established libraries like ethers.js or web3.js to handle encoding complexity. However, note that Webflow has custom code character limits (10,000-50,000 characters depending on location) that may exceed these libraries' sizes, requiring external CDN hosting rather than manual hex construction.

Transaction methods:

• Send transactions with eth_sendTransaction
• Read contract data using eth_call (no gas cost)
• Estimate gas costs with eth_estimateGas before submission
• Check transaction status via eth_getTransactionReceipt
• Handle contract events by parsing transaction logs

The contract interaction guide documents two primary approaches for smart contract interaction: raw JSON-RPC calls and Web3 library abstractions. Library-based approaches provide better error handling and automatic gas estimation compared to raw transaction construction.

To mint NFTs through MetaMask, use the eth_sendTransaction method with your smart contract's mint function parameters, including the recipient address and token metadata URI. Monitor transaction confirmations using eth_getTransactionReceipt to verify successful minting before syncing results with Webflow CMS through the Webflow REST API endpoints (POST /collections/{collection_id}/items for creating or PUT /collections/{collection_id}/items for updating collection items).

Switch networks and manage chains

Multi-network support lets users interact with different blockchains. Ethereum Mainnet, Polygon, Arbitrum, and Optimism are all supported, with MetaMask providing the wallet_switchEthereumChain API method for programmatic network switching between these chains.

The walletswitchEthereumChain method switches to a configured network by chain ID. If users don't have the requested network configured, use walletaddEthereumChain to add it first before switching.

Network management:

• Switch networks with wallet_switchEthereumChain
• Add networks with wallet_addEthereumChain
• Monitor network changes with the chainChanged event listener
• Handle network errors when users reject network switches

The manage networks guide includes complete network configuration objects with RPC URLs, chain IDs, and block explorer links.

When users switch blockchain networks in MetaMask, listen for the chainChanged event using JavaScript event listeners. MetaMask's documentation recommends developers reload the page when this event fires, as network switches can affect contract addresses, token balances, and transaction history displays. This is particularly important for Webflow sites that interact with specific blockchain networks, as incorrect network context can cause failed transactions or display incorrect data. Implement this using: ethereum.on('chainChanged', () => { window.location.reload(); }) to ensure your Webflow page displays accurate blockchain-specific information after network changes.

Common chain IDs include 0x1 (Ethereum Mainnet), 0x89 (Polygon), 0xa (Optimism), and 0xa4b1 (Arbitrum One). Refer to the EIP-155 specification for the complete chain ID registry.

What you can build

Integrating Microsoft Teams with Webflow provides instant form submission notifications to Teams channels. Add live chat widgets that route visitor conversations to your team. Set up content approval workflows. Build custom API integrations for bidirectional data synchronization. All connections require third-party automation platforms, custom code embeds, or API development since no native integration exists.

• ‍Lead response acceleration: Capture contact form submissions, qualification forms, or demo requests. Post immediately to sales team channels with visitor details, message content, and page context. Sales representatives respond within minutes instead of hours. This eliminates dashboard monitoring and email notification delays.‍
• Client portal with dedicated communication channels: Build client-specific landing pages that include live chat widgets. Route these to dedicated Teams channels. Agencies manage multiple client projects with isolated communication threads. They maintain unified team coordination in Teams. Clients submit feedback, request revisions, and track project status through custom Webflow forms. These connect to their private channels.‍
• Content approval workflows: Route CMS draft submissions to editorial teams via Teams channels. Writers discuss revisions. Editors provide feedback. Stakeholders approve publication. Integrate status updates so Teams messages automatically update CMS item workflow states. This eliminates manual status tracking across platforms.‍
• Form submission and instant notifications: Send form data from Webflow submissions to specialized Teams channels for immediate team visibility. Time-sensitive inquiries can trigger mentions to specific team members. Routine submissions flow to designated channels for organized processing. Custom field mapping allows categorization and routing based on form content or submission type.