NFT

Token-gating embeds

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:

  1. Configure: Configure your token-gate embed code

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

  1. Go to the Token-Gating Embed configuration page.

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


supportAndMore.png
Can't find what you're looking for?