step-by-step guide on how to add a live time widget using webflow
So, here is THE CODE! Just copy it, set UTC variable for your city and past into your webflow page:
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:
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.
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
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.
We calculate local time in milliseconds for both of our offices.
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!
OK, next. Function innerHTML replace the HTML content in our elements on the page (we added ID attributes, so they know where to go)!
Last but not least: let's call our function every second with setTimeout() to make this widget totally radical!
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