skip to main content
2015-11-01

Intel Webinar Library

Single Page Web Application

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 into Eloqua.

The turn around 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 succesfull 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 date the correct combination is visible, not just applying the last filter that was requested. A reset button to return the filter to showing all items was also added.

Project Extras

Speakers Library

As well as listing the webinars themselves the libray 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 which matched the client brand.

form page layout showing right aligned form styled to match the clients brand