# NiftyKit Diamond Widgets

### 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.0](https://docs.walletconnect.com/2.0).

### 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.

### Getting Started

The fastest way to get started is to leverage our [Widget Builder](/customize-your-experience/niftykit-diamond-widgets/widget-builder.md), 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](/customize-your-experience/niftykit-diamond-widgets/installation-guides.md) 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:

```html
<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:

{% code lineNumbers="true" %}

```html
<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>
```

{% endcode %}

The result should look like this:

{% embed url="<https://codepen.io/tpae/pen/WNavQNB>" %}
Please note the example widget is referencing testnets, but we currently don't support testnets for our customers. We apologize for the inconvenience.
{% endembed %}

#### How do I get my SDK Public Key?

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

### 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.

{% embed url="<https://github.com/niftykit-inc/niftykit-sdk/tree/main/packages/widgets>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.niftykit.com/customize-your-experience/niftykit-diamond-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
