Install for Squarespace
Learn how to install the DropKit SDK for Squarespace.
👉
See Example | Password: dropkit

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
1
<script async src="https://unpkg.com/dropkit.js/dist/umd/index.js"></script>
Copied!
1
<script>
2
document.addEventListener('click', async function (event) {
3
if (!event.target.matches('input.button.sqs-system-button.sqs-editable-button.sqs-button-element--primary')) return;
4
event.preventDefault();
5
6
try {
7
const drop = await DropKit.create('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'); // Supply SDK key
8
await drop.mint(Number($("#select-66d9bccf-4c7a-4ac7-9266-629d3a8135a5-field").val())); // Number of NFTs to mint
9
alert("Success!");
10
} catch (err) {
11
alert(err.message);
12
}
13
}, false);
14
</script>
Copied!

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

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

3. Save your changes