How to add live time widget on your webflow site

step-by-step guide on how to add a live time widget using webflow

If you're interested in adding this similar widget to your website, we've created a step-by-step guide on how to do it using Webflow. All you have to do is add our JavaScript code, bind it with the elements on the page, and publish the page. It's super duper easy!

Step 1. Add our JavaScript code to the page

So, here is THE CODE! Just copy it, set UTC variable for your city and past into your webflow page:

<script>
    document.addEventListener("DOMContentLoaded", () => {
            function display_ct() {

                const d = new Date(); 
                let localTime = d.getTime(); 
                let localOffset = d.getTimezoneOffset() * 60000; 

                let utc = localTime + localOffset;
                let offsetDub = 4; // UTC of Dubai is +04.00
                let dubai = utc + (3600000 * offsetDub);
                let offsetMos = 3; // UTC of Moscow is +03.00
                let moscow = utc + (3600000 * offsetMos);

                let moscowGetTime = new Date(moscow);
                let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
                let moscowTimeNow = moscowTime.toLocaleString();

                let dubaiGetTime = new Date(dubai);
                let dubaiTime = ('0' + dubaiGetTime.getHours()).slice(-2) + ":" + ('0' + dubaiGetTime.getMinutes()).slice(-2) + ":" + ('0' + dubaiGetTime.getSeconds()).slice(-2);
                let dubaiTimeNow = dubaiTime.toLocaleString();

                document.getElementById('ct').innerHTML = moscowTimeNow;
                document.getElementById('ct2').innerHTML = dubaiTimeNow;

                let t = setTimeout(function () { display_ct() }, 1000);
                
            }
        display_ct();
    });
</script>

For example, if your office is in Syngapore, the time zone is UTC +8. You can just change the value in the offsetDub. It would be better to change the name of the variables too. Here is the code for an office in Syngapore:

<script>
    document.addEventListener("DOMContentLoaded", () => {
            function display_ct() {

                const d = new Date(); 
                let localTime = d.getTime(); 
                let localOffset = d.getTimezoneOffset() * 60000; 

                let utc = localTime + localOffset;
                let offsetSyn = 8; // UTC of Syngapore is +08.00
                let syngapore = utc + (3600000 * offsetSyn);
                let offsetMos = 3; // UTC of Moscow is +03.00
                let moscow = utc + (3600000 * offsetMos);

                let moscowGetTime = new Date(moscow);
                let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
                let moscowTimeNow = moscowTime.toLocaleString();

                let synGetTime = new Date(syngapore);
                let synTime = ('0' + synGetTime.getHours()).slice(-2) + ":" + ('0' + synGetTime.getMinutes()).slice(-2) + ":" + ('0' + synGetTime.getSeconds()).slice(-2);
                let synTimeNow = synTime.toLocaleString();

                document.getElementById('ct').innerHTML = moscowTimeNow;
                document.getElementById('ct2').innerHTML = synTimeNow;

                let t = setTimeout(function () { display_ct() }, 1000);
                
            }
        display_ct();
    });
</script>

If you are ready, now past your code into the webflow page. You can do it in two ways.

1. As a custom code before the </body> tag.
Open webflow.com/design/your_site and glide over to the Page menu (or just press P). Pick out the page you wanna add the widget to and click the "Edit page settings" icon. In the Custom code section, you should paste this code before the </body> tag. Don't forget to hit the "Save" button.

For more info check the webflow lesson about custom code in head and body tags.

2. As an Embed block on the page.
Hit up the main menu, then press A to add elements. In the Advanced section, you'll find Embed, which you'll need to copy-paste our code into. Save and close the window, and then place the block at the end of the page, under the others. When you preview it, you won't see anything yet, but after you publish, the magic will happen!

Step 2. Bind the custom code to the page elements

To show the local time for Moscow and Dubai, all you need to do is bind the code with the elements. Pick the element you want and add the ID attribute in Element settings (Press D). We use id="ct" for Moscow time, and id="ct2" for Dubai time. Then just click that "publish" button and you're ready to go!

Step 3. Save and publish the page

That's it!

to understand the code and make your settings

Take a look at our JS code. First things first, we call the new Date() function to get the date, then we get the time with getTime(). Pretty sweet, huh? Now we can get the timezone difference with getTimezoneOffset(). Then just add the ID attributes to the elements and we're good to go.

        
        // get current date
        const d = new Date(); 

        // get the timestamp for the date, milliseconds
        let localTime = d.getTime(); 

        // returns the difference between UTC and the local time zone, turn it in milliseconds
        let localOffset = d.getTimezoneOffset() * 60000;

We calculate local time in milliseconds for both of our offices.

 
    //  calculate local time, milliseconds   
    let utc = localTime + localOffset;

    // calculate time for Dubai, turn in milliseconds
    let offsetDub = 4; // UTC of Dubai is +04.00 hours
    let dubai = utc + (3600000 * offsetDub);

    // calculate time for Moscow, turn in milliseconds
    let offsetMos = 3; // UTC of Moscow is +03.00 hours
    let moscow = utc + (3600000 * offsetMos);

Let's get the party started and set the time format for real! We only need the time, so we'll use the functions getHours(), getMinutes(), and getSeconds() to make it all happen. We'll get something like "6:29:1", but we want that zero first, so we just add a "0" and take the last two symbols of the result. For example, hours: "0" + "6" give us 06, and function slice(-2) return last 2 digits, so we will have “06” for hours. Check out minutes: “0” + “29” → 029, then take the last two digits – and bam! We got 29 minutes just like we wanted. We're ready to drop the beats, man!

        
        let moscowGetTime = new Date(moscow); // we get date like "Fri Feb 10 2023 06:29:01 GMT+0300 (Москва, стандартное время)" 
        // We need only time, so we can do that:
        let moscowTime = (moscowGetTime.getHours()) + ":" + (moscowGetTime.getMinutes()) + ":" + (moscowGetTime.getSeconds());  // returns > "6:29:1"
        // But we want zero first, so...
        let moscowTime = ('0' + moscowGetTime.getHours()).slice(-2) + ":" + ('0' + moscowGetTime.getMinutes()).slice(-2) + ":" + ('0' + moscowGetTime.getSeconds()).slice(-2);
        let moscowTimeNow = moscowTime.toLocaleString();

        let dubaiGetTime = new Date(dubai);
        let dubaiTime = ('0' + dubaiGetTime.getHours()).slice(-2) + ":" + ('0' + dubaiGetTime.getMinutes()).slice(-2) + ":" + ('0' + dubaiGetTime.getSeconds()).slice(-2);
        let dubaiTimeNow = dubaiTime.toLocaleString();

OK, next. Function innerHTML replace the HTML content in our elements on the page (we added ID attributes, so they know where to go)!

        
        // find element with this ID attribute and replace inner content        
        document.getElementById('ct').innerHTML = moscowTimeNow;
        document.getElementById('ct2').innerHTML = dubaiTimeNow;

Last but not least: let's call our function every second with setTimeout() to make this widget totally radical!

        
        let t = setTimeout(function () { display_ct() }, 1000);

at the end

Adding a live date and time widget to your website is a easiest way to help website visitors understand what time it is in each of your offices. It's also a super amazing way to draw tons of attention to your office locations. So why not totally do it?

Have questions? Text us telegram @fiiire_branding or in@fiiire.design