Building a Webinar Library with JavaScript

The Idea

This was a custom HTML file built to be loaded into Eloqua. The data would originate from an Excel spreadsheet, exported out as a JavaScript object and supplied to the HTML page. On page load, a JavaScript loop would be used to create the individual components and render them onscreen.

Why build the page with JavaScript at all?

The client had most of the information in excel already

They needed to manage it in excel going forward so we built an excel workbook that would generate the JavaScript output and then they only had to copy and paste it into Eloqua.

The turnaround time for this was fairly quick

The client was also going to be adding to it constantly and there was no cms or system in place to generate this to be imported into Eloqua at the time.

Futureproof

If the webinar library was successful the next step would be to implement a CMS that could generate the object code and serve via JSON which would be easily plugged into the current implementation.

var webinar = [
  {
    key: "Webinar 1",
    webinarName: "NGFW 1",
    webinarDate: "2021-04-11",
    webinarProduct: "ngfw",
    webinarSpeaker: "Tom",
  },
  {
    key: "Webinar 2",
    webinarName: "Security 1",
    webinarDate: "2011-04-11",
    webinarProduct: "security",
    webinarSpeaker: "James",
  },
  ...{
    key: "Webinar 7",
    webinarName: "NGFW 3",
    webinarDate: "2014-04-11",
    webinarProduct: "ngfw",
    webinarSpeaker: "Tom",
  },
];

Filtering capabilities

Filters for each webinar type were included for product category, speaker and date (upcoming or on-demand). These filters also need to cascade so that once filtering on category and then filtering on the date the correct combination is visible, not just applying the last filter that was requested. A reset button to return the filter to show all items was also added.

Project Extras

Speakers Library

As well as listing the webinars themselves the library also contained a database of speakers who were linked to the webinars and this was generated in the same way, using a JSON list from an excel workbook.

speaker library showing card layout with each speakers image, name, social media link and description text.

Registration Form

Each webinar required a registration form that matched the client brand.