Adding a Print Button to the Player and other SL3 / 360 Player Hacks

Similar to my post about adding a logo to the player, you can add a print button directly to the player too!  Here is how:

  1. Add a T/F variable to control running the JavaScript only once. Set its initial value to True.
  2. Add your JavaScript trigger to run When timeline starts if your control variable is equal to true. (See JavaScript explanation below)
  3. Set your control variable equal to false When timeline starts and be sure it is in the trigger stack below your JavaScript trigger
  4. Be sure the Volume Control has been selected in the Player Properties Window. (You can hide this later if you want to, but for now you will need it to use as a location target.)

Here is the JavaScript:
//First we are going to create and add a Print Button to the webpage
//Create a new input element and set its attributes
var printButton = document.createElement('input');
printButton.setAttribute('type', 'button');
printButton.setAttribute('id', 'CustomPrint');
printButton.setAttribute('value', 'Print Page');
printButton.setAttribute('onClick', 'window.print()');

//Add your button to the page
document.body.insertBefore(printButton, document.body.firstChild);

//This next part uses a bit of JQuery to find the volume control in the StoryLine player and then move the button you just created to be right after it.
$(".volume").after($("#CustomPrint"));
//Format the button with the same style as other player buttons.
$("#CustomPrint").addClass('btn cs-button')

//If you want to hide the volume control, add the following line.
$(".volume").hide();

The StoryLine file I'm including demonstrates adding a Logo, adding a Print button, hiding various player elements, and showing elements that you've previously hidden.

Credits: Thanks to James Kingsley for the inspiration. His "Hacking the Player" webinar was very useful. You can view it here: Webinar Recording

26 Replies