How to Embed a PDF Viewer in Articulate 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 PDFs 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).
Read the my second part of how to embed a PDF Viewer with multiple PDFs in Storyline:

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

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

36 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.

  17. Love this!

    Probably a silly question but I wasn’t able to problem solve it so I’ll ask…would you be able to insert multiple PDFs? (on separate slides maybe?)

    For example, we have a compliance doc that we require each year (we currently have it in three languages and I am wondering if the learner could choose their language of preference using buttons that then take them to the correct pdf displayed with the viewer?)

  18. Hi Sarah, great question. Let me ask one of our developers and get back to you.

  19. This worked great! Thanks!

    Was wondering if there was any way to link to a specific page (or pdf destination) in the PDF viewer?

    i.e. normally with html this would be accomplished in this manner: http://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html

    It works similarly in storyline with hyperlinks, but I’d much prefer keeping the user within my training using something like this viewer.

  20. Hi Jen, great question. Let me ask a developer who will email you shortly. I’ll post the answer here as well. Thanks for the comment. Have a good day.

  21. Hi Jen, sorry for the delay. I had a developer look into the code about the embedded pdf. He played around with it for about 15 minutes and wasn’t able to do it.
    I used one of the examples here ( http://viewerjs.org/ ) to create this so someone would have to dig into the code to figure it out.
    And if you are interested in coding it, this is the file you’d have to edit to get it to work: (story_content/WebObjects/viewer.js)

  22. Hi,

    Thanks for this example. It’s great! I’ve managed to get it working with multiple PDF’s.

    However,I’d like to know how to do the ‘Direct Link’ shown in Kawstov’s example.

    Kind Regards

    Shane

  23. So I found a workaround in order to pull off linking to a specific page or destination within the pdf. Or even if you don’t need to link to a specific page, this is a good alternative to the viewer that has similar results.

    Basically, you just embed the pdf into an HTML page and specify open parameters in the embed code. Toolbar and status bar are available parameters, so they more or less mimic all the functions of the viewer. To string multiple parameters, just put an ampersand between them. There’s a long list of available parameters beyond those I mentioned available here:
    http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

    Then you just insert that page as a web object in storyline. So for an example here is the embed code I’m using:

    *embed src=”myfile.pdf#page=5&view=fitH&toolbar=1&statusbar=1″ width=”585″ height=”500″ pluginspage=”http://www.adobe.com/products/acrobat/readstep2.html”>
    (Make sure to use the opening bracket < instead of the *)

    What this code does is start at page 5, fit the pdf horizontally and show the toolbar and status bar. This even works on slide layers.

  24. Thanks for the tip, Jen. I will have to try that. Thanks for adding some of your code too. I couldn’t find any solutions to the code except just breaking the code and having the user add a bracket back in. Hope you have a great day!

  25. Wow, great tip and good information in the thread! Thanks :)
    Bookmarked and tweeted it.

  26. Hi Marcel, thanks for tweeting this. So glad you found this tip was valuable. Have a great day.

  27. I would be interested in this working after converting to scorm and publishing to Litmos. Someone ask this question earlier but I did not see a response from Brother Shawn. SO .. will it work properly in Litmos?

  28. Hi Andy, thanks for your comment. 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). It should work, have you tested it on Litmos yet?

  29. Heya!
    So what if I want to embed this viewer in Captivate or Lectora Inspire? Is the code available for those programs as well?

  30. Hey Laura, thanks for your comment. We currently don’t have this available in Captivate or Lectora. But here is Anita Horsley’s Captivate version:

    http://captivatecrazy.blogspot.com/2012/03/embed-pdf-in-captivate-for-lms.html

    And here is a Lectora Community question that may help you:

    http://lectora.com/forum/showthread.php?t=3040

    I suggest testing those two out. If you have any issues I recommend asking the communities for help. Best of luck, have a great day.

  31. Has anyone found a workaround for IE 9? I only get a tool bar on IE9 but works well on Chrome, & IE10.

  32. I’m using IE 11 & Chrome but I was not able to get the PDF viewer to fully work IE <=9. :(

    I customized a few of the files (index.html , viewer.html) and if the web browser is NOT compatible a window inside of the viewer displays notifying the user. If the browser IS compatible no warning is displayed and the PDF shows up like normal.

    I used "ie6-upgrade-warning" and edited a few of the files for it to work on IE 11 and Chrome but notifies IE 9,8,7,6 user their browser is not supported. It blends well with this storyline webobject but must be added to the zipped file before LMS upload.

  33. Hi Vince, is hard to work with. My only suggestion is to keep testing and trying new things. We haven’t had too much luck with IE 9 and above either.

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>