ADVANCED: FOR DEVELOPERS / EXPERTS ONLY
In this tutorial, you'll learn how to set up a custom registration form that integrates an AStream timeline with a Zoom or GoToWebinar timeline.
Why do this? This approach allows you to benefit from the higher conversion rates of a pre-scheduled like-live event (such as Zoom or GoToWebinar) while also accommodating attendees who prefer to join immediately.
Prerequisite: This functionality only works when you've selected 'Code' as your Registration Form Type within your Timelines.
Assumption: This tutorial assumes that you have already created both an AStream timeline and a Zoom/GoToWebinar timeline.
Note: This tutorial is intended for advanced users and involves custom JavaScript code. By the end of this tutorial, you will have the custom code and understand how to set this up using your preferred page builder.
Step 1: Create your Registration Form using our Form Builder
Create and design your registration form using your timeline incorporated with Zoom or GotoWebinar.
Once you've created your form, navigate within your timeline to Code, and copy your Registration form code.
Paste your copied code into a text editor, like Notepad. and let's get editing!
Step 2: Edit the Registration Form to support 2 timelines
For the first edit, we need to remove the default option values from the created form.
Search in your text editor for <option
You should find code similar to our example below:
Delete EVERYTHING that we've circled in red. You want to leave just 1 option value (as shown in our example, 'Watch Now').
Change the wording 'Watch Now', to 'Select a Time'. Your code will now look similar to our example:
Next, scroll to the bottom of the code. Near the bottom, locate the line containing:
Modify this line by appending onclick="return onDemandCheck()", so it matches the example below:
<button onclick="return onDemandCheck()" type="submit"
After completing the code modification, install the entire registration form code into your page builder, placing it within an HTML element. If you have not already installed the Registration Header Script code, please do so.
Step 3: Edit custom JavaScript code to include your AStream Timeline
Below we've included our custom JavaScript code. Please copy the code into your text editor, then lets walk through step-by-step customizing it.
JavaScript Code
<script type="text/javascript">
//Define your aevent.stream WTL below
var wtl = 'XXXXXXXXXXXX';
function roundToNearest15(date = new Date()) {
// minutes = 10, 15, 30, 60 etc. define as the frequency as which the webinar is set for
const minutes = 15;
const ms = 1000 * 60 * minutes;
return new Date(Math.ceil(date.getTime() / ms) * ms);
}
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
function english_ordinal_suffix(dt) {
return dt.getDate()+(dt.getDate() % 10 == 1 && dt.getDate() != 11 ? 'st' : (dt.getDate() % 10 == 2 && dt.getDate() != 12 ? 'nd' : (dt.getDate() % 10 == 3 && dt.getDate() != 13 ? 'rd' : 'th')));
}
var date = (roundToNearest15(new Date()));
var weekday = date.toLocaleDateString('en-us', { weekday:"long"})
var month = date.toLocaleDateString('en-us', { month:"long"})
var year = date.toLocaleDateString('en-us', { year:"numeric"})
var day = (english_ordinal_suffix(date))
var hours = formatAMPM(date);
var currentDate = (new Date());
var delta = Math.abs(date - currentDate) / 1000;
var minutes = Math.floor(delta / 60) % 60;
delta -= minutes * 60;
if (minutes == '1'){
var minText = 'Minute';
}
else {
var minText = 'Minutes';
}
var timeZone = new Date().toLocaleTimeString('en-us',{timeZoneName:'short'}).split(' ')[2]
window.onload = function() {
//Just in Time Display Selector
//To Show Normal Selector Time
//EXAMPLE: Thursday, June 23rd 2022 - 9:45 PM CDT
// var dateFull = weekday + ", " + month + " " + day + " " + year + " - " + hours + " " + timeZone;
//To just show STARTING NOW instead of time
//EXAMPLE: Thursday, June 23rd 2022 - STARTING NOW
// var dateFull = weekday + ", " + month + " " + day + " " + year + " - STARTING NOW";
//To Show Minutes before start
//EXAMPLE: Thursday, June 23rd 2022 - Starting in 8 Minutes
var dateFull = weekday + ", " + month + " " + day + " " + year + " - Starting in " + minutes + " " + minText;
aEventSelect = document.getElementById('webinarid');
aEventSelect.options[aEventSelect.options.length] = new Option(dateFull, 'ondemand');
aEventSelect.options[aEventSelect.options.length] = new Option('{{!reg-dayofweek1}}, {{!reg-month1}} {{!reg-dayofmonth1}} {{!reg-year1}} - {{!reg-timeZone1}}', '{{!webinar-webinar1id}}');
aEventSelect.options[aEventSelect.options.length] = new Option('{{!reg-dayofweek2}}, {{!reg-month2}} {{!reg-dayofmonth2}} {{!reg-year2}} - {{!reg-timeZone2}}', '{{!webinar-webinar2id}}');
aEventSelect.options[aEventSelect.options.length] = new Option('{{!reg-dayofweek3}}, {{!reg-month3}} {{!reg-dayofmonth3}} {{!reg-year3}} - {{!reg-timeZone3}}', '{{!webinar-webinar3id}}');
};
function onDemandCheck() {
var webinarID = document.getElementById("webinarid");
if (webinarID.value == "ondemand") {
document.getElementById('wtl').value = wtl;
document.getElementById('webinarid').value = '';
return true;
}
if (webinarID.value == "") {
return false;
}
return true;
}
</script>
In the first portion of the script, you need to add your AStream WTL (Webinar Timeline) that you are using with this registration form.
To obtain that value, navigate to the timeline, and in the browser address bar, capture the string of characters (please refer to our example below)
So adding this our script will now look like this:
//Define your aevent.stream WTL below
var wtl = 'wCfaeACKfFkcZ3s';
Next, we need to define the frequency at which the AStream timeline is scheduled to run. This value needs to match your AStream schedule.
The current script is set for every 15 minutes. (If you need to change this value, you would edit the 15 to 5, 10, 30, whatever you've scheduled it for.
The final portion that needs to be defined within the JavaScript, is how you would like the dropdown menu to appear for the AStream (Just In Time) Event.
We have 3 different options we've created, and if you are advanced enough, you can expand upon our ideas 😄
Within your text editor, navigate to Just In Time Display Selector.
By default, the dropdown menu offering the AStream option will display a date/time as
Thursday, June 23rd 2022 - Starting in 8 Minutes
You can adjust this to utilize the other two options we've created. To do so, first you need to add a // in front of
So then it appears as shown:
For a normal Date/Time appearance: (remove the // infront of var dateFull)
Or for a Date / Starting NOW option: (remove the // infront of var dateFull)
Once you've customized the JavaScript to your liking, you need to install it in the footer of your page builder. It is HIGHLY IMPORTANT that this is installed in the footer, not in the header or above the Header Registration Script.
Once you're all set, ensure you've scheduled both timelines.
By default, this script will offer the first option for the Just in Time AStream Timeline and three more options for the Zoom/GotoWebinar Timeline.