> For the complete documentation index, see [llms.txt](https://docs.niftykit.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.niftykit.com/customize-your-experience/niftykit-diamond-widgets/installation-guides/install-for-webflow.md).

# 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](/files/NtS09Srni8ljpZG2slpN)

### 2. Click on "Embed"

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

![Webflow Builder](/files/4dyCQb86PZwqIp8JiEkX)

### 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;