Realtime Presentation Remote Control with reveal.js and PubNub

We would like to introduce you to Salvatore Cordiano. He is a full stack web developer with over 6 years of experience in web, mobile and software development. He recently gave a talk at the Chatbots Milano Conference in Milan and he surprised the audience with his slides. He used PubNub to allow the audience to interact in realtime with the presentation through a Telegram bot and he takes control of slides using this bot. To make his presentation he used reveal.js, the most famous HTML presentation framework. He wrote a plugin that is listed on reveal.js plugin page to control a reveal.js presentation remotely using a webpage or a Telegram bot. Salvatore kindly offered to write about how he created the app.

Introduction

Since the beginning of my professional career, I’ve attended many conferences, presentations and talks. Generally, speakers used to make their presentations using PowerPoint or Keynote, but now, some programmers are doing it with HTML code. Using HTML, you can make presentations rich with functionality, similar to that of a web or mobile app. This is very cool.

In the last few years, every time I did a public speech, I tried to do presentations unlike the traditional way. With that, I discovered reveal.js, a framework for creating awesome presentations using HTML and JavaScript. Reveal.js is very powerful: it supports markdown content, nested slides, PDF export and it allows to be extended by developing plugins.

I wrote a very simple reveal.js plugin to remote control slides using PubNub publish-subscribe API. It allows you to advance through your slides, for example, from a webpage, a Telegram bot or a mobile app. This is very useful for me when speaking.

Setting up reveal.js

Let’s assume both Node.js and Grunt are already installed on your machine, so we should execute the following list of commands.

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serve

Well, to view the presentation we can navigate using a web browser to http://localhost:8000.

Plugin Installation

Download from Clicking here pubnub-remote-control.js and copy it into the plugin folder of your reveal.js presentation, i.e. plugin.

Next, open index.html with a text editor and find reveal.js initialization block. Add the plugins to the dependencies in your presentation, as below.

Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'https://cdn.pubnub.com/pubnub-4.4.0.min.js', async: true },
{ src: 'plugin/pubnub-remote-control.js', async: true },
// ... 
]
});

Plugin Configuration

Now, we must configure our plugin. The pubnub-remote-control.js plugin has several parameters that you can set for your presentation by providing an pubnubRemoteControl option in the reveal.js initialization options.

To configure our plugin replace {SUBSCRIBE KEY} and {PUBLISH KEY} with PubNub valid keys.

Reveal.initialize({
// ...
pubnubRemoteControl: {
subscribeKey: '{SUBSCRIBE KEY}',    // PubNub subscribe key,
publishKey: '{PUBLISH KEY}',        // PubNub publish key
},
// ...
});

Test Drive

To test our plugin we can use PubNub debug console using the following configuration:

Publish Channel: 'input'
Subscribe Channel: 'output'

While we are displaying our presentation, we can interact with it sending a message like this:

{'button': 'left'}

or

{'button': 'right'}

Inside the GitHub project is also available a client to interact with slide using a webpage or a Telegram bot.

A demo of the previous clients for this sample presentation is accessible from:

• Telegram bot @pubnubrevealjsdemobot
• Webpage Clicking here.