Embedding a PDF reader into Storyline

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

 

41 Replies
Ian Anderson

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

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.

Ian Anderson

Hi Owen - i've attached a test .story file. This is the code I am using in a folder on my desktop....

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum dolor sit amet document</title>
</head>

<body>
<object data="Lorem ipsum dolor sit amet.pdf" type="application/pdf" width="100%" height="100%">
<p><b>Lorem ipsum dolor sit amet</b>: This browser does not support PDFs. Please download the PDF to view it:

</object>

</body>
</html>

When I preview in Storyline it shows full screen, but when I publish to Articulate Review it's not quite filling the edges horozintally and vertically. Really weird.

Lisa Anderson

Hey Owen,

I found this older post and appreciate the efforts you put into this; spectacular. You specify that this only works in HTML5. If you don't mind me asking, why is that? I was able to get it load by launching the story.html file, (it took several times load, close and reload) but Adobe kept giving me an error message that I couldn't see. It was blank. But, when launching HTML5, no problem. 

I'm just curious about the difference and would totally appreciate any input.

Thank you again and cheers!

Lisa

Mats Schieche

Hi Owen, thanks for a great post :-)

I am trying to get this to work :-) But i dont get the same result that you got in the example file you included.

I work in SL360 and have created one base layer with 4 links to 4 layers. On each layer i want to show a PDF document.

I created a folder with all PDFs and the empty Index.html file.

In each layer i have a webobject with the link to each PDF document.

Also on each layer i have 2 triggers with javascript.

one  with the string   $('iframe').attr('id','MyPDF');

one with the string   var source='story_content/WebObjects/5utBENVnUuo/xxxxx.html';
$('iframe#MyPDF.shown').attr('src', source);

I have updated the code in the destination. The course is run with only html5 and in chrome.

When i run the course the layer does not show anything :-(

Any ideas?

 

Martin Dean

Hi Owen

First, thank you so much for the workaround to embed interactive PDFs into Storyline.  As a JS newbie, it was really a case of cut-paste and edit.  It works really well.

Having now embedded several PDFs, I have a problem and wondered if you could help?

I have created separate Web Object screens, each with an embedded PDF, and each of these is lightboxed from various parts of the programme.

The PDFs contain (hundreds of) links to various resources.  When these links are activated from the published SL package, they open in the same window and the only way to get back is to use the browser back arrow - upon which the SL package reloads. This requires the user to re-navigate to where they were in the package (for some reason RESUME/RESTART does not work).

Do you know what I would have to do to the links within the embedded PDF to keep the 'master' in the SL programme and still be able to come back to where the learner jumped out when they use one of the links?

Would really appreciate your help

Rupert Abel

Owen, does this still work? I am referring to your second solution above with the x2 buttons? I downloaded both the source file and the runtime html. The html you provided still works, but I don't think the source file does work, if amending and publishing now. I do understand how your solution works and do understand the code. And I have checked very thoroughly to see if I am making a mistake in some way, but I don't think so. What happens now, when I create my own creation and test off webserver, is that when selecting the buttons, nothing shows for the pdfs. Your idea was a great solution and it would be a shame if it was no longer working! If you are still active, it would be great to hear from you . Thanks.