When running a live webinar, live mastermind, or live presentation that leads to a product launch, sometimes it helps to make an element appear at a certain time and date.
Generally, you can use Evergreen countdown elements or content reveal elements, but the limitation is the user’s cookie time.
Because these elements are browser specific, there is no way to guarantee a button or element can appear at a given time.
This is a huge problem during a live mastermind or live webinar that you want something to be revealed at a certain time.
Think about this for a second. Some users can get on your page early. Others can get on the page late.
There is no guarantee and no way to know when the user is going to get on the page. Therefore, it’s impossible to perfectly time an element to appear on a certain time.
An alternative to this is to tell people on the live broadcast to visit a certain link and have it displayed on their screen.
This is a problem for the user experience and it’s also a problem due to human error. Due to the frantic nature of live product launches, there is a lot of excitement and anticipation from the users.
There is a high chance for them to lose focus and interest by having to manually type a URL into their browser. And, what if they are on their phone and have the “fat finger” problem like I do? It is annoying to put the burden on the user and just a plain bad experience.
So, I had this code made that can grab an element by an ID and make anything from a single button to a whole div to a video to anything you want appear by referencing the ID of the content you want to appear.
The Javascript code to get an element to appear at a certain time:
<script> // the button or section or div container or anythingÂ
var btnEl = document.getElementById(‘[yourelementID]’);
// target time in ISO 8601 format (UTC)
var target = new Date(“2016-08-25T01:33:00Z”);
// check the time every second
var thisTimer = setInterval(function(){
var now = new Date(); // what time is it now?
// check if we’ve reached or exceeded our target time
if (now.getTime() >= target.getTime()) {
btnEl.style.display = ‘block’; // show the button
clearInterval(thisTimer); // stop the timer
}
}, 1000); // 1000 milliseconds interval
</script>
Where to place the custom Javascript
The code gets placed in the custom header scripts or footer scripts of the website. You can also place it anywhere in the html as long as it’s wrapped in the <script> </script> syntax. Generally, I place it in the head section so it loads first. I would only put this code in the custom code area and not globally on the entire site.
How do I get the element to appear?
When using Clickfunnels, Thrive Themes or just HTML, you can assign a UNIQUE ID to your element and then make it appear at a certain date and time with the above code. This is helpful when you want the code to appear for all users at the same time, regardless of their individual browser sessions. Make sure the ID is unique and hasn’t been used anywhere else on the page. IDs have to be unique anyway.
If I’m using custom HTML and not a builder like the ones mentioned above, I use a DIV element and grab the ID attribute from the Div Element. It would look like this:
<div id=”[yourelementID]” class=”[whateverclassyouwant]”>[YOUR CONTENT HERE]</div>
Now that your code is inserted on the custom script area of your landing page and your div is wrapped with the correct ID attribute, it will appear when the UTC time is reached. Remember, the time is in ISO 8601 format (UTC). This is now the server time, not individual user’s browser time. Doing it this way ensures that your element appears EXACTLY at the time you are ready to announce the product during your live mastermind or live webinar broadcast.
Once the element appears, you can mention something like you may see a button below, now is the time to purchase xyz. And, you can include a timer to encourage even more scarcity.
This code has worked for me every time and has never failed.
I also built a for this Javascript generator code tool so it’s super easy to implement.
0 comments