# Countdown  Timer

Follow these steps to integrate the countdown timer widget into your website:

1. **Access Your Website's HTML:** Open the HTML file of your website where you want to integrate the countdown timer.
2. **Get the following details of your drop:**&#x20;

* [ ] Collection mint page URL: i.e <https://app.niftykit.com/collections/base-diamonds>
* [ ] **Collection ID:** To get your collection ID:

- Go to your contract creation txn. This can be accessed in your etherscan.&#x20;
- &#x20;Scroll down and go to click more
- Click Decode Data
- Copy Collection ID

{% hint style="info" %}
Need help with your collection details? Email us at <support@niftykit.com> or directly ask for help in our chat support on our website.&#x20;
{% endhint %}

<br>

**3, Copy the Code, and Find and Replace it with Your Collection Details:**

```
<!DOCTYPE html>
<html>
<head>
    <title>Countdown Timer</title>
    <style>
        body {
            font-family: "DM Sans", sans-serif;
        }

        .mint-price {
            align-items: center;
        }

        nk-connect-wallet-button::part(wallet-btn-container) {
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        nk-connect-wallet-button::part(wallet-btn) {
            width: auto;
            height: auto;
            background: #fff;
            border-radius: 80px;
            font-size: 16px;
            padding: 10px 40px;
            color: #000;
        }

        nk-drop-mint-button::part(mint-btn-container) {
            max-width: 200px;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        nk-drop-mint-button::part(mint-btn) {
            height: 40px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid #fff;
        }

        nk-drop-mint-button::part(mint-text) {
            font-size: 14px;
            color: #000;
        }

        nk-drop-mint-button::part(mint-dropdown-icon) {
            width: 32px;
            height: 32px;
            fill: #000;
        }

        #countdownTimer {
            margin-top: 10px; /* Reduced spacing between button and text */
        }
    </style>
</head>
<body>
    <div class="framer-10k6086-container">
        <div style="width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center">
            <script type="module" src="https://sdk.niftykit.com/widgets/widgets.esm.js"></script>

            <nk-diamond collection-id="clrjmbjbv0001109jmix9erk4" class="hydrated">
                <nk-connect-wallet-button class="hydrated">
                    Connect Wallet
                </nk-connect-wallet-button>
                <nk-drop-supply-text>
                    minted / OE <span id="countdownTimer">[Limited Time]</span>
                </nk-drop-supply-text>
                <nk-is-connected class="hydrated">
                    <nk-drop-mint-button success-title="Success!" success-message="You did it! View your Base NFT" success-link="https://app.niftykit.com/collections/base-diamonds" success-link-text="NOW" class="hydrated">
                        Mint NFT
                    </nk-drop-mint-button>
                </nk-is-connected>
            </nk-diamond>
        </div>
    </div>

    <script>
        function updateCountdown() {
            var countdown = document.getElementById("countdownTimer");
            var now = new Date().getTime();
            var countdownDate = new Date("January 28, 2024 10:00:00 PST").getTime();
            var timeLeft = countdownDate - now;

            var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            countdown.innerHTML = "[" + days + "d " + hours + "h " + minutes + "m " + seconds + "s" + "]";

            if (timeLeft < 0) {
                clearInterval(interval);
                countdown.innerHTML = "[SOLD OUT]";
            }
        }

        var interval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.niftykit.com/customize-your-experience/niftykit-diamond-widgets/available-widgets/connect-wallet-button/countdown-timer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
