NiftyKit Diamond Widgets
Embedding NFT features on your website
NiftyKit Diamond Widgets are Web Components designed to help users create the perfect mint page. It's flexible, modern browser compatible, and it ships with the latest WalletConnect 2.0.
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards will work across modern browsers and can be used with any JavaScript library or framework that works with HTML.
You can embed the components in any environment, including web and mobile, and use frameworks like React, Vue, and more. Web Components work natively with a browser with minimal dependencies.
The fastest way to get started is to leverage our Widget Builder, which will allow you to customize the mint button and give you a copy-paste code to put on your website. You can also check out our Installation Guides to integrate existing no-code tools.
If you are interested in implementing the widgets on your own, you can get started by adding this code to your website:
<script type="module" src="https://sdk.niftykit.com/widgets/widgets.esm.js"></script>
We recommend putting it in
<head> or anywhere before the first widget component is called.Once the script tag has been added, you can add the following HTML anywhere on your page:
1
<nk-diamond collection-id="Your-SDK-Public-Key">
2
<nk-connect-wallet-button>
3
Connect Wallet
4
</nk-connect-wallet-button>
5
<nk-is-connected>
6
<h3>
7
<nk-drop-supply-text /> Minted
8
</h3>
9
<nk-drop-mint-button success-title="Success!" success-message="You did it!">
10
Mint NFT
11
</nk-drop-mint-button>
12
</nk-is-connected>
13
</nk-diamond>
The result should look like this:
Please note the example widget is referencing testnets, but we currently don't support testnets for our customers. We apologize for the inconvenience.
You can click the [...] menu in your Collection Dashboard and access it via SDK Public Key.
Our widgets are constantly improving with new features. Our widgets are open source, and we encourage our community members to help contribute to building a better widget ecosystem.
Last modified 1mo ago