Embedding a PDF reader into Storyline

Oct 17, 2017

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

over 6 years ago11/01/17 at 10:27 am (UTC)

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.

Test_for_one_pagers.story

OWEN HOLT
Hero

over 6 years ago11/01/17 at 1:02 pm (UTC)

Sometimes, iframes (web objects) just get buggy like that; I'm not sure why. If you have it working, that is the important thing.

Lisa Anderson

over 5 years ago10/13/18 at 12:56 am (UTC)

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

over 5 years ago10/15/18 at 4:25 pm (UTC)

The flash player (soon to be obsolete) does not allow the same identification and manipulation as the html5 version. Therefore, the JavaScript I used will work only with the html5 player.

Mats Schieche

5 years ago01/18/19 at 2:39 pm (UTC)

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?

OWEN HOLT
Hero

5 years ago01/18/19 at 3:26 pm (UTC)

Do your html documents load and display the pdfs? I assume you are using the 2nd code with HTML that will detect the browser's pdf support?

Are you able to share your file?

Mats Schieche

5 years ago01/18/19 at 3:36 pm (UTC)

Hi, i just followed your instruction. do you mean that i should have xxxx.pdf instead of xxxx.html?

5 years ago01/18/19 at 3:37 pm (UTC)

I just updated my response. Are you using the 2nd code with the html page that detects browser pdf support?

5 years ago01/18/19 at 3:55 pm (UTC)

Hi, i used the one with 7 steps.

/Mats

5 years ago04/04/19 at 11:58 am (UTC)

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

over 3 years ago09/04/20 at 11:17 am (UTC)

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.