⏳Countdown Timer

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

Access Your Website's HTML: Open the HTML file of your website where you want to integrate the countdown timer.
Get the following details of your drop:

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.
Scroll down and go to click more
Click Decode Data
Copy Collection ID

Need help with your collection details? Email us at support@niftykit.com or directly ask for help in our chat support on our website.

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>

PreviousConnect Wallet Button NextDrops

Last updated 4 hours ago