How to Embed a Document Viewer on Your Website

Introduction

A "document viewer" is a visual container for documents you want visitors to be able to view in your website. It displays a document – typically in response to the visitor clicking a link – within a defined window and provides basic document navigation buttons on a toolbar. Advanced document viewers add buttons for printing, zooming and searching, and some even offer collaboration tools that enable visitors to add comments or black out ("redact") selected text.

The box below is a live document viewer showing a PDF file; try the scrollbar, and the Zoom slider, to get a feel for the functions you can provide your visitors. 

Document viewers are great when you want to show documents in their native format, without converting them to HTML and reconfiguring them as web elements to include their content in your site. If you have a PDF or Microsoft Word document you want to present to your visitors, they can click a link to open the document in the viewer and explore it almost as if they had opened it in its native program. But the visitor need not have Word or Adobe Reader installed – the document viewer does all the work. A document viewer frees you to show a document without worrying about whether the visitor has the necessary application to display it. In most cases, it also displays the document far more quickly than opening the document’s native application.

Most document viewers can display any Microsoft Office document and PDF files. Some viewers do more, displaying hundreds of file types, including CAD/CAM drawings and dozens of different image file formats. These viewers enable you to show your visitors all sorts of files they probably could not view without the document viewer’s help.

There are two basic types of document viewers:

A server-based document viewer is a program installed on your web server, called whenever a visitor invokes a document link configured to open it.

A cloud-based document viewer works just like one installed on your server, but it’s stored on cloud service provider’s server. The document link in your website is configured to call the viewer program on the cloud server and open the document within it. The document itself may still reside on your server, or it may have to be uploaded to the Cloud first, depending on which cloud-based document viewer service you choose.

Sometimes called "thin client" programs because they do most of their work on the server and demand very little of the client, document viewers typically require the Flash plugin to be installed in the user’s browser, although some can work without Flash in browsers that support the emerging HTML5 specification. Some support both HTML5 and Flash.

HTML5 document viewers are sometimes labeled "zero footprint" because they require nothing on the client except the browser itself -- not even a plugin. These viewers are great when you want your visitors to be able to display your documents on their mobile devices; there’s no Flash support on Apple iOS devices like the iPad and iPhone, and Flash support can be iffy on Android devices, but virtually all browsers for both mobile operating systems support HTML5.

Depending on the document viewer you select and on how you apply it in your site, you have various options for how to present the document. It can simply open in a new tab/window, or the viewer can be incorporated as an <iframe> element into the layout, ready to house any document the visitor chooses. Often you can apply optional parameters that customize the viewer in various ways, such as hiding the Print button for sensitive documents, defining the height and width of the viewer window, or always opening the document to a particular page.

In the following sections, you will learn how to embed document viewing in your website using Prizm Cloud, a free cloud-based document viewer. You can learn more about Prizm Cloud at http://prizmcloud.accusoft.com.

Phrasing a URL that Calls a Viewer

No matter which way you choose to present your document viewer, the critical step is phrasing a URL that points to the viewer program and the document file. After completing a brief form to sign up for Prizm Cloud, you’ll receive a custom key to use only for your documents on your server. (Prizm Cloud calls documents from your server instead of making you upload them to the Cloud. This saves you not only the time required for the upload, but the time required for subsequent uploads anytime the document changes.) The documents you display through Prizm Cloud must be Internet accessible.

The URL for displaying a document comprises the Prizm Cloud viewer address (http://connect.ajaxdocumentviewer.com), the key, and your full document address. For example, suppose that:

• Your key is 12345
• The direct address to your document is http://www.mydoc.com/resume.pdf

A text or image link with the following URL opens your document in a new browser tab/window, using default values for any optional parameters.

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf

Adding the Viewer as a Layout Element

Using an <iframe> element, you can incorporate a document viewer box into the layout of your web page (or HTML-formatted blog post, email message or other HTML publication). This is an especially useful approach when you are presenting links to multiple documents you want to open in the same box, or when there’s a single document you want to present as soon as the visitor arrives at your page. The image below shows the Prizm Cloud viewer in an <iframe>, beneath a banner in the layout.

The syntax for the URL (src) portion of the <iframe> element is the same as shown earlier. The sample code below opens the specified document in a 650x600 frame on the current page.

<iframe seamless width=600" height="650"
src="http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.irs.gov/pub/irs-pdf/fw4.pdf">
<p>Your browser does not support iframes.</p> </iframe>

Creating a Floating "Lightbox" Document Viewer

Using a JavaScript lightbox plugin, you can display a document viewer in an attractive modal overlay atop the current page, rather than opening a new tab/window or setting aside a frame in the layout.

The image below shows the Prizm Cloud viewer in a lightbox floating over the page from which it was called. Observe that the underlying page is "dimmed" when the lightbox appears, to focus the visitor’s attention on the document.

This is a great option when multiple links on a page call different documents. To do this, you need to pick up a jQuery lightbox plugin.

There are many different lightbox plugins available, although for use with Prizm Cloud, you must choose one that supports <iframe> content; not all do. The example below uses a lightweight customizable lightbox plugin for jQuery called Colorbox (http://www.jacklmoore.com/colorbox/) in building a page of three links, each of which opens a different document through Prizm Cloud in a lightbox. (You can learn more about using a lightbox here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/)

The code sample below uses the Colorbox plugin and Prizm Cloud to open three different documents in a lightbox overlay that floats above the current page.

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Prizm Cloud Demo | using Colorbox</title>
		<style>
			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
			h2{font-size:13px; margin:15px 0 0 0;}
		</style>
		<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="../jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the Colorbox event to elements
				$(".prizmcloud").colorbox({rel:'prizmcloud', iframe:true, innerWidth:620, innerHeight:815});
			});
		</script>
	</head>
	<body>
		<h2>Documents</h2>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf&viewerwidth=590&viewerheight=785&viewertype=html5&toolbarColor=E8E8E8&cache=yes" title="HTML5 vs Flash">HTML5 vs Flash</a></p>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.epa.gov/nerl/download_files/documents/NERL_FactSheet2011.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="EPA Exposure Research">EPA Exposure Research</a></p>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="Zombie Pandemic">Zombie Pandemic</a></p>
		<br/><br/><br/><br/><br/><br/><br/>
		<p>using <a target="_blank" href='http://www.jacklmoore.com/colorbox/'>Colorbox</a> - a jQuery lightbox</p>
	</body>
</html>

About Optional Parameters

Prizm Cloud features a family of optional parameters you can incorporate in the URL to adjust the look and functionality of the viewer. There are parameters that define the size of the viewer box and the toolbar, display or hide certain toolbar buttons or change the toolbar color, apply encryption, and more. For every parameter there is a default setting used when you omit the parameter altogether. A full listing of parameters and their permitted and default values is available at http://prizmcloud.accusoft.com/documentation.html.

To apply optional parameters, simply add an ampersand (&) after the document filename, followed by the parameter name, an equals sign (=), and the setting you want to apply.

For example, to add parameters specifying a window size of 600 pixels high by 800 pixels wide for the simple URL sample earlier in this article under Phrasing a URL that Calls a Viewer, you would phrase the URL as follows:

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf&viewerheight=600&viewerwidth=800

Conclusion

Web citizens have come to expect a lot of variety from the sites they frequent, seeming to favor those that delight their senses with a mix of well-designed text elements, images, video, and more. A document viewer not only enables your site to present a world of content it otherwise could not, but also does so in a way that is fun and attractive, performs well for the visitor, and distinguishes your site as one both rich in content and nice to look at.

If you like what you see of Prizm Cloud, you can use it free of charge for up to 5,000 views per month. You can get more information, and see a live demo, at http://prizmcloud.accusoft.com.

About the Author

Ned Averill-Snell is a computer journalist and author. A past contributing editor to DATAMATION and Inside Technology Training magazines, he is the author of Macromedia Contribute 3 in a Snap and Sams Teach Yourself to Create Web Pages in 24 Hours, among other titles.