🔲Drop Mint Button

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 Is Connected 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-drop-mint-button success-title="Success!" success-message="You did it!">
      Mint NFT
    </nk-drop-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-drop-mint-button success-title="Success!" success-message="One of US!">
      All Systems Go
    </nk-drop-mint-button>
  </nk-is-connected>
</nk-diamond>

Codepen