NiftyKit Docs
WebsiteLaunch AppSign UpDiscord
  • Get Started
    • Introduction
    • Web3 and NFT Basics
    • Getting Started
      • Platform Overview
      • NiftyKit Demo Collection
      • Generating Assets
      • NiftyKit Creator Public Profile
      • File Asset, Size, and Requirements
      • Art Generator Asset Guidelines
    • Pricing
  • NFT Collections
    • What is an NFT Collection?
    • Minting 101
      • Creating Your Own NFT Collection
      • Minting Drop & Dynamic NFTs
      • Airdropping NFTs
      • Minting Open & Limited Editions
    • Collaborations & Shared Collections
      • Revenue Split
        • Split with The Giving Block (Donations Partner)
        • Withdraw Your Revenue Splits
    • Collection Management
      • Importing Assets & Metadata
      • Sales Management
      • Reveal Management
        • Pre-Reveal Placeholder
        • Revealing Your Metadata
      • Post-Drop Management
        • Withdrawing Your Funds
        • Renouncing Your Contract
        • Transfer Ownership of Contract
    • Listing NFTs for Sale
      • Waitlist Management
      • Presale Management
      • Public Sale Management
    • Our Smart Contracts
      • Perfect Abstractions Audit
      • Diamond Smart Contracts
      • Royalties
        • Updating Operator Filter (Blocking Blur and OpenSea)
        • Setting Royalties on NFT Marketplaces
      • Migrating Your Smart Contract to NiftyKit
    • Analytics
    • Troubleshooting
  • Customize Your Experience
    • Introduction
    • NiftyKit Diamond Widgets
      • Available Widgets
        • 🔲Connect Wallet Button
          • ⏳Countdown Timer
        • Drops
          • 🔲Drop Mint Button
          • 🔤Drop Mint Supply Text
          • 🔤Drop Mint Price Text
        • Editions
          • 🔲Edition Mint Button
          • 🔤Edition Mint Supply Text
          • 🔤Edition Mint Price Text
        • Utilities
          • 🛠️Is Connected
          • 🛠️Is Not Connected
          • 🛠️Is Holder
      • Widget Builder
      • Installation Guides
        • 📰Install for WordPress
        • 🌊Install for Webflow
        • 🖌️Install for Wix
        • ◻️Install for Squarespace
    • Available Apps
      • NFT Generator Desktop App
      • Pay What You Want App
      • Crossmint App: Credit Card Minting
      • Augmented Reality App (Token Access)
      • Accept ERC-20
        • Custom ERC-20
      • Generative Collection
      • Soulbound Token
      • Share To Earn
      • ApeCoin
      • Royalty Update
      • Submit an App Request
    • Token Access In Collections
    • Integrate Credit Card Minting
      • Drop Collection Credit Card Integration
      • Edition Collection Credit Card Integration
    • Migrating Your Smart Contract to NiftyKit (via Airdrop)
    • NiftyKit Integration with Farcaster Frames
  • Community
    • Community Guidelines
    • FAQ
    • Meet the Team
    • Contact Info
  • Updates and Changelog
    • Security Report
    • Deprecated features
Powered by GitBook
On this page
  • Introduction
  • Web Components
  • Getting Started
  • Contributing

Was this helpful?

  1. Customize Your Experience

NiftyKit Diamond Widgets

Embedding NFT features on your website

PreviousIntroductionNextAvailable Widgets

Last updated 1 year ago

Was this helpful?

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 .

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 , 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 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:

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.

WalletConnect 2.0
Widget Builder
Installation Guides
Please note the example widget is referencing testnets, but we currently don't support testnets for our customers. We apologize for the inconvenience.
niftykit-sdk/packages/widgets at main · niftykit-inc/niftykit-sdkGitHub
Logo