Summary: Use the Presenter ’09 web object to embed your PDFs easily.
Difficulty: Easy/Medium
The Portable Document Format (PDF) is a useful and popular way to send documentation. The output is clear and not easy to edit. Importing PDFs into PowerPoint is possible but the results are not really satisfactory and do not cope with multi-page files. So how can we add PDFs to our Articulate presentations and still have them looking good?
Different Methods For Adding PDFs
A number of methods have already been discussed on the Articulate forums and on the Articulate support pages:
- Add the PDF as an attachment.
Using the Attachments feature of Articulate Presenter, you can add multitudes of PDFs that people can download and view.
- Hyperlinking to a PDF on a slide.
You can either hyperlink directly to a file you have added as an attachment using the format data/downloads/thenameofyourdocument.pdf or simply hyperlink the nameofyourdocument.pdf and copy the file to the top level of your published files AFTER you have published.
- Use an online service to upload your PDF and then view via a web object.
This Articulate knowledge base article discussed the use of Scribd. Another such service is Youpublisher described in this blog article.
The method you choose depends on what you are trying to achieve and also the content. For instance, the online solutions may not be appropriate for confidential or copyright material.
Displaying a PDF via the Web Object
And this brings us to an alternative method of displaying PDFs which does not rely on uploading to a third-party site but still allows you to display the PDF in its original form on the slide.
For we often overlook the fact that there is HTML code to embed a PDF document and if we use the web object in Articulate, we can easily display our PDFs. It will also give our users the ability to zoom in on the article/image or print it directly. Here is a simple example showing a few Articulate-related PDFs:
Some of the PDFs are relatively large so they take a few seconds to load. The PDF options you have available on screen will depend on what browser you use. Tested in Chrome, Firefox 3.0 and Internet Explorer 8.
Embedding PDFs in HTML
Web objects allow you to point to external HTML sites on the Internet and incorporate them into your presentation, or embed local HTML page that you have prepared on your computer. To embed a PDF in a web object:
- Create a folder for your web object anywhere on your computer.
- Use your favourite HTML editor or open Notepad and paste the following code:
<html>
<head>
</head>
<body>
<embed src="mydocument.pdf" width="100%" height="98%">
</body>
</html>mydocument.pdf is the name of the PDF document you want to embed. The name you have in the code has to match the PDF you wish to embed.
There is nothing to stop you changing the name of the PDF to match the code. For instance I renamed my embedded PDFs, first.pdf, second.pdf and third.pdf to match where I was going to place them in the presentation.
The size variables can be changed but I found that setting 100% for width and 98% for height allowed the web object to display without an unnecessary scroll bar appearing to the right of the web object in Presenter ’09.
It also allows the user to open the presentation to fill their screen and have the PDF fill up the web object window (which is not the case if you specify sizes in pixels ie. in absolute terms).
- Save the document you have created as an HTML file and call it index.html . If you are using Notepad, save it as a text file and then rename it to index.html .
- Now, copy the PDF you want to embed into the same folder as the HTML index page. Your folder should look something like this:
- Now, in Articulate Presenter, create a new slide, select Web Object from the Articulate menu and navigate to your folder on your computer. Presenter will detect the index.html file you have in the folder and automatically pull in the PDF file which you also have in the same folder.
- Finish your presentation. Publish and your PDF will display when you have loaded in online.
Make sure that the file is not named index.html.txt as this will not work. This sometimes happens when common file types are hidden in Windows. The file type needs to be HTML.
IMPORTANT: The PDF will almost certainly not display offline, whether you publish to the Web or to LMS. Your presentaion must first be uploaded to your server or LMS.
If you want to embed several PDFs in your presentation, then you’ll need to create a separate folder for each PDF.
That’s about it. Enjoy!
Notes:
- As stated above, you will need to put your presentation online before you see your PDF displaying correctly. You will not be able to preview your PDF
- While the PDFs correctly displayed in Internet Explorer 8, Firefox 3 and Google Chrome, you may find that some browsers are not compatible. Check before you distribute or allow users the possiblity to download the PDF via the attachments tab etc
- There are some extra settings for displaying PDFs but in my testing I found that they sometimes caused problems and so I chose to leave them out. Some people also prefer to define PDF as a file type in the code but again this caused problems with the Presenter web objects.
- The PDFs do not display on a Mac even when viewed on Safari. This seems to be a Mac problem caused by the way the operating system handles PDF files in general.
- This solution will not work on Android devices but this is true with all web objects.
.
THANKS so much for posting this. It is exactly what I need. -Jill
Excellent. This idea came at a great time!
Hi Dave,
Sorry to bother you again but i have an issue related to published cd version of a presentation. I have a feedback slide in my presentation and as you know it may not be possible to send feedback in local cd version so i tried a lot to give the feedback in word document form so that a user can save it locally in its machine and may send it later by mail.
But it did not work as I am not able to open a doc file by clicking a button in presentation.
Is there any way to meet my target..? I guess you understand my problem.
Please help me…
Hi Mayank, Can you contact me directly and I’ll take a look at your files?
Thanks Dave
This will definetely be useful.
[...] Working with PDFs in Articulate Presenter [...]
I seem to require more detail than most to understand things, so my apologies in advance.
What will the file structure look like AFTER the files are uploaded to the web? Said another way… Presenter publishes a file named “player.html” and two folders “data” and “swf/” So where in that structure do the index.html and the PDF file go? In the folder with “player.html” or in one of the other folders or perhaps in the folder in which they were created with that folder in one of those places.
Sorry, JP
Hi JP. Thanks for your question. Like with all web objects, Articulate Presenter takes it upon itself to load those files automatically for you so you don’t need to worry about where the files are. However, if you want to understand things better, if you take a look at the data folder you’ll see a folder beginning with the name webobject for each web object you add to your presentation. In each of those folders, you’ll find your PDF files and index.html files. Like I said, it is not your job to put those files in those folders. That is done automatically for you when you come to publish your presentation in Articulate Presenter. What you need to do as a designer, is to place your PDF file and index.html in a unique folder somewhere on your computer (doesn’t matter where) and then when you insert the web object in Presenter, you make sure you point to that folder. That way, Articulate Presenter will then be able to take a copy of those files and place them in the published file for you to distribute. I hope that makes sense.
Hi Dave,
I’ve carefully followed directions to embed a pdf in my presentation and uploaded the Articulate project online, but my pdf file embedded as a web object still does not display in Explorer 7 or Firefox 3xxx. Looks like something is there because if you click on attachments, it looks like a white page covers most of the drop down. I’ve checked the code and checked to make sure the pdf wasn’t a blank page :) but I can’t think of anything else to check. Any ideas?
Thanks for any help you can give!
Janet
Hi Janet, Can you first confirm that you uploaded your presentation online before testing? Regards
Hi Dave, Yes, I did upload it to our test/play area online. Are there any particular settings that I should be looking for? Thanks! –janet
Janet. Are you able to view the PDF in the demo I did in the article? Incidentally I tested in IE6 and it works.
Yes, and it’s really neat and exactly what I would like, I would like to give people a chance to view a demo or read and print a pdf ‘How To’ for several different business tasks. I didn’t want to have to refer them to the attachments but rather wanted to keep them ‘on target’ inside the slides of the presentation.
Hi Dave, I’m still working on this and tried Explorer 8 and still get the same result. Do you have any further suggestions? My deadline is approaching and I would sure like to include this functionality if I can… Thanks!
Janet
Hi Janet, Can you send me a mail and we’ll take it from there? I’ll need to see your project, or at least the PDF page to understand why it won’t work. The instructions are valid. Have you tried on another computer to see if it works there? Can you send me a link to your online PDF so that I can test?
Hi Dave, sent you the info… hoping for the best!! Many thanks!
Janet
Just to let others know, Janet was using “curly quotes” rather than “straight quotes” in the HTML code. She had copied the code directly from the article and WordPress had “curled” the quotes. Apologies for that but at least all is working as it should now. And the article has been corrected.
Dave
I have managed to get this to work for 2 out of 4 files that I am looking to present. It renders the 1st file fine, wont load the 2nd, renders the 3rd but then not the 4th. All the files work individually but not when they are placed together?
Can you help please! fyi – I have sent you the files to review as I am on a tight timescale to get this resolved.
Hi there, I haven’t received your files :) You can try sending them here or maybe they are just too large to send. In that case, you could try sharing a Dropbox folder with me?