Create HTML page with countdown timer that calls webhook and redirects using URL parameter

Other Questions Zapier
1

Need Help with Timed Redirect and Webhook Integration

I’m pretty new to HTML and JavaScript so I need some guidance here. The basic HTML stuff makes sense but I get lost when it comes to scripting.

Here’s what I want to build:

First part: When someone clicks my link they land on a page that shows a countdown (maybe 10 seconds or so)

Second part: While that timer is running I need to secretly call a webhook URL in the background. This webhook has some parameters that will trigger my Zapier automation. The visitor shouldn’t notice this happening.

Third part: Once the countdown finishes the user gets sent to a new page like mysite.com/destination where “destination” comes from one of the parameters I used in the webhook call.

I can handle basic page layout but the JavaScript part is confusing me. How do I make the timer work with the background request and then use that data for the final redirect? Any simple examples would be awesome.

2

Been dealing with similar flows for years - everyone’s overcomplicating this.

Browser approach works but you’re fighting uphill. Users close tabs, JS errors break everything, mobile browsers act weird with fetch calls, and debugging becomes hell when things break.

Learned this the hard way after weeks fixing edge cases.

What actually works: Keep your HTML page simple with just the countdown visual. Use one line of JS to fire a webhook when the page loads. Done.

Let automation handle the complex stuff. When your webhook fires, automation waits for your delay, then triggers the redirect. Pass all parameters through the initial webhook call and let the system manage timing reliably.

You’re not dependent on browsers staying open or JS behaving across different devices and connections. Plus you get proper logging and can adjust timing or add conditions later without touching code.

I’ve been using Latenode for exactly this. It handles webhook triggers perfectly and has built-in delays and redirect capabilities. Way more reliable than coordinating everything in the browser.

3

Had the exact same issue last year with conversion tracking pages. You need to run everything in sequence, not parallel. Here’s what works: Start your countdown the second the page loads. Grab the destination from the URL with window.location.search. Fire your webhook immediately after the timer starts using fetch. The webhook should finish way before your countdown ends. When it hits zero, redirect. Big gotcha that killed hours for me - if your webhook endpoint is slow or hangs, it’ll freeze everything. Add a timeout to your fetch call. Also, mobile browsers can be weird with fetch during page transitions, so test on actual devices. Keep the countdown visible so users don’t think your page is broken.

4

just use setTimeout with fetch. fire the webhook when the page loads, then start your 10-second timer. grab the destination param with URLSearchParams.get() and redirect when the timer’s done. don’t overthink it - browsers handle this fine now. add a catch block so you still redirect if the webhook fails.

5

I’ve built this exact thing before, but used a way cleaner approach.

Skip wrestling with JavaScript timers and webhook calls - automate the whole flow instead. The HTML page shows a simple countdown with basic JS. Here’s the trick: handle all webhook logic and redirects through automation.

When someone hits your page, trigger the webhook call immediately with a form submission or tracking pixel. The automation platform processes the webhook, waits for your delay, then handles the redirect.

This is bulletproof - you’re not relying on the user’s browser staying open or JS not breaking. Plus you can add logging, error handling, and A/B testing without touching code.

For the countdown, just use basic JavaScript:

let countdown = 10;
const timer = setInterval(() => {
    document.getElementById('timer').innerText = countdown;
    countdown--;
    if (countdown < 0) {
        clearInterval(timer);
        window.location.href = 'your-redirect-url';
    }
}, 1000);

The real magic happens in background automation that processes webhooks and manages flow logic.

I use Latenode for this setup - it handles webhooks perfectly and has built-in delays and redirects. Way more reliable than browser-based solutions.

6

Had this exact same issue six months ago on a landing page funnel. Here’s what worked for me: Use Promises to handle both the countdown and webhook at once. When the page loads, start the countdown for the user while firing the webhook immediately in the background with fetch API. Store the redirect destination in a variable from the webhook call, then use that value when the timer hits zero. Grab your destination with URLSearchParams, pass it to the webhook, then redirect there. One thing that bit me - your webhook needs CORS headers if you’re calling from the browser. Without them, the request fails silently and breaks your redirect. I added a fallback redirect URL just in case the webhook doesn’t respond. Make sure the fetch call is non-blocking so your countdown runs smooth no matter how slow the webhook is. Kept everything client-side and worked great across browsers.