Displaying Customized Speaker and Sessions Info for Your Event from Sessionize.com

Sessionize is a fantastic platform you can use to manage speaker submissions for an event. We used it for SharePoint Saturday New England last year and are again this year. More and more events out there seem to be turning to it to make life easier. It helps speakers a lot, too, as the site remembers who you are, what submissions you’ve done in the past (great for reuse!), etc.

Earlier this year, I built a little AngularJS application to display speaker and session data from Sessionize for the European Collaboration Summit – and then promptly forgot about it. I had every intent to make the code available, and it’s been sitting in a public Github repo ever since. I mentioned it in a Facebook thread the other day, and it seemed to interest people, thus this post.

While Sessionize gives us some very rich embed options right out of the box, Adis (@adisjugo) and I wanted to give people more options. We liked the way the Ignite sessions page (no longer visible, as they have revved up for next year) worked, so we tried to emulate the better parts of it, leaving the less helpful parts on the cutting room floor.

The styling isn’t perfect, but you’re likely to change it anyway.

Many event sites are built on WordPress, and to add this application, you’ll need the Scripts n Styles. This gives you relatively simple capabilities to add JavaScript directly to pages using shortcodes. In my case, I set up a new Hoop (because we’re jumping through them?) called ng-Sessionize  so I could add this to the page where I wanted to see the info:

[hoops name="ngSessionize"]

The Hoop simply contained the HTML to bootstrap the application:

<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>

<script type="text/javascript" src="https://rawgit.com/SympraxisConsulting/ngSessionize/master/build/ngSessionize.js"></script>

<div ng-app="ngSessionize">
    <base href="http://spsnewengland.org/sessions-2017/">

    <div ng-view ></div>

</div>

You’ll notice here that I’m loading the following libraries:

• Fontawesome – This is a nice library full of useful icons, and I use it in most projects.
• angular – Yes, this is the old 1.x version of AngularJS. I’m an old dog, and “no new tricks” is sometimes my motto.
• angular-route – in case we want to use routing, but I’m not really in this case. I’ve got routing stubbed out in case you want to enhance things.
• angular-filter – This gives us a nice set of filtering capabilities, which I also use all the time.

Finally, I’m loading my ngSessionize application code. I’m loading it above directly from the repo using RawGit. This is excellent for development, but you’ll probably want to host the js file somewhere else when you’re up and running – or not.

If you’d like to see things in action, check out this hidden page on the SharePoint Saturday New England site which shows the sessions and speakers from our 2017 event.

The code for ngSessionize is in our Sympraxis Consulting repo, and it’s set to public. The way I worked with it was:

• Make changes (I’m using WebStorm)
• Commit and push the changes to Github
• Refresh. Sometimes it takes 5 mins or so for RawGit to catch the webhook, so it’s a little painful, but I got used to it.

This little project is also a great way to get up to speed on some of the so-called “modern” toolchain. I’ve set things up to use Webpack to build and bundle the code. I’m also using SASS for the CSS (albeit not to great effect), and separate components for each of the pieces of the application functionality (Sessions, Refiners, and the Modal fr speaker info).

The biggest changes you’re likely to want to make are to the CSS, as ECS’s purple or SPSNE’s orange are not your colors. You’ll also need to replace the token for the Sessionize endpoints with your own. I’ll add some more of these details over in the repo’s readme. but feel free to ask questions here.

If you end up using the code, please let me know in the comments. I’d also love to get pull requests if you come up with something better or add more functionality.

Thanks to Adis for giving me the chance to work on this – it was great fun!