Please watch the video below to learn how to set up an Hourly Webclass Autowebinar.

Please note, this does require copying and pasting custom code, but you are not required to modify the code in any way.

There is also a link at the bottom of of this article for a share funnel that will add a pre-built Hourly Webclass Autowebinar to your account.

Important Note: Do not change the "On Submit Go To" field under Settings>General as this will interfere with the hourly timer tracking between the two pages. By default the Button Action "Submit Form/Page" will bring them to the next step, so just make sure the countdown page is after your registration page and your button is set to "Submit Form/Page".

Code Snippets

Here are the code snippets that you will use. You do not need to modify these snippets at all. Just copy and paste.

The first four snippets will be used on the registration page.

1) Add the following snippet to the first Custom HTML/JS element:

<h2 class="topHour_text">
 <span class="topHour_date">
 Todays Date
 </span>
 @
 <span class="topHour_time">
 00:00PM
 </span>
</h2>

2) Add the following snippet to the second Custom HTML/JS element:

<div class="de elCountdownEvergreen elCountdownEvergreenTH de-editable elAlign_center elMargin0 autoTopOfHourCD" id="xxx" data-de-type="countdown-evergreen" data-de-editing="false" data-title="Evergreen Countdown" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" >
 <div class="wideCountdownEvergreenTH wideCountdownEvergreen wideCountdownSize2 cdBlack cdStyleTextOnly clearfix hide " data-hours="0" data-minutes="30" data-seconds="0" data-tz="America/New_York" data-url="#" data-lang="eng" >countdown</div>
</div>

3) Add the following snippet to the Footer area of the Tracking Code Settings:

<script>
$(document).on("ready", function(){
 // change to todays date:
 //$(".topHour_date").text( "(TODAY) " + moment().format('dddd MMMM Do') );
 $(".topHour_date").text("TODAY ");
 // change next house
$(".topHour_time").text( moment().add(1, 'hour').startOf('hour').format('h:mm A') );
$time_now = moment().format("mm");
$time_now_difference = 60 - $time_now;
$time_now_diff_seconds = $time_now_difference * 60;
$.countdown.setDefaults($.countdown.regionalOptions["eng"]);
$(".elCountdownEvergreen").countdown({
 until: $time_now_diff_seconds,
 padZeroes: true
 });
 // set value of webinar
webinar_datetime = moment().add(1, 'hour').startOf('hour');
console.log(webinar_datetime);
now = moment();
console.log(now);
now_offset = moment.unix(now);
console.log(now_offset);
webinar_delay = webinar_datetime.diff(now);
console.log(webinar_delay);
$("#webinar_delay").attr("value", webinar_delay);
 // set value of webinar
$("body").on('click','a[href="#submit-form"]', function(){
 webinar_datetime = moment().add(1, 'hour').startOf('hour');
 console.log(webinar_datetime);
 now = moment();
 console.log(now);
 now_offset = moment.unix(now);
 console.log(now_offset);
 webinar_delay = webinar_datetime.diff(now);
 console.log(webinar_delay);
 $("#webinar_delay").attr("value", webinar_delay);
});
});
</script>

4) Add the following snippet to the Custom CSS area in the Page Editor settings:

.topHour_text{
 text-align: center;
 color: #FFF;
 font-weight: bold;
}

.autoTopOfHourCD{
 color: #FFF !important;
 text-align: center !important;
}


.autoTopOfHourCD .countdown-period{
 color: #FFF !important;
 font-weight: bold;
}

.autoTopOfHourCD .countdown-amount {
 border-radius: 100px !important;
 width: 67px !important;
}

.autoTopOfHourCD .countdown-amount {
 color: #FFF;
 border: 4px solid #FFF;
}

.autoTopOfHourCD .countdown-amount {
 padding: 10px;
 margin-bottom: 10px;
 text-align: center;
}

.autoTopOfHourCD .countdown-amount {
 font-size: 27px;
}

.elCustomJs {
 text-align: center;
}

After you have added these four snippets, you will need to save the page and open the Countdown Page in the Page Editor.

5) Add the following code snippet to the Footer area in the Tracking Code settings on the countdown page:

<script>
setTimeout(function(){
$(".addthisevent-drop").delay(1000).append("Add To Calendar");
}, 1000);
</script>

If you would like to download all the code snippet files, Click Here to Download

If you would like to add the autowebinar template to your account with all the code in place, Click Here to Add to Your Account

 
 

Did this answer your question?