Skip to main content

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 addressToken Id
0x9f2c7b6181814e241c47d7c7cef789e7ecab759c1

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.

Passing Signature as a Query Parameter​

The Darkblock embed allows for a signature to be generated externally and passed in as a query parameter. This offers more control over the signing process and allows the embed to be used without having the user sign a message directly in the embed.

You can pass in the signature by appending it to the URL in the iframe code as a query parameter. Here is an example of how to do it:

<iframe
    allow="fullscreen"
    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##?signature=##SIGNATURE##">
</iframe>

In the above example, replace ##SIGNATURE## with the generated signature.

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.

<iframe
    allow="fullscreen"
    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.

Embed with add content button

<iframe
    allow="fullscreen"
    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.

<iframe
    allow="fullscreen"
    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>

Please make sure to replace ##PLATFORM##, ##CONTRACT ADDRESS##, ##NFT ID##, and ##SIGNATURE## with the appropriate values based on your use case.