Sync Your Presentation Slides Across Devices with Impress.js and Impressr

By . in Toolkit. Updated on .

I’ve delivered talks on Web Development and WordPress at various universities and schools, and a recurring issue is that audience members seated at the back often struggle to see the slides clearly. I started thinking about how to make the slides more accessible while keeping both the speaker and the audience on the same page.

After some research, I discovered a solution that allows the audience to view the presentation slides on their own devices while synchronizing the slide content with what I’m presenting on stage. Here’s how you can achieve this.

Creating the Slides

To implement this, instead of using Keynote or PowerPoint, you’ll need to create your slides with Impress.js.

Impress.js enables you to build web-based presentation slides, complete with impressive animation effects that often surpass those found in Keynote or PowerPoint. If you have some experience with CSS3, you can even create your own custom animations (check out the demo here).

But what if you don’t have knowledge of CSS, JavaScript, or HTML?

In that case, you can use Strut, a web-based application that lets you create Impress.js slides using a GUI. Although the app is still in beta, it works well. You can insert text, images, or videos via drag-and-drop, much like in Keynote or PowerPoint. Additionally, you can customize the background, colors, font family, and font size.

Strut GUI for creating Impress.js slides

Once your slides are ready, click the big green button on the right labeled Impress. Then press Command + S (Ctrl + S on Windows) to save your slides.

Synchronizing Slides

Now, let’s synchronize the slides. The advantage of using Impress.js is that it makes your slides accessible on laptops or mobile devices. This not only allows the audience to get a closer look at the slides, but they can also interact with them. As you navigate through your slides, any changes – such as moving to the next slide – will be reflected on their devices in real-time.

To achieve this, you’ll need a JavaScript library called Impressr.js. Although this library was published a few years ago, it still works well and is easy to use. Download the library, and then add the following code within the <head> tag of your HTML file.

<script src="js/jquery.signalR.js"></script>
<script src="js/jquery.signalRamp.js"></script>
<script src="js/jquery.impressR.js"></script>

Next, initialize Impressr with the following code:

$("#slide-container").impressR({
  proxyName: 'presentation'
});

Ensure that you select the correct element that wraps around your slides. The proxyName option can be any string you choose.

Now, your slides should sync in real-time across all devices that are viewing your presentation. Note that all devices need to be connected to the same network. To test it, open the slides in two different browsers. For instance, you can open the slides in Chrome and Firefox simultaneously.

Slides syncing in real-time across different browsers

You can also test this functionality on mobile devices.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail