Is there a way to know what device is being used to view a course?

Sep 06, 2017

Now that we have this lovely responsive player in Storyline 360, is there a way to to find out what device is being used to view a course so that we can set a variable and adjust some internal controls?

We have some custom buttons that are very small when a course is viewed from a phone, and would like to be able to detect when we need to hide the small version, and show a larger button, easier to touch.

13 Replies
Michael Anderson

Karen, I created this demo using code from the MobileESP device detection project ( This is a free option, and it seems there have been no updates to its development in 2 years. There are paid options for this that are continually updated, which may or may not be necessary for your use.

I just tested it quickly on my desktop and my Android phone. Please test the demo on your intended devices to make sure it behaves as expected. I've attached the Storyline 2 project file (just upgrade it to 360 to open). I can develop in Storyline 3 also, I just usually try to use 2 so that everyone else can open the file.

Demo link:

Amy Lewis

Hello all, 

I posted these in another thread but thought you might find them helpful as well. If you'd like to avoid using a web object and instead put all of the JavaScript code directly in an 'Execute JavaScript' trigger, this is possible!

Here is a sample file (all thanks to Michael Anderson) showing how to set a variable as 'true' if the course is viewed on mobile and 'false' if viewed on a laptop/desktop. Once you have this variable set, you can create all sorts of other triggers to alter your course based on the value of that variable.

I've attached my sample .story file here (sorry it's in 360) and have also attached a .js file of the exact JavaScript code in case anyone can't open the .story file. Apologies that the copy/pasted code is very poorly formatted (read: not at all formatted).

Step 1: Create a True/False variable called clientIsPhone

Step 2: Create an 'Execute JavaScript' trigger on the slide. Copy/paste the code directly into the trigger. You can copy to code either from the trigger in the demo .story file or in the attached .js file.

Here's the demo link:  

Ravindra Gardi

Hi Amy or Michael Anderson or Coomunity,

The given logic is working but using this value I am executing one more JavaScript, which is not working. 

Purpose of Second Javacript I am using:

This is crossword slide once user Type character(text entry) in first box, cursor automatically moving to next (text entry).

But I want to implement this JavaScript only on Web version not on devices, because on the devices it is not allowing to learner to enter anything in the text entry. so I am trying to implement the device detection script provided by you people. 

Now I just want to execute the script which on the crossword slide but only this course is viewed on the desktop not on the devices.

PFA for Output and story file. Please help on same.


Ridvan  Saglam

Thank you very much Amy, 

It works perfectly for me.  I used a full-screen image in my course, but it doesn't work on mobile. So, I added the same image on SlideMaster and used the code to make it visible when the course is visited on mobile. 

Here you can see it in action;

numan john

There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect mobile device based on the CSS media query.

let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;
// The viewport is less than 768 pixels wide
//Conditional script here
} else{
//The viewport is greater than 700 pixels wide
alert("This is not a mobile device.");

You can use above script to do show/hide elements depending on the screen size.