How to Display a Visitor’s Local Time in Webflow

Learn how to display your visitor’s local time in real time in Webflow with JavaScript and the Intl API.

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to display the visitor’s local time in real time in Webflow.

Example

Visitor’s local time

Display	Format	ID
Time + timezone	🕐 It is 14:32:07 where you are (Europe/Paris)	local-time

1. Add the ID to your text

On your Text Block: custom attribute id = local-time.

2. Add the script in Footer code

(function() {
  var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
  function tick() {
    var time = new Date().toLocaleTimeString('fr-FR', {
      timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit'
    });
    var el = document.getElementById('local-time');
    if (el) el.textContent = '🕐 It is ' + time + ' where you are (' + tz + ')';
  }
  tick();
  setInterval(tick, 1000);
})();

good to know

The Intl.DateTimeFormat().resolvedOptions().timeZone API returns the visitor’s OS time zone (for example, 'Europe/Paris'). Supported by all modern browsers without an external library.

Conclusion

Real-time local time creates a direct connection with the visitor. It’s ideal on contact pages to put your hours into context.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss