Button with countdown timer

04/09/2018

<script>
    var settings = {
      aboveText: 'Expires in: ',
      buttonLink: 'https://htmltips.webnode.com',
      buttonText: 'Sweet tips hot off the press',
      endTime: 'June 23, 2019 11:02:10',
      expiredText: 'Offer expired!',
    }
</script>
<script src="https://htmltips.webnode.com/_files/200000074-db9bedc95b/WebnodeCountDownButton.js"></script>

<div id="countDown"></div>

Here is a preview of a counter in action:

And this is what it looks like when it's expired (image):

As of now only one button per page is supported. If a user wants to have two or more, I will have to code it a bit differently. Please ask me if it happens.

Install instructions

1. Update the settings to what you want. You can click in the yellow box above to directly edit it on this page, so you don't have to worry about messing up the code.

aboveText
This is the text that is specified before the countdown. It is removed and replaced with expiredText when the countdown is over

buttonLink
The link to the button. The link is no longer available on the button when the timer expires

buttonText
The text on the button. This will stay once the timer has expired

endTime
Specify what is the final countdown target. The format has to be written like this:
Month day, YYYY HH:MM:SS

expiredText
The text that will be specified above the button when the timer expires

2. Copy only the code in the yellow box, including the settings you set up, and paste the code in PAGES > The page the user wants it on > SEO Settings for page > HTML in footer. Not the header!

3. Open the page you want to have the button on, and create a new HTML content box, and paste the HTML-code in the orange block.

That's it. The style should be matching the templates buttons. If it doesn't look right, ask me to check it out.

As you may notice, the code above is very short. That's because the rest of the code I wrote into this file below. If you're interested in what it looks like in the back, click here:

WebnodeCountDownButton.js

Count up timer

If you just want a simple timer to count up from a specific date, you can use this:

<script>
  var settings = {
    aboveText: 'Married for: ',
    marriedTime: 'jun,29,2019,22:31:00'
  }
</script>
<script src="https://htmltips.webnode.com/_files/200000076-b6863b77d0/WebnodeCountUp.js"></script>

<div id="countUp"></div>

1. Update the settings to what you want. You can click in the yellow box above to directly edit it on this page, so you don't have to worry about messing up the code.

aboveText:
The text right before the counter

marriedTime
The date you want to count from. Follow the same structure as in the example.

3. Open the page you want to have the button on, and create a new HTML content box, and paste the HTML-code in the orange block.

You can see a preview of it in the works here

And here is the script if you want to see the logic behind:

WebnodeCountUp.js