# Squarespace Plugin Responsive World Clock
**Source:** https://beyondspace.studio/blog/squarespace-plugin-responsive-world-clock
**Language:** French (France)

---

# Squarespace snippet: Responsive World Clock

Dec 26

Written By Beyondspace

I found an interest question on squarespace forum about creating a world clock on website, that mean a digital clock which is:

- Display current date
- Display current time, counting
- Show current user timezone/location
- Display on **top right** of the website on desktop and in the **middle of header** on mobile
- The time changes accordingly based on where you are
- And **most important** thing, the clock style must be identical to current site’s look and feel

View fullsize
![carbon-admin-view.png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1672056470894-WN51XD5L94Q9RI8A6A0N/carbon-admin-view.png)![carbon-admin-view.png]()

View fullsize
![mobile-layout.png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1672056472430-F96XYQGXTYO28GRVRYML/mobile-layout.png)![mobile-layout.png]()

I then contact the owner and we agreed to create the plugin using javascript/html and embed to the page via custom code injection, the clock will display on all pages

- I used plain javascript to place the clock markup in the site
- Moment js is used to get user timezone, there is another option to detect user location via ip
- Settimeout() method used to make the counting of second and update the current time

View fullsize
![carbon-clock-code.png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1672056542753-KAVRVBGAZ28H8WVB937U/carbon-clock-code.png)![carbon-clock-code.png]()

View fullsize
![carbon-preview.png](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1672056544314-1YI3UFFLLG9NDQV6CQA8/carbon-preview.png)![carbon-preview.png]()

If you got similar requirements and would need my help, kindly contact me directly for discussion

Beyondspace 

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio

Précédent

Précédent

## Understanding Squarespace Image Delivery and Optimization

Suivant

Suivant

## Squarespace Workflow: Connect Order to Mailchimp