How to Add a Clock to Your Squarespace Website
Have you been searching for a way to display your date/time/time zone on your website to clients? I recently discovered how to add a customised clock to our Contact page using an awesome free tool by timeanddate.com.
You don’t need to register to use this online tool, and multiple languages are supported. Head on over to the Time and Date website ↗ to access the tool.
It provides 27 text-based and analogue clock templates to choose from. Follow the step-by-step process to pick, style and generate your own clock. During the process, a little preview box will display in your browser window, showing you what the end result will look like.
Choose your clock template in the first step.
Complete the steps and the tool will pop you out an HTML snippet — this is the only code that you need to touch.
In the Fluid Engine editor, click Add block > Code Block. All you need to do then is copy and paste the whole snippet into the code block.
Adding HTML to a code block in the Fluid Engine editor.
After that, you can move the clock around into position. It’s as simple as that!
Can I customise the appearance of the clock from timeanddate.com?
Yes – the tool provides lots of options to customise the clock elements based on your chosen template. You can match your clock to your brand colours, add a border and padding, and control what and how information displays.
There’s no option, however, to add a custom font. You’ll have to decide from a short list of mostly web-safe fonts ↗. I selected the one closest to my brand fonts.
Can I make styling changes to the clock on my Squarespace site?
No – styling needs to be done on timeanddate.com. But the online tool makes it straightforward for you to modify an existing clock.
Where to find the option to copy or modify an existing clock.
Click Copy/Modify Clock.
Copy and paste the full HTML from your code block into the text box.
Click Import from HTML.
You can then make adjustments to the clock’s appearance following the normal steps.
Update the code block on your website with the modified HTML.
What is the purpose of adding a clock to your website?
If you work with people located in different time zones to you, a clock displaying your date, time and time zone can be a useful communication tool. Based on research ↗, the Nielson Norman Group recommends adding time zones as a best practice for displaying contact information on Contact Us pages.
Where are the best places for displaying a clock on a website?
A logical place to add a clock is on a Contact page, alongside your hours of operation. This gives visitors an idea of when to expect a response from you, based on the time difference.
I have also spotted clocks in website footers on occasion. Usually, it follows info about the company’s location, such as “Based in Boston and Guatemala City, working worldwide” in the below example.
Local times displayed in the footer of Antara Studio.
Build your website smarter + faster
Our DIY Portfolio Checklist breaks down site building in Squarespace 7.1 into easy, actionable steps
