Darkblock Docs
Pages
Developer Integration
Embed Darkblocks into any website
The Darkblock Viewer is a javascript widget that enables you to embed the Darkblock unlocking experience into any website. You can integrate the viewer with our, or you can use our live embed code (a la YouTube) found on this page.
There are two basic types of viewers that enable you to embed, an NFT level viewer and a collection level viewer. Here is some info to help you choose the right viewer:
NFT Level Viewer
Collection Level Viewer
Supported blockchains:
NFT Level Embeds
The NFT level embed code below can be pointed at a particular NFT with two bits of information.
Both pieces of data can be found in the URL on the Darkblock web app, for instance, the . You can see the same
Example
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 URL in the iframe.
<iframe
title="darkblock"
allow="fullscreen"
style="
border: none;
height: 468px;
width: 100%;
border-radius: 8px;"
src="https://app.darkblock.io/platform/##PLATFORM##/embed/viewer/##CONTRACT ADDRESS##/##TOKEN ID##">
</iframe>
##PLATFORM##
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.
There are no rows in this table
##CONTRACT ADDRESS##/##TOKEN ID## example
There are no rows in this table
Just take the contractAddress/tokenId and append to the URL in the iframe code, and you can display the Darkblock viewer on your site.
Embed Options
We have three different no-code embeds available. Each one with slightly different functionality to give you flexibility.
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.
<iframe
title="darkblock"
allow="fullscreen"
style="
border: none;
height: 485px;
width: 100%;
border-radius: 8px;"
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, descritpion and thumbnail. 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
title="darkblock"
allow="fullscreen; clipboard-write;"
style="
border: 1px solid var(--border-neutral-300, #d4d4d4);
padding: 16px;
height: 628px;
width: 100%;
border-radius: 8px;
box-sizing: border-box;"
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.
Collection Level Embeds
If you want to embed one viewer on your website that enables an NFT owner to connect and view content from any of the NFTs they own within a particular collection, this is the viewer for you! The content can be collection level upgrades, with or without traits, individual upgrades of NFTs within the collection, or any combination of the above.
That might be a little confusing, so it might help to explain the process the collection level embeds use:
The only difference between the embed types is the source url, for collection level we need to adjust it slightly:
<iframe
title="darkblock"
allow="fullscreen; clipboard-write;"
style="
border: 1px solid var(--border-neutral-300, #d4d4d4);
padding: 16px;
height: 628px;
width: 100%;
border-radius: 8px;
box-sizing: border-box;"
src="https://app.darkblock.io/platform/##PLATFORM##/embed/collection/##CONTRACT ADDRESS##"
</iframe>
Note: the collection level embeds are only available for EVM chains currently. If you need this functionality for another chain, to request the feature!
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
title="darkblock"
allow="fullscreen; clipboard-write;"
style="
border: 1px solid var(--border-neutral-300, #d4d4d4);
padding: 16px;
height: 628px;
width: 100%;
border-radius: 8px;
box-sizing: border-box;"
src="https://app.darkblock.io/platform/##PLATFORM##/embed/nft/##CONTRACT ADDRESS##/##NFT ID##?signature=##SIGNATURE##">
</iframe>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.