> For the complete documentation index, see [llms.txt](https://docs.paintswap.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.paintswap.io/nft-marketplace-1/minting/interactive-nfts.md).

# Interactive NFTs

## What is an Interactive NFT

A regular NFT is based on predictable static or dynamic content such as images, animated images, audio files or videos. In contrast, an interactive NFT (**iNFT**) usually refers to web content of some kind, that changes based on your inputs. It can feature almost anything supported by a web browser. For example, a game, an app, tool or why not interactive art or music? Only the sky is the limit here.

The interaction is limited to what is supported by the main website.

## Interactive NFTs at Paintswap

At Paintswap we run the iNFT in a sandboxed *iframe* which allows scripts and forms, but not popups or access to web extensions. The NFT content is typically an html file that can contain CSS, SVG, JavaScript, Base64 encoded image URLs and more.

### Creating an Interactive NFT

You can create your own contract/collection or mint iNFTs directly on Paintswap.

{% content-ref url="/pages/-Mg-fgCW0yUxskBKCcJp" %}
[Creating NFTs](/nft-marketplace-1/minting.md)
{% endcontent-ref %}

If minting outside Paintswap, just make sure to stick to the metadata standard.

{% content-ref url="/pages/zBxzscMG4nNpHDuxTaZp" %}
[Metadata](/nft-marketplace-1/minting/metadata.md)
{% endcontent-ref %}

### Paintswap metadata injection

Part of the NFT metadata is injected into the *iframe* as a global variable, meaning anything your NFT contains in its metadata can be accessed within the iNFT code itself.

In the iNFT javascript code, the injected metadata can be accessed as such:

```javascript
var metadata = window?.context?.nftData?.metadata
```

For a list of the supported metadata which will be injected see the [Standard Metadata](/nft-marketplace-1/minting/metadata.md#standard-metadata) page. In addition, the `properties` field is also injected.

The properties can further enhance the iNFT as part of a collection where you want to use the same code for all NFTs but have it act differently depending on which NFT (tokenID) is loaded.

`nftData.metadata.properties` | json dictionary {} containing any other structure

Also exposed on the `window.context`:

* `nftData.address` | contract address
* `nftData.tokenId`| contract token ID
* `nftData.paintswap.soldAmounts` | e.g. `["3", "1", "10"]` (important for ERC1155)
* `nftData.paintswap.soldPrices` | in the `wei` unit
* `nftData.paintswap.soldTimestamps` | as unix epoch in seconds
* `nftData.paintswap.history` | an array with marketplace events
* `nftData.paintswap.onSale` | true or false if the asset is on sale

### Designing Interactive NFT

Paintswap uses a responsive design. To get the best out of your iNFT, make sure to do the same. A good practice is using width and height as 100% of the root component instead of fixed pixels. The *iframe* should be able to change size without destroying your work. You can validate it on the minting page where there also is a button to expand the view.

**Paintswap only supports a single HTML page** so if you have several files you need to find a way to combine them. If you have a React app, there are different ways to do that. See this: 

{% embed url="<https://stackoverflow.com/a/69594493>" %}

## Godot games & apps -> iNFTs <a href="#f6ba" id="f6ba"></a>

Read our medium article on how to turn a Gotdot game or app into an iNFT fully compatible with Paintswap.

{% embed url="<https://medium.com/paint-swap-finance/turning-godot-games-apps-into-infts-on-paintswap-a40009dd0399>" %}