Blog Home
How to Create an ERC-6551 iFrame
How to Create an ERC-6551 iFrame

How to Create an ERC-6551 iFrame

Min read
How to Create an ERC-6551 iFrame
ERC-6551 is giving NFTs a breath of fresh air and layers of interactivity.

ERC-6551 has already been noted as a groundbreaking Ethereum implementation that gives ERC-721 NFTs their own wallets, allowing them to own tokens, other NFTs, or even interact with other smart contracts.

This gives NFTs a breath of fresh air and layers of interactivity for industries like gaming and music. The only problem is that because the standard is so new, there are not any marketplaces or wallets that can display an ERC-6551 wallet or the assets inside of it.

Thanks to Tokenbound you can use their custom iFrame implementation to display it on your own website, or even through the NFT’s metadata via OpenSea which is what this tutorial will show you how to do.

You will need a little bit of developer experience to launch this project. Tools being used would include a text editor, smart contracts, GitHub, and Vercel to launch the site. Don’t worry, even if you’re a novice this guide should be able to walk you through each step so you can implement it.

Mint an NFT

In some ways this step is optional, but for this tutorial we’ll mint an NFT with the objective of being able to update the token URI (the primary info about the NFT).

This is totally optional because you can use the Token Bound Account iFrame on its own. We’ll be using the animation_url property in the NFT metadata so it’ll show up on marketplaces like OpenSea. We also have a tutorial walking through this process you can view below. If you want, you can click here to open it in a new tab for later.

The first thing we need to do is upload whatever we want our NFT to be to Pinata.

We’ll upload our classic Pinnie.png so we can send it some surprises later 👀. To upload, visit and sign in with your account. If you don’t have an account you can sign up with a free account to start.

After logging in you can upload a file by clicking “Add Files,” then select the file, give it a name if you want, and click “Upload.”

adding files

Once the file is uploaded you should see it listed on the files page. You will want to copy the CID and save it for later.

Next we need to make a metadata JSON file that will hold all the information about our NFT. It will look something like this:

  "name": "Name of NFT",
  "description": "Description of NFT",
  "external_url": "",
  "image": "ipfs://CID_GOES_HERE"

You can copy this and edit it to your liking, but make sure to replace <span class="code-inline">CID_GOES_HERE</span> with the CID of the image you uploaded. You can also edit the file with this Replit template and save the file to your computer from there.

After you have saved it you will want to upload that file to Pinata as well, just like the image. Be sure to copy the CID for that metadata file and save it for later.

Now that our assets are ready we can create our smart contract to mint the NFT. There are a lot of ways to mint an NFT, but for this guide we’ll use a combination of OpenZeppelin and Remix.

Visit OpenZeppelin’s Smart Contracts page to start and you should see a contract builder with some different options. In order to have an NFT that can accept a ERC-6551 Token Bound Account, we need to select ERC-721.

At the top you can give it a <span class="code-inline">Name</span> and<span class="code-inline">Token Symbol</span>, and be sure to leave the <span class="code-inline">Base URI</span> empty. From there you can select which options you would like, and for this guide we’ll select the following:

After you have everything set, click on the “Open in Remix” button.

We’re going to make one small addition to our smart contract. This function will allow us to update the <span class="code-inline">Token URI</span> for a specific NFT. It’s very subjective if this is a good practice or not, but for our application we want to be able to add an <span class="code-inline">animation_url</span> to our NFT metadata later on so our ERC-6551 iFrame will show up on OpenSea.

The importance is that this is in the smart contract for anyone to see, and updates to an NFT are all recorded on chain. With that said you will want to put this function after <span class="code-inline">safeMint</span>.

function setTokenURI(uint256 tokenId, string memory uri) public onlyOwner {
   _setTokenURI(tokenId, uri);

After adding the function we can go ahead and compile the contract by clicking the “Compile contract” button on the left side. If successful you should see a green check mark on the left side bar for the Solidity Compiler.

Next we will want to navigate to the “Deploy & Run Transactions” tab on the sidebar.

Before we deploy this smart contract, you will want to make sure you have the right wallet with testnet funds and network selected.

Inside the “Deploy & Run Transactions” screen there will be a dropdown menu in the top right to select your environment. Click that and select “Injected Provider — Metamask” (it might be different if you use a different wallet).

Doing so should prompt you to connect your wallet. After that is done you can click the “Deploy” button and sign the transaction with your wallet.

If successful you should see a contract listed under “Deployed Contracts” with a toggle to expand it and see all the different functions.

We’re going to use the safeMint function, and if you click the toggle button for that you will see it takes two arguments: a wallet address the NFT will be sent to, and the Token URI for the NFT. URI stands for “Unified Resource Identifier,” which is exactly what that metadata.json file does that we uploaded to Pinata earlier. To reference it we’ll use the IPFS protocol URI which looks something like this.

When we put our CID in the place holder and combine it with our wallet address, it will look something like this.

After those two fields are filled you can go ahead and click the “Transact” button and it will prompt your wallet for a signature.

If successful you should see a checkmark in the bottom log, and you can visit, connect your wallet there, and see the NFT that was just minted.

Create an ERC-6551 Token Bound Account for your NFT

We won’t go into this step as it’s pretty simple. For a full guide check out either this blog post which is a quick no code solution, or follow the following video that will show you how to deploy ERC-6551 smart contracts yourself for a more technical approach.

In essence you will need to create a Token Bound Account (TBA) for the NFT in question so we can use it in the ERC-6551 iFrame.

It also would be beneficial to send your new TBA some assets like a testnet currency or some NFTs. In our example we’ll send it this fun ERC-1155 NFT of some Pinata clouds.

Create the ERC-6551 iFrame

Since this is such a new standard for NFTs there aren’t really any marketplaces that will be able to show and render if an NFT has a Token Bound Account or if that account has any assets. That’s where the ERC-6551 iFrame comes into play.

A way around this problem of not being able to show off TBAs is to use the `animation_url` property in the NFT metadata standards. Just like how we can provide an image link for an NFT, with the animation_url we can use a link to a video, an audio file, or even a whole application.

Pinata has mentioned these possibilites before with the concept of App NFTs, and in a way the ERC-6551 will let you implement an app into your NFT to give it enhanced display powers.

Setting up your iFrame will be pretty simple. We’ll be using GitHub and Vercel to deploy this iFrame, but feel free to use the repo in whatever services or frameworks you feel comfortable with.

The first thing you will need is an Alchemy API key. You can get this by visiting and signing up for a free account. Once you are signed in you will want to visit the Apps page by clicking on the left sidebar, then click on “Create New App.”

From there you will want to select the blockchain and network you want to use. For this one we can simply do the Ethereum blockchain using the Göerli testnet, give it a name and description, and click “Create App.”

Once created you will want to click on the “API Key” button from the app dashboard and keep it somewhere safe.

Now that we have our API key we can start preparing the iFrame. Visit the Tokenbound iFrame repo on GitHub and fork it with your own account.

Once it’s forked you can head over to Vercel. If you don’t already have an account you can create a free one and connect your GitHub account. From the main screen you will want to click “Add new…” and select “Project.”

If your GitHub is connected you should see your fork of the Tokenbound iFrame listed where you can select “Import.”

Before you deploy, you will want to paste in a few important environment variables, including the API keys you received earlier. In the repo there is an <span class="code-inline">.env.example</span> file that has the following information.


The only one you need to worry about is the the <span class="code-inline">NEXT_PUBLIC_ALCHEMY_KEY</span>.Paste in the API keys, and the beauty of Vercel is you can copy the whole <span class="code-inline">.env</span> file contents, click on the “Environment Variables” tab, select the first row, and just paste.

It will automatically fill out all the details from the file so you don’t have to go back and forth. Once that’s done you can hit “Deploy.”

After its complete you will see a dashboard with the URL of the project. With it you can start trying out the iFrame by simply following this pattern:<contractAddress>/<tokenId>/<<chainId><chainId>

The subdomain of your Vercel app will depend on what you set it as or what it automatically gave you, but feel free to customize it or use a custom domain to match your project branding.

To use it just add on the contract address for the NFT you minted earlier, the token ID, and the chain ID which in this case will be 5 for Göerli. The result should look something like this.

Update Token URI

Now that we have an app running our ERC-6551 iFrame, we can add it into our NFT metadata. For this step you will want to open that metadata.json file again and add a new line called `animation_url` like so.

  "name": "Name of NFT",
  "description": "Description of NFT",
  "external_url": "",
  "image": "ipfs://CID_GOES_HERE",
  "animation_url": ""

You will want to upload this new updated metadata CID to Pinata just like you did before and you will receive a new CID.

Take that CID and go back to the smart contract in Remix, and look for that custom function we made called `setTokenURI.` It’s really simple, all we need to do is provide the token ID for the NFT that we’re going to update, and then provide the new CID for the metadata.json file.

Go ahead and submit the transaction and sign it with your wallet, and if successful we should be all set.

Now you can go back to OpenSea and request them to update the metadata, which will cause them to reindex that particular NFT smart contract. After a few minutes it should update and show the ERC-6551 iFrame instead of just the NFT image!

That wraps up this guide on how to use ERC-6551 iFrames, but it’s truly only the beginning. By using the basics in the iFrame you could build out your own applications that interact with Token Bound Accounts, like a game that has an NFT character with an interactive inventory, or a music album with multi media inside of it.

Now it’s your turn! Grab your Pinata account and give this tutorial a try. We’re excited to see what developers will create with this new Ethereum standard!



H2 - Enabling Widespread Adoption for Music NFTs

paragraph — The first thing the music industry needs is more exposure. For artists, listeners and yeah, the labels. Even with the use cases mentioned above, the majority of the music industry still sees NFTs as a novelty rather than a legitimate way to run a business. We see a future where the experience is built and monetized on the blockchain, with labels taking part of the experience, as well.

Second, there needs to be a big jump in user experience. Listeners know what to expect with Spotify and Apple Music: a smooth, intuitive experience that lets them listen to Lil Nas X with just a few clicks. Web3 platforms aren’t quite there. Music NFTs and related premium content require extra steps that most people don’t yet have an appetite for.

H3 - How Could Music NFTs Save Artists?

paragraph — Musician Daniel Allan spent months building a relationship with the NFT community and raised 50 ETH to fund his new album, Overstimulated. Companies like Audius and artists like Vérité's, who raised $90,000 in an NFT launch, are at the forefront of exploring new ways to get paid. Avenged Sevenfold launched an NFT collection called "Deathbats Club" with 10,000 items that grants holders access to benefits such as meet and greets at shows, lifetime free tickets, limited edition merchandise, and more.

Photo of ETHDenver 2022 with Pinata employees
This can also be styled!! Image caption.

H4 - Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

H5 — How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

LINK — This is how a link looks like. Please provide normal & hover state (if different than this)

  • This will be bullet points
  • Numbered list is the same but with numbers
  • It has a margin-left applied
  1. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  2. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  3. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
QUOTE — Everyone is obsessed with making money and seeking alpha, which does a disservice to what [NFTs] can actually do. We have been instructing many bands that NFTs are a ticket for access to an exclusive club.” - M. Shadows, Avenged Sevenfold’s lead singer.