Embedded Word Document or PDF

I would like to embed both Word Documents and PDFs into a Storyline Project, but the learning material will be presented offline.  What is the best method to convert a Word Document or PDF into a usable Web Object that is not hosted on the internet?  I have looked at using Google Drive to share a document and then saving the page as an HTML file, but this provides a working document rather than a clean presentation.  Any help or suggestions would be appreciated.

47 Replies
Jen McIntosh

I've been able to embed a pdf as a web object.

I've also embedded it via this really awesome PDF viewer: http://elearningbrothers.com/how-to-embed-a-pdf-viewer-in-articluate-storyline/

However, what I'm looking to do is to target a certain page/destination within a pdf without making the user leave my training. I can easily do it if the pdf opens in a new tab/window using this method: http://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html

But having the user leave my training is not an optimal solution. The PDF is a really large user guide for an application, and what I'm hoping to do is direct users to specific sections of it within the training. Anyone have any ideas?

Right now the solutions I've come up with aren't great ways to go about it. We could break the PDF up into multiple PDFs by section and embed them separately, which is obviously not optimal and also a ton of work for such a large document with so many sections. And that would also mean the user couldn't browse around if they realized other sections were of use to them. Or alternately we could put links within the PDF on the first page that allow the user to navigate to the appropriate page. But that's an extra step we're forcing the user to take, and not all users are saavy enough to handle that (and let's face it, some who are saavy enough are just too lazy to bother).

I've also been following the discussion in this thread: https://community.articulate.com/discussions/articulate-storyline/can-i-attach-or-embed-a-pdf

 

Daniel Bolia

Hi Mike,

I know this is an old post, hopefully you (or someone in the community) will still be to answer my question.

I followed the instructions for embedding PDF file, it works. However, I'm unable to get SL output to show the full height PDF window. Regardless of the PDF file properties setting used, only a partial window is created in the SL output.

I've attached a png file, which shows the screen capture of my SL file and the output as viewed in IE.

Any and all assistance is greatly appreciated.

Daniel Bolia

Hi Ashley,

Please see attached files for my SL file and the zipped output.

I'm not sure if the following settings are a factor: Story size = 16:9; Player Properties-Browser Settings are Browser size = Display at user's current browser, Player size = Scale player to fill browser window.

Thank you,

dan

Ashley Terwilliger-Pollard

Thanks Dan for sharing it here. What are the dimensions of your PDF? Perhaps you'll want to look at changing the story size to accommodate more height for the PDF as well - or as you mentioned if the browser the user is using is set to show at a smaller set up - you could look at modifying that setting as well to show it at the browser full size.

Also, as a reminder it looks like you're linking to the PDF off your D drive, as we typically recommend working on .story files and linking to files off the local drive to prevent any odd behavior. 

Janet Minchella

Need help fast!   Hot mess and deadline dates!!!! Yikes!!!! 

  1. Can someone post a sample using http://pdfobject.com/markup/index.php  script for a .PDF document that will be hosted and accessed inside the company?  (Just a copy of the actual index.html script)
  2. How do you access secure .PDF files ( https://) using http://pdfobject.com/markup/index.php?  (Just need example of the embeded code that would be used.)
  3. Do you need to create and index.html for every .PDF file you want to show inside a slide?
Ian Anderson

Hi Mike,

Hopefully you'll see this (5 years after the event!)

I've just stumbled across this as I'm having a similar issue with embedding some PDFs in my file.

I have about 50 or so that I need to dot around various places in my project.

  • Do I need to create a folder, and therefore index.html file, for each PDF?
  • Is the bit in bold the part I need to replace - <embed src="/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
  • Do I have to publish once and then link to a Web Objects folder in my output so that everything is all packaged up?

Thanks,

Ian

Mike Enders

Hi Agencia,

It looks like that website has changed quite a bit in the past 5 years! The opportunities (js vs straight HTML) have also been updated. the .js option is new to me, so if you need that option, I'd recommend walking through their site. But the straight html generator seems to work the same. https://pdfobject.com/generator/

1. Click the generator
2. Select Standard Markup (no javascript)
3. Add the name of your pdf to the URL dialogue
4. Generate the code
5. Add that code to notepad and continue on as previously described.

Here's the code where mypdf.pdf is replaced with the name of your pdf.

<object data="mypdf.pdf" type="application/pdf" width="100%" height="100%">

<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>.</p>
</object>

I hope that helps!

Mike

Tonya Thomas

Mike,

Does your link above to PDFObject.com/generator resolve the issue I have here where in 3 different browsers, the PDF I've set to open page width doesn't load that way? See the difference in the attached. IE does it perfectly—the rest don't. Chrome's doc area is shrunken; Firefox has to be manipulated via the PDF viewer toolbar; and Edge allows no adjustment tools at all, not even on right-click. Help!

Mike Enders

Hi Tonya!

I think what you're seeing is how the different browsers handle the inline PDFs. The support and implementation varies (that's why you see different PDF bars in each).

My hunch is that the inline method may not be the best approach if you're shooting for consistency. It's possible that some more sophisticated code (the .js option) could control for this, but unfortunately, that's beyond my current skill. I must consult the Google.

Mike

Maki Wiering

Hi, all, Jumping on this thread to try to get some more insight. We'd like to embed a Word document in Storyline slide to allow a learner to try some basic Word tasks. I've tried sharing the document from SharePoint and from Google Drive, but the links don't work. Would it make a difference if I saved the Word document on something like Amazon S3 or Google Cloud? Thanks! 

Leslie McKerchie

Hi Maki,

Thanks for reaching out and sharing what you would like to include with your project file. We'd be happy to walk through this with you so that you can get this working properly. I have a few additional questions to understand your current setup:

  • How are you publishing and viewing the content?
  • How did you add the Word document to the project?
  • Do you get an error message when the link is clicked?