# 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="" %} ## Godot games & apps -> iNFTs Read our medium article on how to turn a Gotdot game or app into an iNFT fully compatible with Paintswap. {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.paintswap.io/nft-marketplace-1/minting/interactive-nfts.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.