How to Embed a PDF Viewer in Articluate Storyline

PDF-blog-feature-in-post
Utilizing resources such as PDFs in online training can create a really bad user experience. Think about it, you are participating in your yearly compliance training, and you are asked to look at the PDF, you click the link. Wait, what just happened? Now you are being sent to another tab or a new window opens up depending on your browser. The first thing that crosses your mind is, “I better be able to get back to that training because if I have to start over again someones gonna pay…” Geez! Now you sound like an aggressive person, who gets enrolled in an anger management course (with more embedded PDFs!)
Well, I am happy to tell you that you can now allow your user to view PDF’s without forcing them to leave your training. Oh, and they can seamlessly zoom in and out, along with printing and many other cool features!

5 Quick Steps to Embed a PDF Viewer in Articulate Storyline

Step 1 – Download, unzip, and open this file (http://www.course-demo.elearningbrothers.com/blog/071714/pdfViewer.zip)
Step 2 – Copy the webObject into your training
Step 3 – Go into Player settings > Resources > add a PDF (make sure there are no spaces in the name)
Step 4 – Create a storyline variable called “storylinePDF”
Step 5 – Set the value of this variable to the exact name of the PDF (i.e., TrainingDoc.pdf)

 

Here is What I Did

I used a free JavaScript PDF viewing engine developed by Mozilla called PDF.js (http://mozilla.github.io/pdf.js/). I modified the PDF URL to point to a Storyline variable that contains the name of the PDF. Then I pointed the source of the PDF viewer to the file location where Storyline put its PDFs when published.

Note: This example uses HTML5 technologies, and, therefore, will not function within browsers that do not support HTML5 (i.e., Internet Explorer 8 and below).

Very Important Note: This requires a web-server to run properly. Either post the final output to SCORM Cloud, post to your web server, or use a locally hosted test server (i.e. IIS, Wamp, or Mamp).

————————————————————————————————————

Another helpful eLearning tip is to use Articulate Storyline Templates to save precious development time. Click the button below to get started.

Get Premium Articulate Storyline Templates

18 Comments

  1. Hi!

    This concept is awesome!!! Except, I can’t get my version to work… :-(
    I’ve followed the steps provided, and the viewer displays, but it doesn’t display any content. Where did you assume Storyline saves Pdfs? Maybe if I know the path I can ensure that the document is there, or at least get closer to diagnosing what I am doing wrong?!

    Thank you so much!

    Kind regards,
    Celeste Mulder

  2. Hi Celeste!

    Sorry to hear things aren’t working right. I just sent you a tweet and just saw your question here. Let me check with Brother Frazee (the author of the post) and get back to you with an answer. What version of Storyline are you using?

  3. Celeste, Brother Dan Frazee will be emailing you shortly to answer your question. Thanks again for reaching out to us. :)

  4. Hi

    I think this is a great idea… Except it doesn’t work for me either. When I click your resource from your file it opens in a new window, as usual. I created a file for myself and it does the same. Are we missing a step somewhere? I play the published file with Google Chrome 36 and IE 9 (in IE 9 at least I see the viewer, but the file opens in a separate window). I have the latest version of Storyline.

  5. Hi Helene,

    Thanks for your comment. These are usually simple tweaks but let me get in touch with the developer so he can email you to solve you issue. Have a good day. :)

  6. I am in the same boat as Celeste. It shows the viewer, but not the document. Any help would be appreciated.

  7. Hi Joe, we are working on a solution. We will keep you and Celeste posted once we have the answer. Thanks for letting us know.

  8. Hi Kawstov, thanks for your help in supporting this tutorial. The link you shared is super helpful for anyone having issues with the code.

    http://pdfobject.com/instructions.php

    Hope you have a great day Kawstov!

  9. Hey everyone! We apologize, we forgot to mention that this requires a web-server to run properly. Either post the final output to SCORM Cloud, post to your web server, or use a locally hosted test server (i.e. IIS, Wamp, or Mamp).

    That should be the fix for anyone having trouble.

  10. I am also having issues with this process, even when viewing through the LMS we use for our e-Learning. I completed steps 1-5, but am wondering if I am missing something…is there something else I am supposed to do besides the five steps listed above? The viewer appears fine, but there is no pdf file showing within it…thanks in advance!

  11. Hi Debra,

    Thanks for testing out this eLearning tip. Did you make sure to test the output to SCORM Cloud, a web server, or a locally hosted server? This requires a web-server to run properly. Either post the final output to SCORM Cloud, a web server, or use a locally hosted test server (i.e. IIS, Wamp, or Mamp). That should fix the PDF not showing. Have a good day!

  12. So if we are uploading to an LMS there is no way to use this without paying for SCORM cloud?

  13. Hi Tyler, let me check with the developer to see if that is the case. I’ll get back to you. Thanks for your comment.

  14. This is a terrific idea, brothers. Unfortunately it does not seem to work on the ipad. All I get is a blank pdfviewer window…

  15. Hi Xan, yes. Sometimes not everything works in iPad. Let me see if one of our developers can find a solution or work around. I will get back to you. Have a nice day!

  16. That’s a great viewer.

    I’m also keen to see this work on the ipad Articulate App for local viewing of pdf documents for the iPad. Currently, I’m pointing to my google docs web server. Thanks to Garry in this elearning heroes article for his advice. But what about when I’m roaming and not near a hot spot for wi-fi connection. This is when being able to view it local would be best.

    I also have multiple pdf documents to view in the one stroyline, what do I need to change in the web object and the variable to be able to do this successfully.

    Ps. Works great! Thanks for sharing your demo.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>