Hello,
I’d like to add something like this to one of my webflow projects:
It should run in European Timezone CET Berlin and I’d need to be able to style it. The format in the example is exactly what I need.
How would I go about adding something like this?
Thanks a lot in advance.
Best,
Jens
Here is my public share link: LINK
(how to access public share link)
Hi @jensvahle,
You can add codepen concepts into Webflow, just by adding the the components in an HTML embed.
Just look for codepen integration in the forum.
Hey @QA_Brandon Thanks I’ve tried this, but seem to be doing something wrong.
Could you have a look what is missing?
The code looks like it should work, but not sure. I am out of my element when it comes to code (still learning).
@webdev or @rileyrichter do you guys have any thoughts on how to help here?
Although it looks you are missing the vue script too.
The part where you add Vue is an important step
I have pasted the javascript code into the body custom code area of the page.
You’re actually quite close. In fact, I think your project would work as you desire with one more line of code! You are lacking a CDN reference to Vue JS itself.
Add the following to your custom code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
Alternatively, I’ve got this re-created for you, and you can see how I have it set up here:
EDIT: Whoops! Looks like I typed my response up at the same time as @QA_Brandon and @webdev. 
Yes but you are missing the vue.js library for it to work.
That must be it! Where do I find this?
@jensvahle, @mattvaru has it all ready for you. Just copy the code he provided and reference the link in his post.
@mattvaru @QA_Brandon Thanks a lot! 
Let us know if it works for you!
You had to type more. 
It does work. Two questions, why did you paste your code in the head area and where did you find the peace of link that was missing on codepen?
reference!
Wow, I didn’t even know that menu existed in Codepen! Always learning something new in the Forums.
@jensvahle - I saw that there was no reference to Vue.js itself so I just typed in “Vue.js CDN” on Google and got the CDN link from here. But what @QA_Brandon did is the smarter and more efficient method of getting that CDN link!
Regarding placement of code… I actually think the correct method for scripts should be in the before </body> tag section (meaning I did it wrong), but I generally put it in the head for some reason. I’m not super well-versed on where it should go though, to be completely honest. Maybe @webdev or Brandon can assist?
The where you place the script would depend on the script dependencies.
All jQuery scripts for example; need to be in the before body close, since Webflow serves jQuery right above that.
Alrite, thanks guys! Learned something today.
One last thing to note: the codepen you referenced does not have any timezone references, meaning that Vue will take the user’s device’s timezone. For me, I’m in CDT and your test website shows me my current time in Oklahoma – 10:27 am. It probably shows Brandon his timezone, and you probably have a different timezone showing yourself.
If you are looking to force a specific timezone for all users, I think you’d have to use something like moment.js to assist with this.