Gate experiences on your website with NFTs
Token Gating Embed is an HTML script tag to check if users hold specific NFTs in their web3 wallets.
You can use the embed feature to gate elements or functions on your website with NFTs.
How do token-gating embeds work?
Token-gating elements or functions on your website require the following:
Configure: Configure your token-gate embed code
Use:
Copy and paste toke-gate embed code to your website
Use the embed function to verify users' NFT holdings
Configure
The first step to embedding a token-gate is to configure and generate the embed code.
Go to the Token-Gating Embed configuration page.
Select up to 10 NFT collections that can unlock the gate.
1 NFT from any of these collections will unlock access.
Coinbase will update and preview the embed code as you make your selections. Once you are done, copy and paste the code and continue to the installation step.
Use
Load our Token-Gating library from CDN
In your HTML document, include the following script in your <head> section, and before your <body> tag:
<script type="text/javascript" src="https://cdn.coinbase.com/nft/cb-token-gate.js"></script>
<script type="text/javascript">
const tokenGate = new CBTokenGate({ gateId: 'abv-1234' });
</script>
Make sure to replace the gateId with your Gate ID generated from the tools section.
Prompt Token Gate
Call the verify() function to prompt the wallet connector and start the token-gating verification process. You should call the verify() function from within your <body> tag, after the token gating library is loaded.
There are multiple ways to call the verify step, here are some examples:
1. Attaching to a button via onclick:
<button onclick="tokenGate.verify()">Unlock gate</button>
2. Using an event listener and attaching to a element:
<a href=”#” id=”verify-token-gate”>Unlock gate</a>
<script type=”text/javascript”>
document.getElementById("verify-token-gate").addEventListener("click", function() {
tokenGate.verify();
});
</script>
3. Immediately when the page loads:
<script type=”text/javascript”>
window.onload = function() {
tokenGate.verify();
};
</script>
4. Using jQuery or other popular javascript frameworks:
<button id=”verify-token-gate”>Unlock gate</a>
<script type=”text/javascript”>
$(‘#verify-token-gate’).click(function(event) {
event.preventDefault();
tokenGate.verify();
});
</script>
Lastly, add a callback to handle the token gate response:
<script type="text/javascript">
tokenGate.onVerifyComplete((data) => {
// data.isVerified returns a boolean (true / false)
if(data.isVerified) {
// Do something for verified token holders
console.log(‘The holder is verified!’);
}
else {
// Handle the failed verification state
console.log(‘The holder is not verified.’);
}
});
</script>
