How indie makers can add a launch countdown to a Webflow site

You’re shipping a product. The landing page needs a date people can see, and a place to leave an email before that date.

A countdown that only lives in the page copy goes stale the moment you change the launch day. A signup field that only says “Thanks” in the browser still needs somewhere to store the address.

Sitebase’s countdown timer ticks in the visitor’s browser from one UTC deadline. You can pair it with the site’s waiting list so the form sits under the timer. Signups go to the waiting list’s Data tab.

Sitebase is in private beta. Public signup isn’t open. These steps are for accounts with access.

Pick one deadline and one promise

Give the page a single date. “We open on 3 November” is clearer than a vague “soon.”

Tell people what the email is for. A launch announcement is a different promise from a weekly newsletter. If joining does not guarantee access, say that on the form.

Put the countdown near the product explanation. Visitors should understand the offer before you ask for an email.

Create both features

Add your website in Sitebase. On the features step, select Countdown timer and Waiting list. If the site already exists, use + Add more for each one.

On the last step, set Built with to Webflow. Setup then leads with the script snippet, which Webflow can run in an Embed element.

A Sitebase website has one waiting list. You can create more than one countdown. Pair the launch timer with that waiting list; other timers can stay countdown-only.

Open the waiting list first. In Config, set the title, button text, and success message. The default form asks for an email and an optional name. Use the preview before you pair it.

Then open the countdown. In Config, set the title and the optional description. Under Target date and time, pick the deadline. The dashboard shows that time in your timezone and stores it as UTC, so every visitor sees the same remaining time.

Decide what happens at zero

Under When it reaches zero, choose one of two behaviors.

Show a message replaces the ticking numbers with a short line. You can add an optional CTA label and URL, for example a link to the live product. CTA links must start with https://, http://, or /.

Hide the widget removes the countdown from the page when the deadline passes. Use that when the rest of the Webflow page already changes after launch.

For a first launch page, a short expired message is usually enough. “We are live” plus a link to the product page tells people what to do next.

Pair the waiting list

In the countdown Config, use Show a waiting list below the countdown. Select the site’s waiting list and save.

The countdown only displays the deadline and loads that form under it. Subscribers, the signup chart, CSV export, and notifications stay on the waiting list.

If you skip the pairing, the timer still works on its own. You can embed the waiting list separately with its own snippet.

Paste the snippet in Webflow

Open the countdown Setup tab. Copy the script snippet. The public key identifies this timer. It is not a private API credential.

In the Webflow Designer, add an Embed element where the launch block belongs. Paste the snippet into the embed’s code editor.

This is the shape of it. Replace YOUR_COUNTDOWN_KEY with the key from your dashboard, or paste the complete snippet Sitebase gives you:

<script
  async
  crossorigin="anonymous"
  src="https://sitebase.dev/embed.js"
  data-sitebase-widget="YOUR_COUNTDOWN_KEY"
></script>

Publish the Webflow site, then open the public URL. The Designer canvas is not enough: you need the published page to confirm the timer ticks and the form submits.

If a later page only accepts a URL embed, use the hosted URL from Setup:

<iframe
  src="https://sitebase.dev/embed/YOUR_COUNTDOWN_KEY"
  title="Launch countdown"
  style="width:100%;height:640px;border:0"
></iframe>

Give the iframe enough height for the timer, the waiting list, and the success message, including on a phone. The same hosted URL is the path on Notion, Wix, or Squarespace, which strip script tags.

Protect the signup form

The countdown is display-only. The waiting list is a public form.

Enable Cloudflare Turnstile in the site’s Config before you share the page. It is set once for the whole site and applies to every form.

Test keys are useful during setup. Replace them with real keys for your public domain before sending traffic. Sitebase also uses a honeypot and rate limiting. Keep the supplied markup intact so those can work.

Hosted embeds run on Sitebase’s domain and use Sitebase’s own Turnstile keys. Your domain’s keys apply when the form is embedded with the script snippet.

Check the published page

Open the public Webflow URL in a fresh browser window.

Confirm the countdown shows days, hours, minutes, and seconds, and that it matches the deadline you saved. On a phone-sized screen, check that the numbers stay readable and the submit button is reachable.

Submit an email address you control. The success message should appear, and the signup should land in the waiting list’s Data tab. Try an invalid email too, so you know visitors can recover from a mistake.

If a signup is missing, check the waiting list Data tab. The countdown does not store subscribers.

If you use notifications, check the member and website preferences, then verify with another test signup. A missing email does not mean the address was lost.

After the first signup

Use Data to review the list and export it as CSV. Export a small sample before launch and check that it contains the addresses you’ll need.

When the deadline passes, reload the published page and confirm the expired message or the hidden state. Change the target in Config if you slip the date. The embed snippet stays the same.

For more install detail, see embedding Sitebase features and the countdown documentation. If you also want visitor numbers on the same Webflow site, follow how to add analytics and adapt the snippet steps to Webflow’s shared layout.