Simple Clock Widget for SquareSpace 7.1

Sale

Commercial License for Use on Paid/Client Sites for our Squarespace Toolkit

Sale Price: £49.99 Original Price: £79.99

---

Digital Clock

Stay on track with this real-time digital clock. It updates every second to show the current time in a clear, modern format perfect for keeping your readers informed.

Simply copy the code and paste into a Squarespace code block.

Analogue Clock

This stylish analogue clock brings a classic feel to you web pages. Watch the hands move in real time, offering a subtle and stylish way to enhance your site.

Simply copy the code and paste into a Squarespace code block.

📋 Copy Digital Clock Code

<div id="clock-widget" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100px;"> <div style="background: #111; color: #fff; padding: 20px 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-size: 2rem;" id="clock"></div> </div> <script> function updateClock() { const now = new Date(); let hours = now.getHours(); let minutes = now.getMinutes(); let seconds = now.getSeconds(); // Add leading zero hours = hours < 10 ? "0" + hours : hours; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; const timeString = `${hours}:${minutes}:${seconds}`; document.getElementById("clock").textContent = timeString; } setInterval(updateClock, 1000); updateClock(); // Run initially </script>

📋 Copy Analogue Clock Code

<div id="analog-clock-wrapper" style="display: flex; justify-content: center; align-items: center; height: 200px;"> <div id="analog-clock" style="width: 150px; height: 150px; border: 6px solid #333; border-radius: 50%; position: relative; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.2);"> <div id="hour" style="width: 4px; height: 40px; background: #333; position: absolute; top: 35px; left: 73px; transform-origin: bottom; border-radius: 2px;"></div> <div id="minute" style="width: 2px; height: 55px; background: #666; position: absolute; top: 20px; left: 74px; transform-origin: bottom; border-radius: 1px;"></div> <div id="second" style="width: 1px; height: 65px; background: red; position: absolute; top: 10px; left: 74.5px; transform-origin: bottom;"></div> <div style="width: 10px; height: 10px; background: #333; border-radius: 50%; position: absolute; top: 70px; left: 70px;"></div> </div> </div> <script> function updateAnalogClock() { const now = new Date(); const second = now.getSeconds(); const minute = now.getMinutes(); const hour = now.getHours(); const secondDeg = second * 6; // 360/60 const minuteDeg = minute * 6 + second * 0.1; // 6 deg per min + second contribution const hourDeg = (hour % 12) * 30 + minute * 0.5; // 30 deg per hour + minute contribution document.getElementById("second").style.transform = `rotate(${secondDeg}deg)`; document.getElementById("minute").style.transform = `rotate(${minuteDeg}deg)`; document.getElementById("hour").style.transform = `rotate(${hourDeg}deg)`; } setInterval(updateAnalogClock, 1000); updateAnalogClock(); </script>

---

Add a Simple Digital Clock to Your Squarespace Site

Whether you're a coach offering time-blocked sessions, a blogger posting on schedules, or just want to add a clean, live clock to your website — this real-time digital clock widget does the job without fuss.

This lightweight JavaScript clock updates every second to show the current time in a 12-hour or 24-hour format (customizable). It’s perfect for:

• Landing pages

• Webinar countdowns

• Time-sensitive offers

• International visitor awareness

• Personal dashboards or “Now” pages

✅ Features

• Live Time Updates: Clock refreshes every second automatically

• Modern Look: Clean digital display, no images or external fonts

• Mobile-Friendly: Fully responsive on all Squarespace 7.1 templates

• No Plugins Needed: Copy, paste, done — works in any Code Block

• Zero Dependencies: Uses native HTML, CSS, and JavaScript

📋 How to Use

1. Click “Copy Clock Code”

2. In Squarespace, go to your page editor

3. Add a Code Block where you want the clock to appear

4. Paste the snippet and save — the clock will appear instantly

Optional: Use Custom CSS to style the clock to match your site’s branding (font, size, spacing, color).

💬 FAQ

Can I add a real-time digital clock to my Squarespace site?
Yes. This tool gives you a ready-to-use HTML/JS clock that updates every second. Just paste it into a Code Block — no plugins or external libraries required.

Does the clock show the current time in the visitor’s timezone?
Yes. The clock is based on the user's local device time, so it's accurate for wherever they are in the world.

Can I use this in Squarespace 7.1?
Absolutely. This tool is designed for use with Squarespace 7.1 but will also work in earlier versions or any platform that supports HTML/JS.

Can I change the clock format (12-hour or 24-hour)?
Yes. The code can be edited to show time in 24-hour (military) format or include AM/PM labels. Instructions are included in the comments.

Is this tool free?
Yes for personal use. If you’re using this on client sites or commercial projects, you’ll need to purchase a commercial license.