Countdown Timer
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
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>