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.

How to Display a Visitor’s Local Time in Webflow

Example

1. Add the ID to your text

2. Add the script in Footer code

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials