darkblock-logo
Darkblock Docs
darkblock-logo
Darkblock Docs
Developer Integration

Embed Darkblocks into any website

NPM
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
NPM package found here
⁠
, 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
Enables consumption of content for a single NFT
Meant for individual NFTs
Great for marketplaces with NFT details pages
Good to ERC-1155 tokens, where you are selling many editions of the same NFT
Collection Level Viewer
Enables consumption of content attached to any NFT within a collection a user has access to via the NFTs they own
Great for creators that want to enable access to content to anyone that owns an NFT from their collection
Good for marketplaces with collection details pages
Not so good for ERC-1155 which may have multiple logical collections

Supported blockchains:
Ethereum
Polygon
Avalanche
Tezos
Solana
PulseChain
Base
Optimism

NFT Level Embeds

The NFT level embed code below can be pointed at a particular NFT with two bits of information.
The contract address (not required for Solana)
The token 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.
⁠
⁠

Example

⁠
Load content from app.darkblock.io?
Loading external content may reveal information to 3rd parties. Learn more
Allow
⁠
⁠
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.
Platform (Chain)
##PLATFORM## in URL
1
Ethereum
eth
2
Polygon
matc
3
Avalanche
avax
4
Solana
sol
5
Tezos
tez
6
Pulse
pulse
7
Base
base
8
Optimism
optimism
There are no rows in this table
⁠

##CONTRACT ADDRESS##/##TOKEN ID## example

##CONTRACT ADDRESS##
##TOKEN ID##
1
0x9f2c7b6181814e241c47d7c7cef789e7ecab759c
1
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 only (example above)
Viewer + Add Content button
Viewer with NFT/Collection metadata (thumbnail, name and description)

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
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.
⁠
Load content from app.darkblock.io?
Loading external content may reveal information to 3rd parties. Learn more
Allow
⁠
⁠
<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.
⁠
Load content from app.darkblock.io?
Loading external content may reveal information to 3rd parties. Learn more
Allow
⁠
⁠
That might be a little confusing, so it might help to explain the process the collection level embeds use:
User connects wallet
Darkblock scans for all NFTs owned by the user for a particular NFT collection
Darkblock scans for all content connected to these NFTs
The viewer displays a list of all the content
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,
please contact us in our discord
⁠
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>

In the above example, replace ##SIGNATURE## with the
generated signature.
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.