Dappify Logo Dappify

Drop Dappify Web3
widgets anywhere

Instantly add wallet connections, NFT claims,
token gating and more, all without code!

Get Started Now
Mobile Web3 login
Code snippet in editor

Get Started in Seconds

Before You Begin: Get Your Thirdweb Client ID

Dappify widgets require a Thirdweb Client ID. Sign up for a free account on the Thirdweb Dashboard, log in with your wallet, and create a new project. This ID is essential for all steps below—grab it first!

Testing the Demos

To try the live demos on this page, switch your wallet to the Fuji Testnet (Avalanche C-Chain, chain ID 43113). Need test funds for gas fees? Get free AVAX from the Fuji Testnet Faucet.

Step 1: Add the Library

Copy and paste this script tag just before the closing </body> tag on your website:

<script src="https://cdn.jsdelivr.net/npm/@dappify/thirdweb@latest/dist/widgets.js">

This enables all Dappify widgets on your page.

Deploy Workflow Status Thirdweb Widgets Library Version

Connect Wallet Widget

Add a button to connect wallets using this code. Replace "your-client-id" with your Thirdweb Client ID from the prerequisite above:

<div id="connect-button-hero"
     data-widget="ConnectButton"
     data-client-id="e9bae73377d43e42aea12c0d07474163"
     data-theme="dark"
     data-chains="43113,1,137"
     data-locale="en_US"></div>

Properties

Attribute Requirement Description Possible Values
data-widget Mandatory Specifies the widget type. "ConnectButton" (fixed value)
data-client-id Mandatory Your unique Thirdweb Client ID. String (get from Thirdweb Dashboard)
data-chains Mandatory Comma-separated chain IDs to support. E.g., "43113,1,137" (see Supported chains)
data-theme Optional Sets the button’s visual theme. "dark", "light" (default: "light")
data-locale Optional Sets the language for the widget. Default "en_US" (see Supported languages)

For more details, see the Thirdweb ConnectButton Docs or view a live sample on jsfiddle.

Claim NFT Widget

Add an NFT claim button with this code. Replace "your-client-id" with your Thirdweb Client ID from the prerequisite above:

              
<div id="claim-button-main"
     data-widget="ClaimButton"
     data-client-id="e9bae73377d43e42aea12c0d07474163"
     data-chains="43113"
     data-label="🔥Mint NFT!"
     data-contract-address="0xeF155b056299Ba3e98987f37a2CB5518DE0a98F3"
     data-type="ERC721"
     data-quantity="1"></div>

If the button is disabled, connect your wallet here first.

Properties

Prerequisite: The Claim Button requires a connected wallet to be active. Ensure you’ve added the ConnectButton widget first and that the user is authenticated. Without a connected wallet, the button will remain disabled.

This button is used to claim tokens (NFT or ERC20) from a Thirdweb Drop contract. There are three types of Drop contracts: NFT Drop (DropERC721), Edition Drop (DropERC1155), and Token Drop (DropERC20). Learn more at Thirdweb Drops.

Note: This button only works with Thirdweb Drop contracts. For custom contracts, use the TransactionButton (Coming soon) instead.

Attribute Requirement Description Possible Values
data-widget Mandatory Specifies the widget type. "ClaimButton" (fixed value)
data-client-id Mandatory Your unique Thirdweb Client ID. String (get from Thirdweb Dashboard)
data-contract-address Mandatory The smart contract address for claiming. Ethereum address (e.g., "0x...")
data-type Mandatory Token standard of the contract. "ERC721", "ERC1155", "ERC20"
data-chains Mandatory Comma-separated chain IDs. E.g., "43113" (see Supported chains)
data-label Optional Custom button text. String (e.g., "🔥Mint NFT!", default: "Claim")
data-quantity Optional Number of items to claim. Integer (e.g., "1", default: "1")
data-theme Optional Sets the button’s visual theme. "dark", "light" (default: "light")

For more details, see the Thirdweb ClaimButton Docs or view a live sample on jsfiddle.

Token Gating Widget

Restrict access to content based on token ownership (ERC20, ERC721, or ERC1155). Add this widget and specify the content to gate by ID. Replace "your-client-id" with your Thirdweb Client ID:

<div data-widget="TokenGating"
     data-client-id="e9bae73377d43e42aea12c0d07474163"
     data-chain="43113"
     data-gate-id="gated-content-demo"
     data-contract-address="0xeF155b056299Ba3e98987f37a2CB5518DE0a98F3"
     data-quantity="1"
     data-type="ERC721"></div>

<!-- Gated content -->
<div id="gated-content-demo" style="display: none;">
  <p>This content is only visible to token holders!</p>
</div>

Properties

Prerequisite: The Token Gating widget requires a connected wallet. Ensure the ConnectButton widget is added and the user is authenticated before gating content.

This widget supports ERC20, ERC721, and ERC1155 token standards. The gated content (identified by data-gate-id) is hidden by default (style="display: none;") and revealed only if the user meets the token ownership requirements.

Attribute Requirement Description Possible Values
data-widget Mandatory Specifies the widget type. "TokenGating" (fixed value)
data-client-id Mandatory Your unique Thirdweb Client ID. String (get from Thirdweb Dashboard)
data-chain Mandatory Single chain ID where the contract exists. E.g., "43113" (see Supported chains)
data-gate-id Mandatory ID of the HTML element to gate. String (e.g., "gated-content-demo")
data-contract-address Mandatory The token contract address. Ethereum address (e.g., "0x...")
data-type Mandatory Token standard of the contract. "ERC20", "ERC721", "ERC1155"
data-quantity Mandatory Minimum token amount required. Integer (e.g., "10000" for ERC20, "1" for ERC721)
data-token-id Optional (ERC1155 only) Specific token ID for ERC1155. Integer (e.g., "0")

For more details, check the Thirdweb Documentation or view a live sample on jsfiddle.

Direct Payment Widget

Let anyone send payments directly to your wallet while onramping users with credit card & cross-chain crypto payments. Replace "your-client-id" with your Thirdweb Client ID from the prerequisite above:

<div id="direct-payment-demo"
     data-widget="DirectPayment"
     data-client-id="e9bae73377d43e42aea12c0d07474163"
     data-chains="43113"
     data-theme="dark"
     data-name="Product"
     data-seller-address="0x06bd1006C1ACd8f32ab9599B5608f789Cb22A4F7"
     data-amount="0.123"
     data-image="https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto"></div>

Properties

Attribute Requirement Description Possible Values
data-widget Mandatory Specifies the widget type. "DirectPayment" (fixed value)
data-client-id Mandatory Your unique Thirdweb Client ID. String (get from Thirdweb Dashboard)
data-chains Mandatory Comma-separated chain IDs to support. E.g., "43113" (see Supported chains)
data-theme Optional Sets the visual theme. "dark", "light" (default: "light")
data-name Mandatory The name or label for the item being sold. E.g., "☕ Buy me a coffee"
data-amount Mandatory Amount to be paid, in native currency. E.g., "0.123"
data-seller-address Mandatory Wallet address to receive payment. E.g., Ethereum address (e.g., "0x...")
data-image Optional Image URL to show alongside the product or service. E.g., "https://example.com/image.png"

For more details, see the Thirdweb PayEmbed Docs or view a live sample on jsfiddle.