Skip to Main Content

Added keyboard support to ON24 with bookmarklet

Bookmarklets are fantastic. Not having a keyboard support for a web app is less fantastic. Here's a short story and bookmarklet of how I added keyboard (and by association, presentation clicker) support to ON24's Webinar platform.

Two weeks ago I was preparing to give a talk at sthml.js meetup remotely from my home studio (I call it a studio: it's a webcam on tripod + wireless mic) and we were using ON24 as a webinar platform for that meetup.

During our rehearsal session the day before the meetup, I noticed that there was no keyboard support for switching slides which also meant that my Targus presentation clicker (that emulates(?) keyboard) didn't work either. I had to move my mouse over a small arrow and click that – not a fun thing to do when I'm standing in front of a camera and talking to an audience across the pond.

As someone who likes to hack things to build the functionality I need, I figured I can do this by myself. Instead of building a Chrome extension for this that I knew I'd maybe need that one time instead of constantly, I went to the bookmarklet route.

Bookmarklets are small Javascript scripts that are triggered when a user clicks on a bookmark that contains that code. Since all I needed here was to translate some key presses into Javascript click events, I figured bookmarklet is the simplest way.

Here's the full code. I started by adding functionality for left/right arrow keys but then learned that my clicker actually sends PageUp and PageDown presses so I added them in.

const prev = document.querySelector('.arrow-btn.prev')
const next = document.querySelector('.arrow-btn.next')

const LEFT_ARROW = "ArrowLeft"
const RIGHT_ARROW = "ArrowRight"

const PAGE_DOWN = 'PageDown'
const PAGE_UP = 'PageUp'

document.onkeyup = event => {
    if(event.code === LEFT_ARROW || event.code === PAGE_UP) {
        prev.click();
    } else if (event.code === RIGHT_ARROW || event.code === PAGE_DOWN) {
        next.click();
    }
}

In bookmarklet, it looks like this:

javascript:void(function() { const prev = document.querySelector('.arrow-btn.prev'); const next = document.querySelector('.arrow-btn.next'); const LEFT_ARROW = "ArrowLeft"; const RIGHT_ARROW = "ArrowRight"; const PAGE_DOWN = 'PageDown'; const PAGE_UP = 'PageUp'; document.onkeyup = event => { if(event.code === LEFT_ARROW || event.code === PAGE_UP) { prev.click(); } else if (event.code === RIGHT_ARROW || event.code === PAGE_DOWN) { next.click(); } }})()

To create a bookmarklet, you can drag ON24 KEYBOARD SUPPORT to your bookmark bar. Then you navigate to your presenter mode in ON24 and click the bookmarklet.

Voilà, you have keyboard and clicker support.

More on the topic in my blog

  • Adding keyboard shortcuts to Viaplay

    Viaplay's video player was lacking some shortcuts that I had gotten used to with other streaming sites. I built a Chrome Extension to add support for mute and fullscreen shortcuts to make my life a bit nicer during the NHL playoff season.