TUTORIAL: How to Add a Countdown Timer and Stock Countdown to Your Funnel Page 🚀

anwerashif · December 17, 2024, 5:01pm

What We’ll Do:

Add a countdown timer to your page that counts down from a specific time (e.g., 10:00 minutes).
Display a stock count (like how many items are left) that decreases over time as the timer runs down.
Reset stock when it reaches zero, just like how we reset the timer when it reaches 00:00.

Step 1: Understand Your Funnel Page

Imagine your funnel page looks like this:

Countdown Timer: A timer showing how much time is left for the discount, like this:

<div class="hastimer">
    <strong>10:00</strong> <!-- This is where the timer will be displayed -->
</div>

Stock Counter: A message showing how many items are left in stock, like this:

<div class="inventoryDown">
    <p>Only <strong style="color: red;"><u>104</u></strong> items Left in Stock</p>
</div>

Step 2: Prepare the Code

Here is the code you’ll be adding to your page to make everything work!

Full Code:

<script>
    // Function to start both the countdown timer and the stock decrement
    function startCountdownAndInventoryTimer(timerSelector, stockSelector, initialStock = 104, resetStock = 10, decrementRange = [1, 3], targetStockAfter = 30) {
        const timeElement = document.querySelector(timerSelector);
        const stockElement = document.querySelector(stockSelector);

        if (!timeElement || !stockElement) {
            console.error(`Elements not found: ${timerSelector} or ${stockSelector}`);
            return;
        }

        let seconds = parseTimeToSeconds(timeElement.textContent);
        let stockCount = initialStock;
        let decrementInterval;

        // Function to update both the timer and stock
        const updateTimerAndStock = () => {
            // Update the timer display
            if (seconds <= 0) {
                timeElement.textContent = "00:00:00 ";
                clearInterval(decrementInterval);
            } else {
                seconds--;
                timeElement.textContent = formatSecondsToTime(seconds) + " ";
            }

            // Update the stock display
            if (seconds % targetStockAfter === 0 && seconds > 0) {
                stockCount -= getRandomDecrement(decrementRange[0], decrementRange[1]);
                stockElement.textContent = `${stockCount}`;
                // If stock reaches 0, reset it
                if (stockCount <= 0) {
                    stockCount = resetStock;
                }
            }
        };

        // Set an interval to update both timer and stock every second
        decrementInterval = setInterval(updateTimerAndStock, 1000);
        updateTimerAndStock(); // Update immediately
    }

    // Function to convert time from "mm:ss" to seconds
    function parseTimeToSeconds(time) {
        const [minutes = "0", seconds = "0"] = time.split(':').map(Number);
        return (minutes * 60) + seconds;
    }

    // Function to format seconds into "mm:ss" format
    function formatSecondsToTime(totalSeconds) {
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }

    // Function to get a random decrement between a range (e.g., 1-3 items)
    function getRandomDecrement(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Example usage (Connect the timer and stock decrement on your page)
    startCountdownAndInventoryTimer('.hastimer strong', '.inventoryDown u', 104, 10, [1, 3], 30);
</script>

Step 3: Where to Add This Code

Now, let’s break down how to use this code on your funnel page.

Access Your Funnel Editor:
- If you’re using a funnel builder (like ClickFunnels, Funnelish, or another), log in to your funnel editor.
- Find the place where you can add custom HTML or Javascript code.
Add the Code to the Funnel Page:
- Find an option to add custom code (this might be under “Custom JavaScript” or “Custom HTML”).
- Paste the entire code snippet above into the custom code section.

Modify the HTML Elements:

Ensure that your page has the timer and stock elements in the correct places, like this:

Timer:

<div class="hastimer">
    <strong>10:00</strong> <!-- Timer starts here -->
</div>

Stock Counter:

<div class="inventoryDown">
    <p>Only <strong style="color: red;"><u>104</u></strong> items Left in Stock</p>
</div>

Save Your Funnel:
- After adding the code and ensuring everything is in place, save your funnel page.

Step 4: How Does the Code Work?

What happens first?

The code starts by reading the timer text (e.g., 10:00 minutes).
Then, it will convert that timer into seconds (so 10 minutes becomes 600 seconds).

How does the stock work?

The stock starts at 104 items (or any number you specify).
Every 30 seconds, the stock will decrease by a random number between 1 and 3 (this is the decrementRange you set).
Once the timer reaches 0 (i.e., the discount time runs out), the timer stops.
If the stock hits 0, it resets back to 10 items (or whatever value you set for resetStock).

Example Behavior:

Initially: You have 104 items left, and the timer starts at 10:00.
After 5 seconds: The timer is at 09:55. The stock is now 103 items left.
After 30 seconds: The timer is at 09:30. The stock is now 101 items left.
After 60 seconds: The timer is at 09:00. The stock is now 99 items left.
When the timer hits 00:00: The stock will stop changing, and you’ll see the message “Time’s up!”

Step 5: Adjust the Code to Fit Your Needs

You can adjust the values to fit your funnel and business needs:

initialStock: This is the starting stock, so change it to the number of items you have.
resetStock: If your stock hits 0, you can reset it to any value. By default, it’s 10 items.
decrementRange: This defines how much the stock should decrease each time (e.g., [1, 3] means 1 to 3 items per interval).
targetStockAfter: How often the stock decreases. By default, it’s every 30 seconds (you can change it to any number).

Step 6: Test It

Once you add the code, make sure to preview or test your funnel page.
Watch the countdown timer and stock decrease as the timer counts down.
If you set everything correctly, you should see the stock number decrease every 30 seconds while the timer counts down.

That’s It! You’ve Added a Countdown Timer and Stock Decrement to Your Funnel!

Final Tip:

If you’re unsure how to add custom code in your funnel builder, you can always reach out to the support team, and they can guide you.