Embed

Attention

You can mint the Sample NFT (on Polygon) first if you would like to unlock the NFT used on this page as an example.

You can embed our viewer directly on your website or use this embed and pass in NFT specific variables.

Supported blockchains:

  • Ethereum
  • Polygon
  • Avalanche
  • Tezos
  • Solana (Solflare wallet only)

The embed code below can be pointed at a particular NFT with two bits of information. 

  • The contract address
  • The NFT ID 

Both pieces of data can be found in the URL on the Darkblock web app, for instance, the NFT linked here.  You can see the same NFT on OpenSea here.

Contract address Token Id
0x9f2c7b6181814e241c47d7c7cef789e7ecab759c 1

Just take the contractAddress:tokenId and append to the URL in the iframe code, and you can display the Darkblock viewer on your site.

This same embed code can work for different chains with just a slight modification.  Change the /eth/ in the path name to /sol/ for Solana, /matic/ for Polygon, /avax/ for Avalanche, and /tez/ for Tezos.

We have three different no-code embeds available. Each one with slightly different functionality to give you flexibility.

Viewer Embed

This no-code embed shows the viewer and authentication flow. All that is needed is the platform (or chain) and contract address + token ID. Note the "embed/viewer" in the iframe.

Copy
Copied
<iframe 
    style="border: none; height: 387px; width: 100%; border-radius: 8px;"
    title="darkblock" 
    src="https://app.darkblock.io/platform/##PLATFORM##/embed/viewer/##CONTRACT ADDRESS##/##NFT ID##">
</iframe>

Viewer Embed + Add Content Button

This no-code embed shows the viewer, authentication flow and the "Add Content" button. This button allows NFTs created by the connected wallet to add additional unlockables. Note the "embed/add" in the iframe.

Copy
Copied
<iframe 
    style="border: none; height: 435px; width: 100%; border-radius: 8px;"
    title="darkblock" 
    src="https://app.darkblock.io/platform/##PLATFORM##/embed/add/##CONTRACT ADDRESS##/##NFT ID##">
</iframe>

NFT Thumbnail + Viewer Embed

This no-code embed shows the viewer, authentication flow and NFT name + thumbnail information. In some cases the use of our embed might not have NFT data readily available on the page, so by providing the NFT name, thumbnail and additional metadata, it gives you layout options. Note the "embed/nft" in the iframe.

Copy
Copied
<iframe 
    <iframe 
    style="border: none; height: 540px; width: 100%; border-radius: 8px;"
    title="darkblock"  
    src="https://app.darkblock.io/platform/##PLATFORM##/embed/nft/##CONTRACT ADDRESS##/##NFT ID##">
</iframe>