Embed Tricky Documents Anywhere With Prizm Viewer

Sponsored ContentThis sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

One of the most difficult things on the internet is showing documents on your website in their original formats. If you have anything other than an image or HTML file, and you don't want to convert your file to another format, the only simple way to put it on your website is to resort to a basic "click here to download" link. That's a horrible user experience.

There's quite a few services for embedding PDF files into your site, and most Office-type web apps let you embed Word, Excel, and PowerPoint files into your site—though often without all the formatting your original documents had. If you want to share a CAD/CAM design, a RAW or PSD layered image, an email message, or most other types of files, you'll need something else.

That something else is Prizm Viewer, an HTML5 document viewer that can display over 300 file formats and let you embed those files on your site simply. In this tutorial, I'll show you how to use Prizm Viewer to easily add documents to your website, social media page, or share them via email, and guarantee your users will be able to see the file the way you intended.

The Setup

To get started, you'll first need to setup a free Prizm Viewer account. You may use your existing Yahoo!, Facebook, or Google account to expedite the process. Agree to the terms and conditions, and finalize your account setup.
Once your account setup is complete, you will be taken to the main dashboard. You will see a screen that welcomes you to Prizm Viewer and instructs you to add a new Viewer.

The Prizm Viewer welcome screen

Embedding on a Website

Click the Add a Viewer button. Enter the URL where the viewer will be embedded. Then choose the Edition of the viewer you would like to use—the free version lets your document get up to 3,000 ad-free views, while premium and elite editions add extra features and let your document be viewed by larger audiences. I'll choose the Free Edition.

Adding a new Prizm Viewer

Choose the option to agree to the terms and conditions that pop up then click I Accept. To set the Document URL, I recommend Dropbox, as it's one of the simplest places to store your files online. Upload the file to your Dropbox Public Folder, then alternate click and choose Copy Public Link. Click Copy Public Link to Clipboard, then paste that link into the Document URL field as demonstrated here:

Adding a document to the Prizm Viewer

Click Save. If you would like to preview the viewer to make sure everything is set correctly, click Preview Viewer. Once you are satisfied with all of the settings, highlight the iframe code and copy it to your computer's clipboard.
Paste the iframe code into your site's HTML where you wish the viewer to be displayed. This is a sample of the view embedded on my site:

Linking From Social Media

Embedding a document on a site you control is all well and good; but what about the times when you simply want to share a document without adding another page to your site? What about the times you want to be able to simply post a link to Facebook, Twitter, or Google+? Prizm Share, a companion service, has you covered there as well.

Click on the My Shares button at the top of the page. Then click on Create a New Share Page. If you are using the same document we were before, feel free to paste in the public Dropbox link. If you need to upload a document, drag it to the box labeled Drag a file here or click to browse your device.

Uploading a file on a new share page of Prizm Viewer

Your file will begin uploading. Once fully uploaded the file will be displayed from within the viewer below.  Give your page a title and choose its category. Click the Customize button on the left to extend the customization tool bar. You can use that to modify the Background Color, Title Color, Viewer Dimension and a slew of other page rendering options. Set these options as you see fit, then click Share Your Page.

Prizm document share customization options

You will be taken to a screen with a list of the most popular social media sites that you can share your image directly to. Alternatively you can copy and past your unique image URL using the link provided.

Conclusion

Prizm Viewer makes uploading, embedding, and sharing non-HTML documents a breeze. The next time you are tasked with sharing a CAD, PDF, or other document online, give it a shot. Following the steps I have outlined above, you will have your documents online and ready to share in minutes.
Enjoy, and let us know if you have any trouble using Prizm Viewer in the comments below!

by Alex Spencer