Print ANYTHING in StoryLine

By adding a new tab in the player properties panel and assigning it to execute the "window.print();" JavaScript, you can allow your participants to print any/every slide in your StoryLine projects including "Notes" or "Certificate" slides! No need to create a complex JavaScript course certificate solution, simply build a beautiful slide and let your users print it directly from the StoryLine player!

For SL 3 and 360 users, you can also move, reformat, hide, and reveal the button so you can take control over what users can print.

I've included the screen shots I used in the video in the attached Word document along with the JavaScript code snippets and an SL3 .story file.

178 Replies
Math Notermans

As Owens sample uses jQuery and the newest versions of Storyline donot include jQuery anymore i updated his Storyline file to work with Vanilla Javascript. hide( ) and show( ) are 2 jQuery specific functions and do not work without it, so i changed that to use GSAP. As GSAP is built into Storyline that works great. Also no problems with any CSS, because with GSAP you can change CSS quite easily. This works only in the Classic Player. The Modern Player has other class names, so for that you have to puzzle a bit.

Math Notermans

As there are differences in the Modern Player i fixed the above to work without jQuery in the Modern Player. Mainly the only difference was the name of the custom print button. In the Classic player it is: link-right-1 where as in the Modern player it is: link-right-0. Offcourse this also depends on what other components you have active in your player.

Position also is something that works different in the Modern Player. I didnot fix that here, but it is as easy as changing the values in the GSAP code to change the position...
gsap.set(printButton, {
height:'30px',
x: '80px',
y: '8px',
zIndex: 1000,
borderColor: "#B1B1B1",
autoAlpha:0
});

Jan van Vledder

Thanks Owen,

Although a post from three years ago, I now  found this topic. I have been struggling with how to print a certificate and this is one of the straightforward methods.

I have done it a bit differently: On the certificate slide I insert a hotspot. The trigger is to click on the hotspot to run the javascript. On the previous (congratulations) page, I include the instruction how to print the certificate.

An other method I used is: make a screenshot of the certificate slide, preferably with a snipping tool, paste into PowerPoint and print (or save as PDF). Advantage is that it's a full page certificate, without the title, page numer and footer text.

Jeffrey Riley

I agree the shorter version Owen created is the simplest. I have instructions on mine for the learner to add some information and then send to PDF rather than a printer. 

I like your idea of a hotspot so it must cover the entire slide? I have it so my print button is set to hidden but that makes it impossible to reprint if needed.