WebsiteLaunch AppSign UpDiscord

⏳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:

  • 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 ButtonNextDrops

Last updated