How-To: Embed The Viewer

Icons for Flash and HTML5
Works in almost any browser, including all those that support Flash or HTML5 and most mobile browsers.
Displays more than 300 file formats.
Is secure, reliable, and free -- for up to 5,000 views per month. Licenses available for more views and more features.

One Viewer, Many Ways to Use It

You can use Prizm Viewer in different ways, depending on your needs. The most popular methods are described below, along with a table showing the optional parameters you can use to customize the viewer and tips for playing your document as a slideshow.


Prizm Viewer Information Icon
The document or other file you want to show must be hosted somewhere that’s publicly accessible through the Internet–it can’t be stuck behind a firewall, or somewhere that requires a login for access. If you don't have a way to put your file on a server, you can display documents straight from your Dropbox.

Paste a link in a social media posting or email

The steps below create a link in a social media update or email that opens your document in the Prizm Viewer demo page.

  1. Visit the Prizm Viewer demo page.
  2. Paste or type the URL of your publicly accessible document in the box under Try Your Own Document.
  3. Click the Update Viewer button. You'll see your file displayed in the demo window.
  4. Under Share Your Document, click the icon for the social media site you want to use. The site's posting dialogue box opens so you can add any text to go along with your document, and post it!

Configure the viewer through a plugin for a third-party content manager

If you use a third-party content manager like WordPress, Joomla! or Drupal, you can install a plugin that will facilitate the insertion of Prizm Viewer into your content. You can even apply any of the optional parameters that customize the viewer.

The steps are easy, but they differ for each platform. To get started, visit the Plugins and Extensions page and click the logo for your content manager.

Embed Prizm Viewer in your HTML source code

Immediately after you sign up, you’ll see the My Viewers page, which helps you correctly phrase a URL for displaying your document. Just fill in the address of your document, and the My Viewers page produces a URL for displaying it. You can copy the URL and paste it wherever you need it.

On the My Viewers page, you can also set a few optional parameters, like the size of the viewer window. A button for returning to My Viewers appears at the top of the Prizm Viewer page, so you can return to create URLs to other documents.

Below are some additional details on the two ways you can manually set up viewing of a document through Prizm Viewer:

  • Creating a Simple Link to Display a Document
  • Make a link that includes the viewer address, your document address, and the key, and put it where you want it.

  • Embedding Document Viewing in Source
  • Write simple HTML that opens your document in a new tab/window, or within the current page in an <iframe> element (the powerful way).

    Check out the Tips & Tricks forum on the Community page for other advanced applications. For example, with a few tweaks you can display a document in a floating lightbox.

    Either way you go, you need to sign up first to get your key by email. And either way, you can apply optional parameters to define the height and width of the display window, choose whether to show the Print button on the toolbar, encrypt for added security, and more.




    Creating a Simple Link to Display a Document

    To display a document, simply create a link with a URL that includes the Prizm Viewer address (http://connect.ajaxdocumentviewer.com), the key you received when you signed up, and your document address. For example, suppose that:

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

    A link with the following URL opens your document in a new browser tab/window, using the default settings for optional parameters. Pay special attention to where the characters ?, = and & appear. http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf

    That’s all there is to it.


    Embedding Document Viewing in Source

    To embed a document, you can use a simple element to open the document in a new tab/window, or an <iframe> element to open the document in a defined frame within the current page.

    Using <href>

    The sample below creates a text link that opens the specified document in a new browser window.

    Using <iframe>

    The sample below opens the specified document in a 650x600 frame on the current page.


    Play a Slideshow

    Any multi-page document you display with Prizm Viewer can be presented as a self-running slideshow that skips through its pages automatically at a pace that you control.

    You can customize the experience, choosing how long each page is displayed, whether the show starts automatically or waits at the first slide for the visitor to start it, which animation style to use for page turns, and more. And your visitors can pause and play the slideshow, and go forward or backward through pages manually.

    • If you are using the Paste a link in a social media posting or email method to display your document, all you have to do to configure your multi-page document as a slideshow is click the Slideshow button (on the Demo page under Choose Your Viewer Type) before clicking a button under Share Your Document.
    • If you are using any other method, simply add the optional viewertype parameter, and choose slideshow as the viewer type. See Using The Optional Parameters to learn how to configure viewertype and other parameters, such as the parameters that control the animation effects in the slideshow and the speed at which it plays.

    Using The Optional Parameters

    You can add the following parameters to the URL to adjust the look and functionality of Prizm Viewer. Simply add an ampersand (&) after the document file name, 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 sample at the top of this page:

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

    The table below describes all of the available optional parameters, except for those that control encryption, which are described in the next section. The defaults indicated for some parameters are the settings that will be applied if you do not use the parameter.

    Note: Prizm Viewer is actually three viewers: a default viewer for browsers equipped with Flash, another that opens automatically in HTML5 browsers only when Flash is not present, and the slideshow viewer. By giving you both HTML5 and Flash versions, Accusoft has ensured broad compatibility with the available recent browser versions, including mobile browsers. A few optional parameters are available only in the Flash version; see the Viewer column in the table below. You can use the viewertype parameter to force Prizm to use one viewer or the other.

    Parameters
    Viewer
    Notes
    key
    required
    • This is your license key provided by Accusoft.
    • Get your key from here.
    • Example: key=12345678910
    document
    required
    • The absolute URL of your document.
    • Allowed values: Any valid, publicly accessible URL to a supported document.
    • Example: document=http://www.irs.gov/pub/irs-pdf/fw4.pdf

    Note: If the URL of your document contains a query string, the document URL must be "URL encoded" within the Prizm Viewer URL. For more information about URL encoding, see http://www.w3schools.com/tags/ref_urlencode.asp.
    viewertype
    optional
    • Enables you to select a viewer -- HTML5, Flash, or Slideshow -- to always be used for the specified document.
    • Note: When this parameter is not used, the Flash viewer opens by default, and the HTML5 viewer opens only when Flash is not detected.
    • Allowed values: flash, html5, slideshow
    • Default: flash
    • Example: viewertype=html5
    viewerwidth
    optional
    • Enables you to adjust the total width, in pixels, of the displayed viewer.
    • Default: 550
    • Example: viewerwidth=615
    viewerheight
    optional
    • Enables you to adjust the total height, in pixels, of the displayed viewer.
    • Default: 600
    • Example: viewerwidth=800
    toolbarColor
    optional
    • Enables you to adjust the color of the viewer's top toolbar.
    • Allowed values: Any valid 6 digit, hexadecimal color code (without prefixes) [What are Hexadecimal Color Codes?]
    • Example: toolbarColor=E8E8E8
    toolbarHeight
    optional
    • Enables you to adjust the height of the viewer's top toolbar.
    • Allowed values: Any positive, whole number.
    • Default: 32
    • Example: toolbarHeight=40
    cache
    optional
    • Instructs Prizm Viewer to store a copy of your original document on it's own servers. This eliminates the time and bandwidth required to transfer the document from your servers to Prizm Viewer after the initial viewing.
    • Allowed values: yes, no
    • Default: no
    • Example: cache=yes
    ssl
    optional
    • Applies SSL encryption to the viewing session.
      Note: For the best experience, the document and logoimage parameters should use secure links when SSL is enabled; otherwise the user will see security pop-ups.
    • Allowed values: yes, no
    • Default: no
    • Example: ssl=yes
    logoimage
    optional
    • Enables you to set the absolute URL to your custom logo image that will appear while the viewer is loading.
    • Allowed values: Any valid, publicly accessible URL to a JPEG, PNG or GIF image.
    • Default: The Accusoft logo
    • Example: logoimage=http://mysite.com/images/logo.png
    printButton
    optional
    • Enables you to show or hide the Print button on the toolbar.
    • Allowed values: yes, no
    • Default: yes
    • Example: printButton=no
    saveButton
    optional
    • Enables you to show or hide the Save button on the toolbar.
    • Allowed values: yes, no
    • Default: yes
    • Example: saveButton=no
    copytextButton
    optional
    • Enables you to show or hide the Copy Text to Clipboard button on the toolbar.
    • Allowed values: yes, no
    • Default: yes
    • Example: copyTextButton=no
    startPage
    optional
    • Enables you to specify the initial page of the document that displays in the viewer.
    • Allowed values: From 1 to the last page of the document
    • Default: 1
    • Example: startPage=2
    pagestoshow
    optional
    • Enables you to display only certain pages of the total number of pages in the document.
    • Allowed values: From 1 to the total number of pages in the document
    • Default: Unset, all pages in the document are shown
    quality
    optional
    • Enables you to adjust the fidelity of the document being loaded. You can control the quality and resolution.
    • Allowed values: high, medium, low
    • Default: medium
    • Example: quality=high
    animtype
    optional
    • The animation effect between slides.
    • Allowed values: slide, fade
    • Default: slide
    • Example: animtype=fade
    animduration
    optional
    • The time (in milliseconds) duration of the animation effect (i.e. the time it takes for page to transition to the next page).
    • Allowed values: Any positive, whole number.
    • Default: 450
    • Example: animduration=800
    animspeed
    optional
    • The time (in milliseconds) a slide remains visible before it transition to the next page.
    • Allowed values: Any positive, whole number.
    • Default: 4000
    • Example: animspeed=6000
    automatic
    optional
    • Enables you to start the slideshow automatically or let the user start the slideshow manually.
    • Allowed values: yes, no
    • Default: yes
    • Example: automatic=no
    showcontrols
    optional
    • Enables you to show controls (previous, next, pause, and play) for the slideshow.
    • Allowed values: yes, no
    • Default: yes
    • Example: showcontrols=no
    centercontrols
    optional
    • Enables you to center the slideshow controls (if shown).
    • Allowed values: yes, no
    • Default: yes
    • Example: centercontrols=no
    keyboardnav
    optional
    • If enabled, it allows the user to use the arrow keys on their keyboard to progress through the slideshow.
    • Allowed values: yes, no
    • Default: yes
    • Example: keyboardnav=no
    hoverpause
    optional
    • If enabled, it pauses the slideshow when a user hovers over a slide with their mouse pointer.
    • Allowed values: yes, no
    • Default: yes
    • Example: hoverpause=no

    Using Encrypted Parameters

    If you use the Prizm Viewer Premium Edition, you can apply parameters that encrypt the document URL (and optional parameter settings, if any) so that it cannot be seen by users, providing an extra measure of security for the files on your server.

    Encryption is a two-step process:

    1. Send your completed URL, including your document address and any optional parameters, to the Prizm Viewer encryption service to receive an encrypted string.
    2. Use the encrypted string in place of your usual document address and parameter settings in the URL you use to link to the document.

    To GET an encrypted string:

    Phrase your full URL, including any optional parameters, as described in the preceding sections. Then create an HTTP GET request as follows, adding /encrypt between the document address and the key. For example:

    If the request succeeds, the server responds with an encrypted string, like the following:

    To use the encrypted string to display a document:

    To display the document, you will phrase the URL for your link, <href> element or <iframe> element a little differently:

    1. Start with the Prizm Viewer address (http://connect.ajaxdocumentviewer.com) and your key as usual.
    2. Add the encrypt parameter (&encrypt=1), followed by the encrypttext parameter (&encrypttext=).
    3. Paste your encryption string. The finished URL should look something like this:

    The following parameters can be used to load Prizm Viewer with encryption.

    Parameters
    Viewer
    Notes
    key
    required
    • This is your license key provided by Accusoft.
    • Get your key from here.
    • Example: key=12345678910
    encrypt
    required
    • Instructs Prizm Viewer to expect an encrypted parameter string.
    • Allowed values: 1
    • Example: encrypt=1
    encrypttext
    required
    • The encrypted parameter string returned from a request to encrypt.
    • Allowed values: A valid encrypted string
    • Example: encrypttext=wKxQQjtBal/ktMzeAKiR5H7Tesj6uviWrqivU2a5akybJ0RkaQGa4JCbo/djkJB+/IrApfVfrqDu9lRY33C7N45rLYI+LGOfZ2mHeVuKwTa1Iox70a58VGDowHfdk4XorWQcjxYH6579hFGO67ULNmimiOtXSdi98mTSVp4iQBypZLFtZmcLtrpsS6xSUHEFBohcRzhUup+DwDzjR+JZ/OCRwwR3ua0V1m0ev/nBA+9U1iKMm4NALYn33rejQCJTS0PpPvNDe+M/5M9n5by