← All Scripts

#9 - Real, User Based Countdown v0.1

Dynamically set a per-user countdown time and then hide elements when time is up.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo

// Step 1: Get the current date and time
const currentDate = new Date();

// Step 2: Calculate the new date and time based on the attribute values
const addTime = (date, unit, value) => {
  const newDate = new Date(date);
  switch (unit) {
    case 'hour':
      newDate.setHours(newDate.getHours() + value);
    case 'minute':
      newDate.setMinutes(newDate.getMinutes() + value);
    case 'second':
      newDate.setSeconds(newDate.getSeconds() + value);
    case 'millisecond':
      newDate.setMilliseconds(newDate.getMilliseconds() + value);
  return newDate;

// Retrieve attribute values and calculate the new date and time
const hourAttr = document.querySelector('[ms-code-time-hour]');
const minuteAttr = document.querySelector('[ms-code-time-minute]');
const secondAttr = document.querySelector('[ms-code-time-second]');
const millisecondAttr = document.querySelector('[ms-code-time-millisecond]');

const countdownDateTime = localStorage.getItem('countdownDateTime');
let newDate;

if (countdownDateTime) {
  newDate = new Date(countdownDateTime);
} else {
  newDate = currentDate;
  if (hourAttr.hasAttribute('ms-code-time-hour')) {
    const hours = parseInt(hourAttr.getAttribute('ms-code-time-hour'));
    newDate = addTime(newDate, 'hour', isNaN(hours) ? 0 : hours);
  if (minuteAttr.hasAttribute('ms-code-time-minute')) {
    const minutes = parseInt(minuteAttr.getAttribute('ms-code-time-minute'));
    newDate = addTime(newDate, 'minute', isNaN(minutes) ? 0 : minutes);
  if (secondAttr.hasAttribute('ms-code-time-second')) {
    const seconds = parseInt(secondAttr.getAttribute('ms-code-time-second'));
    newDate = addTime(newDate, 'second', isNaN(seconds) ? 0 : seconds);
  if (millisecondAttr.hasAttribute('ms-code-time-millisecond')) {
    const milliseconds = parseInt(millisecondAttr.getAttribute('ms-code-time-millisecond'));
    newDate = addTime(newDate, 'millisecond', isNaN(milliseconds) ? 0 : milliseconds);

  localStorage.setItem('countdownDateTime', newDate);

// Step 4: Update the text of the elements to show the continuous countdown
const countdownElements = [hourAttr, minuteAttr, secondAttr, millisecondAttr];

const updateCountdown = () => {
  const currentTime = new Date();
  const timeDifference = newDate - currentTime;

  if (timeDifference > 0) {
    const timeParts = [
      Math.floor(timeDifference / (1000 * 60 * 60)) % 24, // Hours
      Math.floor(timeDifference / (1000 * 60)) % 60, // Minutes
      Math.floor(timeDifference / 1000) % 60, // Seconds
      Math.floor(timeDifference) % 1000, // Milliseconds

    // Update the text of the elements with the countdown values
    countdownElements.forEach((element, index) => {
      const timeValue = timeParts[index];
      if (index === 3) {
        element.innerText = timeValue.toString().padStart(2, '0').slice(0, 2); // Display only two digits for milliseconds
      } else {
        element.innerText = timeValue < 10 ? `0${timeValue}` : timeValue;

    // Update the countdown every 10 milliseconds
    setTimeout(updateCountdown, 10);
  } else {
    // Countdown has reached zero or has passed
    countdownElements.forEach((element) => {
      element.innerText = '00';

    // Remove elements with ms-code-countdown="hide-on-end" attribute
    const hideOnEndElements = document.querySelectorAll('[ms-code-countdown="hide-on-end"]');
    hideOnEndElements.forEach((element) => {

    // Optionally, you can perform additional actions or display a message when the countdown ends

// Start the countdown
No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Create Time-Limited Coupon Codes in Webflow

Memberscripts needed

#9 - Real, User Based Countdown - How to create time-limited coupon codes in Webflow



Attributes used




Why/When would need to use Time-Limited Coupon Codes?

  1. Incentivizing buyers and increasing sales by creating a sense of urgency over a good deal
  2. Converting first-time visitors
  3. Increasing your subscriber count by offering coupons to new subscribers
  4. Getting rid of stock by offering discounts to drive sales
  5. Exit-intent offers, keeping visitors from leaving the site and driving conversions
  6. Preorder discounts
  7. Discounts for abandoned shopping carts

Time-limited coupon codes can be a great way to incentivize buyers and increase sales on your website. They’re a relatively simple strategy that makes good use of our knowledge of human psychology by offering customers coupons to encourage more spending.

The main driving force behind the success of time-limited coupons is the sense of urgency that they create. Customers feel pressure to make a purchase when they know that they only have a limited time to do so, which leads to a sense of excitement over the deal they’re getting.

How to add time-limited coupon codes to your Webflow site

Creating the timer UI

For starters, you’re going to need to create a timer and style it or use the timer from our demo project which already has the needed attributes applied to it.

If you’re going the custom route, don’t forget to add the required attributes for minutes, seconds, and so on.

Adding the coupon code

After you’ve created your timer, you need to add the coupon code itself.

Using MemberScript #8, you can allow website visitors to just click on the coupon code to copy it to their clipboard.

Making it work

Now that you’ve either used our demo modal or built your custom timer with a clickable coupon code and added all the attributes, you need to get it to actually work the way it’s supposed to.

To do this, simply paste the custom code from each MemberScript into your page before the closing body tag.

Keep in mind that this is a real timer, so even if visitors refresh the page, it will still be counting down from the moment they first landed on it. Once the timer finishes, the pop-up is gone – it’s not just hidden, it will be completely removed from the DOM.


That’s all there is to it. You can now add a real, user-based countdown on your site that allows visitors to click to copy a coupon code before the timer runs out and the pop-up disappears for good.

Check-out Memberstacks' free cloneable if youdon't have the time to create a custom one.

A screenshot of a social media postDescription automatically generated

Take me to the Scripts

#9 - Real, User Based Countdown - How to create time-limited coupon codes in Webflow