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
  • Getting Started
  • Code
  • Codepen

Was this helpful?

  1. Customize Your Experience
  2. NiftyKit Diamond Widgets
  3. Available Widgets
  4. Editions

Edition Mint Button

PreviousEditionsNextEdition Mint Supply Text

Last updated 1 year ago

Was this helpful?

Getting Started

Please be sure to have the following snippet in the head or upper portion of your HTML:

<script type="module" src="https://sdk.niftykit.com/widgets/widgets.esm.js"></script>

Mint Buttons require users to connect their wallet first.

We can leverage utility component to hide the Mint Button until the user has connected their wallet.

Code

<nk-diamond collection-id="Your-SDK-Public-Key">
  <nk-connect-wallet-button>
    Connect Wallet
  </nk-connect-wallet-button>
  <nk-is-connected>
    <nk-edition-mint-button edition-id="Your-Edition-Id" success-title="Success!" success-message="You did it!">
      Mint NFT
    </nk-edition-mint-button>
  </nk-is-connected>
</nk-diamond>

You can change the copy of the button by changing the content of the <nk-drop-mint-button> as well as success-title , success-message for the confirmation modal at the end.

<nk-diamond collection-id="Your-SDK-Public-Key">
  <nk-connect-wallet-button>
    Connect To Metaverse
  </nk-connect-wallet-button>
  <nk-is-connected>
    <nk-edition-mint-button edition-id="Your-Edition-Id" success-title="Success!" success-message="One of US!">
      All Systems Go
    </nk-edition-mint-button>
  </nk-is-connected>
</nk-diamond>

Codepen

🔲
Is Connected