DIY – Realistic Live Multi-Users Product Demo

Doing a demo of a modern web app can be challenging when you want to showcase communication features involving several devices or user personas. Here is the proposed solution in action:

The solution proposed here works well for most Web Apps, and in the following situation:

  • Live demo via Skype, Zoom or other video communication tool. Remote people can even join the session with the Web App to be part of the demo scenario.
  • Video demo for YouTube or other. Any screen capture software or browser extension works to capture the video.

Web App Demo Kit

Today, most web app manage multiple user’s devices for multiple personas, and this true for consumer web apps, as well as business and education.For example, Ormiboard, a web app for education, can be used by teacher and students, and all users can have multiple devices. it takes at least 4 devices to do a good demo: the whiteboard, the teacher device, and some student’s devices.

In the picture below, we can see a room with 4 devices.

When the mouse moves over the tablet, the tablet is magnified and the background fades to blur.

Here is the demo video in action:

 

How it works

To achieve this demo, I created a web page that can host several instances of a web app. In this pages, the devices are visible in a room, and you can move the mouse over any device to zoom it and interact with it.

A blur effect was added to the background to better focus the user attention to the device involved. When you want to showcase the communication feature on more than one device, just move the mouse over the window and all the devices will be visible simultaneously (at least partially).

You will need basic HTML knowledge to read this section and to adapt the provided code to your needs. The code includes some JavaScript but you don’t need to edit them except if you want to go beyond and do your own customizations.

Important: I only tested the solution on Chrome browser, but it should work on any with little tuning.

A single web page embedding the web apps

The code of the web page is provided here.

Requirements:

  • Tested with Chrome Browser only, use Chrome if possible
  • HD monitor (1920×1080 pixels resolution). Maximized browser window or flullscreen (just press F11 when viewing the page).
  • Chrome zoom should be set to 100% (no zoom)

You can test the demo here (only tested on Chrome): Ormiboard – multi-users web app demo

Code

You can copy and save the following code into any HTML file on your server, or local.

  • Create a new empty text file in any folder on your disk
  • Download and save the sample image here
  • Copy and paste the following code to it and save
  • Drag your HTML document into a Chrome browser window to view the result

The part you will want to change is the URL to the web app. In the example the URL is “app.html”, you can replace it with your own filename, or an URL pointing to your web app.

If you need to allow your web app to run in an iframe, you will need to change a meta tag in the HTML code of your web app.

You will find more information here: X-Frame-Options

 

Shares

Leave a Reply