Embedding a PDF reader into Storyline

Oct 17, 2017

Ian Anderson
By Ian Anderson

Hey,

I need to add a library of 50-odd PDFs into an e-learning module aimed at upskilling our sales team.

I have used the Resources, but that's a bit of a Plan B at the moment.

I would like to embed a PDF reader into the various slides so learners can view the PDF on the same page and not have to go to another tab/page.

My questions are...

  • Where do I have to host the PDF source files? (We have pretty strict rules about hosting docs externally.)
  • If I need to host them in a folder, does it need to be in the same folder as my .Story file? At the same level? Can it be in a sub-folder?
  • What embed code do I need to use to embed the player? (I found a link with various codes here before but now I can't find it for love nor money.)

I think that's all for now, but any help will be hugely appreciated!

Thanks,

Ian

 

36 Replies
Ian Anderson
over 6 years ago10/18/17 at 12:48 pm (UTC)

When you have a Storyline file with a PDF embedded in it, where do you have the PDF (html and PDF) saved in the whole of your folder structure? Do you have them saved in a folder at the same level as the .story file? Or is it one level down? Does that make a difference? I've attached the two folder paths that i've tested and haven't worked.

OWEN HOLT
over 6 years ago10/18/17 at 2:33 pm (UTC)

You can use a Web Object as a brief case. Here is how it works:

  1. Create a folder on your desktop or in your documents folder or anywhere that is convenient and name it something memorable. The location & name are not important. Create an empty html page and save it as index.html inside of your folder. You can use this or something like it for your index page:
    <html>
    <body>My PDF Pre-Loader</body>
    </html>
  2. Copy all your pdf files over to the folder you created.
  3. Add a scene to your project that is outside of the user navigation and insert a web object to the default slide in your new scene. For the location of the web object, point to the folder you created in step 1. The web object will look for your index.html page in that folder. Note that you select the folder for the object, not the html file.
  4. Publish your project.
  5. In the published files, locate the story_content folder and open it. You should see a WebObjects folder; open it as well. Inside the WebObjects folder will be a folder with a unique alpha numeric name that was assigned when you published. something like (but not exactly matching) the following: 6XTsJuVAMfe. If you open this folder you will see all of your files. As they are now part of the published StoryLine output, they will be pre-loaded along with other course content!
  6. Identify your relative links based on the folder structure detailed above. It should be something like story_content/WebObjects/6XTsJuVAMfe/example.pdf
  7. Add the links to your pdfs however you want to in StoryLine and republish. 
Ian Anderson
over 6 years ago10/18/17 at 2:54 pm (UTC)

Thanks Owen, I really appreciate you taking the time to write that. I think I see what you mean.

A couple of quick clarifications, you can see that a lot of this is new to me...

  • Why do I need to create a slide outside of the user navigation? Was that where I needed to add this web object?
  • I've copied two PDFs into that folder, so when I open I see one index.html doc (made in Notepad) and the two PDFs. Is that right?
  • Can you explain what you mean in Step 6? I've attached a screenshot of the alphanumeric folder so you can see what I am looking at. What do you mean by 'Identify my relative links based on the folder structure detailed above'.
  • When I republish does that not overwrite/ignore all of the above?
OWEN HOLT
over 6 years ago10/18/17 at 6:17 pm (UTC)

Answers to follow.

  1. Why do I need to create a slide outside of the user navigation? Was that where I needed to add this web object?  
    You don't want users to see the actual slide and YES, this is where the web object goes. 
  2. I've copied two PDFs into that folder, so when I open I see one index.html doc (made in Notepad) and the two PDFs. Is that right?
    YES
  3. Can you explain what you mean in Step 6? I've attached a screenshot of the alphanumeric folder so you can see what I am looking at. What do you mean by 'Identify my relative links based on the folder structure detailed above'.
    Based on what I see, your links are:
    story_content/WebObjects/5WsJiZccjVh/PP_Healthcheck.pdf and 
    story_content/WebObjects/5WsJiZccjVh/Example_one_pager.pdf
  4. When I republish does that not overwrite/ignore all of the above?
    NO, as long as you don't add additional files to the folder or change the web object itself, the file will retain this folder title for future publish events.

OWEN HOLT
over 6 years ago10/18/17 at 7:37 pm (UTC)

It isn't so much hidden as it is a slide the user never navigates to. If they did, all they would see is your blank index.html page on a slide. Not very useful for the learner.

The slide's real function, however, is to create a link to the folder where you are keeping all of your stuff. It turns the folder into a sort of suitcase that travels along with the rest of your story content. Does that make better sense?

Ian Anderson
over 6 years ago10/19/17 at 8:14 am (UTC)

Thanks Nancy. As I understand it, I upload my file, click view, get shown my document, then upload it in my Storyline file with the URL (https://4html.net/ViewerPDF/#/source/PDF_Title_here.pdf) created?

Is that right? Is that likely to be a secure link? The PDFs will contain sensitive data, so that part is key. The whole package will sit on an LMS behind a login, so that element will be fine. I just don't want the PDF 'out there' online.

Ian Anderson
over 6 years ago10/19/17 at 9:27 am (UTC)

Hi Owen. I've done the above steps - I can see the PDFs and the html file in that folder, but now I'm not getting the PDF to link. I have my 'hidden' slide/scene 2.1, and a second layer on slide 1.3. I want the PDF to live on that second layer on 1.3.

I've tried the whole folder path from the output folder (....Storyline output\story_content\WebObjects\5tA5bnpp3wp\PP_Healthcheck.pdf), but it's not a valid address.

How do I add that individual PDF link as you point out in Step 7? I presume I just then repeat that same process for the other PDFs on the other layers.

 

OWEN HOLT
over 6 years ago10/19/17 at 4:43 pm (UTC)

OK, I tried this and it seems to work for Chrome. I don't have edge to test it there.

  1. I created a folder to house all of my pdf files as well as a blank index.html page.
  2. I created an html page for each of my pdf files. The html on each page looks like the following:
    <html>
    <head>
    <title>PDF 1</title>
    </head>
    <body>
    <object data="Sample_PDF_1.pdf" type="application/pdf" width="100%" height="100%">
    <p>This browser does not support PDFs. Please download the PDF to view it: <a href="Sample_PDF_1.pdf">Download PDF</a>.</p>
    </object>
    </body>
    </html>
  3. In my StoryLine file, I add a web object on the page that users will see (not hidden as instructed before) and point to the folder with all of my resources. This will load the index page in the published content.
  4. I execute the following line of JS on the SL slide when the timeline starts to locate the iframe that holds the web object and give it a unique ID. THIS ONLY WORKS IN HTML5 but not in flash.
    $('iframe').attr('id','MyPDF');
  5. In my example I added buttons to execute some JS code to change the source of the iframe content (i.e. load a different html file that displays a different pdf).  Here is the code for the buttons. Again, this only works in html5.
    Button 1:
    var source='story_content/WebObjects/5uP2wZTlzJo/PDF_1.html';
    $('iframe#MyPDF.shown').attr('src', source);
    Button 2: 
    var source='story_content/WebObjects/5uP2wZTlzJo/PDF_2.html';
    $('iframe#MyPDF.shown').attr('src', source);

I'm attaching the SL3 .story file as well as a zip of the published example. Unzip the published content to view how it works.  Note that if you republish the SL file yourself, you will need to go back in and update a portion of the code to match your new folder destination. In other words, the part shown in bold will change: story_content/WebObjects/5uP2wZTlzJo/PDF_1.html. After you publish, update, and then republish, everything should work.

Ian Anderson
over 6 years ago10/23/17 at 8:37 am (UTC)

Thanks guys.

I still couldn't quite get it to work, so the document ended up being loaded as PDF on our internal server. I have uploaded it with the following script which is similar to your code Owen...

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Code of business conduct document</title>
</head>

<body>
<object data="Code of Business Conduct.pdf" type="application/pdf" width="100%" height="100%">
<p><b>PDF Title is here</b>: This browser does not support PDFs. Please download the PDF to view it:

<a href="https://PDFurlishere.pdf">Download PDF</a>.</p>

</object>

</body>
</html>

When I launch/test the index.html file it opens full screen in my browser. However, when I launch it after i've puplished it, it looks like this...

Shrunk down PDF

I even went back and used Owen's initial code but I just had a black 'Initializing' screen.

I've looked the Player, changed the width and height, but still no joy.

Any ideas what might be making this happen?

Ian Anderson
over 6 years ago11/01/17 at 8:42 am (UTC)

I tried a second version and instead of resizing at all, I just let it fill the screen and published. It looked fine. I went back in and 'gently' resized it, published, and again it worked. 

It seems like it didn't like it went I 'quickly' resized it. 

This may not be the solution, surely, but it seemed to work for me.

This discussion is closed. You can start a new discussion or contact Articulate Support.