search
Ctrlk
WebsiteLaunch AppSign UpDiscord

NiftyKit Diamond Widgets

Embedding NFT features on your website

hashtag
Introduction

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.0arrow-up-right.

hashtag
Web Components

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.

hashtag
Getting Started

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:

<nk-diamond collection-id="Your-SDK-Public-Key">
  <nk-connect-wallet-button>
    Connect Wallet
  </nk-connect-wallet-button>
  <nk-is-connected>
    <h3>
      <nk-drop-supply-text /> Minted
    </h3>
    <nk-drop-mint-button success-title="Success!" success-message="You did it!">
      Mint NFT
    </nk-drop-mint-button>
  </nk-is-connected>
</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.

hashtag
How do I get my SDK Public Key?

You can click the [...] menu in your Collection Dashboard and access it via SDK Public Key.

hashtag
Contributing

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.

Logoniftykit-sdk/packages/widgets at main · niftykit-inc/niftykit-sdkGitHubchevron-right
PreviousIntroductionNextAvailable Widgets

Last updated