Links

Install for Squarespace

Learn how to install the DropKit SDK for Squarespace.
👉
See Example | Password: dropkit
Sorry, Mint on your Website is not yet available for v7 contracts, launched on and after March 14, 2023).

What we will do:

  1. 1.
    Create a Squarespace form
  2. 2.
    Create a select box for Mint quantity
  3. 3.
    Add the DropKit.js code snippet to webpage
  4. 4.
    Configure the code for your drop
  5. 5.
    Test the mint button with Metamask

Create Squarespace form for minting

  1. 1.
    Add a new Form
  2. 2.
    Add new selectbox field
  3. 3.
    Add number options for max amount per mint
  4. 4.
    Delete all other unused fields
  5. 5.
    Update Button to Mint Now

Add code block

  1. 1.
    Add the following code below
  2. 2.
    Add your API key in the code
  3. 3.
    Change the #select-66d9bccf-4c7a-4ac7-9266-629d3a8135a5-field to the id of your selectbox
<script async src="https://unpkg.com/dropkit.js/dist/umd/index.js"></script>
<script>
document.addEventListener('click', async function (event) {
if (!event.target.matches('input.button.sqs-system-button.sqs-editable-button.sqs-button-element--primary')) return;
event.preventDefault();
try {
const drop = await DropKit.create('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'); // Supply SDK key
await drop.mint(Number($("#select-66d9bccf-4c7a-4ac7-9266-629d3a8135a5-field").val())); // Number of NFTs to mint
alert("Success!");
} catch (err) {
alert(err.message);
}
}, false);
</script>

Test Your Mint Button

  1. 1.
    Copy the URL of your website
  2. 2.
    Paste URL inside of Metamask mobile or Desktop browser with Metamask enabled
  3. 3.
    Check mobile and desktop browsers
  4. 4.
    Make sure you are on presale to mint or that your drop sale is on
  5. 5.
    If it doesn’t work, ensure that your IDs and classes are correct

Alternative method: Using the embeddable widget.

1. Add a "Code" Block

2. Embed the following snippet within your Code Block

<script type="module" src="https://unpkg.com/@niftykit/components/dist/components/components.esm.js">
</script>
<nk-dropkit apikey="YOUR-SDK-KEY">
</nk-dropkit>
Be sure to replace YOUR-SDK-KEY with your SDK key.

3. Save your changes