How to add a countdown timer to Webflow

Paste into an Embed element

<!-- Paste into a Webflow Embed element.
     This is the website_embed_html the API returns for a
     published timer. Nothing else is needed. -->
<div style="width:100%;max-width:300px">
  <div style="position:relative;width:100%;aspect-ratio:6 / 5">
    <iframe src="https://countdownshare.com/api/embed/c/550e8400-..."
            title="Spring sale ends"
            width="300" height="250"
            style="position:absolute;inset:0;width:100%;height:100%;border:0"
            scrolling="no" loading="lazy"></iframe>
  </div>
</div>

api/countdown.js

// A serverless function on Vercel, Netlify, or Cloudflare.
// Webflow cannot hold a secret, so this is where the key lives.
export default async function handler(request, response) {
  // Restrict to your own site — this endpoint is public.
  const origin = request.headers.origin;
  const allowed = ["https://yoursite.com", "https://yoursite.webflow.io"];

  if (allowed.includes(origin)) {
    response.setHeader("Access-Control-Allow-Origin", origin);
  }

  const timerId = request.query.id;
  if (!/^[0-9a-f-]{36}$/i.test(timerId ?? "")) {
    return response.status(400).json({ error: "bad id" });
  }

  const upstream = await fetch(
    `https://countdownshare.com/api/v1/timers/${timerId}/status`,
    { headers: { Authorization: `Bearer ${process.env.COUNTDOWNSHARE_API_KEY}` } },
  );

  if (!upstream.ok) return response.status(502).json({ error: "unavailable" });

  const { data } = await upstream.json();

  // Short cache: enough to absorb a traffic spike, short enough
  // that the countdown is never visibly wrong.
  response.setHeader("Cache-Control", "public, max-age=5, s-maxage=5");
  response.json({
    remaining_seconds: data.remaining.total_seconds,
    server_time: data.server_time,
    ended: data.ended,
  });
}

Designer setup

<!-- In the Webflow Designer, add a Text Block and give it
     a custom attribute:

       Name:  data-countdown
       Value: 550e8400-e29b-41d4-a716-446655440000

     Optionally add data-ended-text too. Style it however you
     like — the script only writes textContent, so all your
     Webflow typography and colour settings survive. -->

Before </body> tag

<!-- Webflow: Page Settings -> Before </body> tag -->
<script>
(function () {
  var el = document.querySelector("[data-countdown]");
  if (!el) return;

  var timerId = el.getAttribute("data-countdown");
  var skew = 0;
  var endsAt = 0;

  function paint() {
    var left = Math.max(0, Math.round((endsAt - (Date.now() - skew)) / 1000));

    if (left === 0) {
      el.textContent = el.getAttribute("data-ended-text") || "This offer has closed";
      return;
    }

    var d = Math.floor(left / 86400);
    var h = Math.floor((left % 86400) / 3600);
    var m = Math.floor((left % 3600) / 60);
    var s = left % 60;

    el.textContent =
      (d ? d + "d " : "") +
      String(h).padStart(2, "0") + ":" +
      String(m).padStart(2, "0") + ":" +
      String(s).padStart(2, "0");
  }

  function sync() {
    fetch("https://your-proxy.vercel.app/api/countdown?id=" + timerId)
      .then(function (r) { return r.json(); })
      .then(function (data) {
        // Anchor to the SERVER's clock, not the visitor's.
        skew = Date.now() - new Date(data.server_time).getTime();
        endsAt = Date.now() - skew + data.remaining_seconds * 1000;
        paint();
      })
      .catch(function () { /* leave the last good value on screen */ });
  }

  sync();
  setInterval(paint, 1000);
  // A backgrounded tab is throttled; re-read when it returns.
  document.addEventListener("visibilitychange", function () {
    if (!document.hidden) sync();
  });
})();
</script>