# Install for Webflow

This tutorial will show you how to install the NiftyKit Diamond Widgets button on your Webflow website. Here's a basic example to view before getting started: <https://dropkit-883093.webflow.io/>.

To begin, make sure you're in the Webflow website builder.

### 1. Click on "Add Elements"

Within the Webflow left-side menu, click on the button labled **"Add Elements"**

![Webflow Builder](https://3542085034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyrUuRLqblqKRfJtuslV7%2Fuploads%2FHr2jbfEjBOcgxs44F23p%2Fimage.png?alt=media\&token=6aa24826-56ba-49f5-8da7-5749aece0fa2)

### 2. Click on "Embed"

Under the Components dropdown, select **"Embed \</>"**

![Webflow Builder](https://3542085034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyrUuRLqblqKRfJtuslV7%2Fuploads%2FlkNtwrz66UVmxxyn5KBp%2Fwebflow-builder2.png?alt=media\&token=1563abaa-46e3-41b7-93f9-ec7132c6abb2)

### 3. Add the NiftyKit Diamond Widget code snippet

Add the following code snippet within the embed editor:&#x20;

```html
<!-- Import NiftyKit Widgets library -->
<script type="module" src="https://sdk.niftykit.com/widgets/widgets.esm.js"></script>

<style>
</style>

<nk-diamond collection-id="YOUR-SDK-KEY">
  <nk-is-not-connected>
    <nk-connect-wallet-button>
      Connect Wallet
    </nk-connect-wallet-button>
  </nk-is-not-connected>
  <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>
```

Be sure to replace `YOUR-SDK-KEY` with your SDK key.

### 4. Publish Your Site

Your widget will be visible when you publish your site.&#x20;