Streaming live at 10am (PST)

Business's live open and close text

Hi there I was wondering if something like this can be achieved simply by using animations via Webflow or does it require a third-party code / integration for it to work.

I’ve been looking at this awesome website, made using Webflow and at the top there is an ‘Open for business!’ or ‘Sorry we’re closed for the day.’ in accordance to their opening times. The website is linked below.

https://www.lemonstreetbrewing.com

The text changes obviously according to the time however I’ve been searching up everywhere for a way to do this, with no luck as I actually don’t know what you’d call something like this.

Thank you so much for reading, if you do have a solution I’ll be really grateful!

There is some javascript in the body which does the work.
You can find it by viewing the source code.

The javascript only affects the div box in grey which is a Text Block with an ID of ’ hours ’

The opening hours shown in the black div’s are only for show and can be styled as you wish. They do not affect the script.

In the Javascript:

The days of the week are represented by numbers.
case numbers are: 0 = Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat

and you put hours in the javascript to reflect your own business

For example, in the code you will see something like:

case 2:
if ((currentHours > 15) && (currentHours < 22))

this would indicate Tues between 3pm and 10pm

If the computer clock says ‘true’ to this then show the text “Open for Business!” in the text box with class ‘hours’. If outside those hours then show “Closed for the day.”

1 Like

Thank you so much for this, which browser are you using as mine doesn’t show any javascript when viewing the source file!

If I were to write this code onto Webflow could I implement this right into the settings > javascript and then tag the div tag?

I didn’t know it would be this simple. Thank you so much.

Look at the answer in this stackoverflow post.

1 Like

If you needed to handle visitors from different time zones you would probably want to use moment.js and moment timezone.

https://momentjs.com/timezone/

1 Like

You have put me on the spot here as I hate having to describe my workings and am hopeless at it, but hopefully if you right click anywhere on the webpage you should see an option View page source or Ctrl-U.

This gives you the knitting pattern of the webpage.

As you drift down this code you should eventually come across something between script tags with the first line //This script checks every 2 seconds

This is the javascript that has been embedded into this particular webpage

Everything including the script tags should be copied over.

Webdev mentioned code that only applies if every day had opening times the same.
This piece of great script actually, allows you to specify which days and times are relevant for your business.

DM me if I need to explain further

I have quickly added a Webflow page and you could right click this and inspect the code

https://codepen-examples.webflow.io/hours-open

1 Like

Thank you once again, really appreciate it!