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!
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.
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.
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>
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.
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.
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.
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>
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.