Squarespace Countdown Timer Widget: Count Down to Launches on Your Squarespace Site

Use the builder below to create a free countdown timer for your Squarespace website. Pick a template, set your date and click “Continue with this template“.

Many Squarespace sites sell something with a date attached: a workshop with limited seats, a course that opens for enrollment, an early-bird rate for photo sessions, a print collection or album going live. A countdown makes that date hard to miss. You build the timer in your browser and add it to any Squarespace page with a Code Block. No extension or coding is needed.

How to add a Countdown Timer widget to Squarespace

1. Create your widget

  1. Choose a template: Launch Countdown, Event Start Countdown, Special Offer Banner, Evergreen Timer and 5 Minute Countdown Timer are good starting points.
  2. Set the timer: for a fixed deadline, pick the start-to-finish timer and enter the start time, end time and time zone. Set the time zone carefully if your clients book from other regions. For a personal offer, pick the remaining-time counter, which runs separately for each visitor.
  3. Choose the position: “Install To Required Position” shows the timer exactly where you add the Code Block. The banner positions turn it into a bar at the top or bottom.
  4. Decide what happens at zero: hide the timer, show a message such as “Enrollment is closed”, or send visitors to another page. You can add a call-to-action button like “Book your spot” under the clock.
  5. Style and save: choose a clock type or holiday theme, set the animation, font and size, then click “Add to website for free“, sign up and copy your embed code.
Countdown Timer widget builder with sale and event countdown templates

2. Add it to your Squarespace site

  1. Log in to Squarespace, open the page where the countdown should appear and click Edit.
  2. Click an Add Block point (+) where you want the timer, for example under the page heading or next to your booking details, and choose Code.
  3. Paste the countdown code, make sure the mode is set to HTML and turn off Display Source, so visitors see the timer and not the code.
  4. Save the page and check the timer on the live site. Scripts may not run in the editor, so an empty block there doesn’t mean it failed.
  5. If the live page shows nothing, check your Squarespace plan. JavaScript in Code Blocks needs Core or above (Business or above on older plans).

Where to put the Countdown Timer widget on your Squarespace site

  • On a workshop, class or retreat page, counting down to the day bookings close, with a button to reserve a place.
  • On your homepage during a launch of a print collection, album or online course.
  • On a services or pricing page, next to an early-bird rate for coaching packages, photo sessions or design work.
  • On a coming-soon or event page for an exhibition opening, pop-up or studio open day, with a button to RSVP or join your mailing list.

Do you need a paid Squarespace plan?

Yes, for the timer to run. The countdown uses JavaScript, and Squarespace only runs JavaScript in a Code Block on Core or higher plans (Business or higher on older plans). On a lower plan the Code Block saves but shows nothing, with no error. The widget’s own free plan covers one widget with up to 200 views a month on unlimited websites, with a small Elfsight link; paid widget plans start at $5 a month, billed yearly.

A banner position added in a Code Block appears only on that page. To show a countdown bar on every page during a sale or launch week, paste the code once under Settings › Advanced › Code Injection instead. Code Injection has the same plan requirement.

Countdown Timer widget features

  • Ready-made templates such as Countdown timer, Urgency Countdown, Event Start Countdown and Launch Countdown.
  • Three countdown types: fixed start and end dates with a time zone, a personal timer for each visitor, or a number counter.
  • Four positions: inline where you place it, a static top banner, or a floating banner at the top or bottom of the page.
  • End-of-countdown actions: hide the timer, show a message or redirect to a URL, plus an optional call-to-action button.
  • Holiday themes and clock types, with animation, font and size settings, and custom CSS and JavaScript for anything else.

Frequently asked questions

Which Squarespace plan do I need for the countdown timer?

Core or higher on current plans, or Business or higher on older plans. The timer runs on JavaScript, and lower plans don’t run JavaScript in Code Blocks or Code Injection, so the timer simply doesn’t appear.

Why isn’t my countdown showing on Squarespace?

Check that your plan allows JavaScript, the Code Block mode is HTML, Display Source is off, and you’re viewing the live site, not the editor. If it still doesn’t show, try with your ad blocker turned off.

Can I show the countdown on every page of my Squarespace site?

Yes. Choose a top or bottom banner position in the builder, then paste the code under Settings › Advanced › Code Injection instead of in a Code Block. The bar then loads on every page.

Can I change the date after adding the timer to Squarespace?

Yes. Edit the widget in your Elfsight dashboard and save. The countdown on your Squarespace site updates on its own, so you don’t need to touch the Code Block again.

Is the countdown timer free?

Yes. The free plan includes one widget with up to 200 views a month on unlimited websites, with a small Elfsight branding link. Paid plans start at $5 a month, billed yearly.

More Squarespace widgets

Scroll to Top