Document Viewer

The Document Viewer widget allows you to display a variety of documents directly on your site. Documents may be added via file upload, live URL, or web platforms such as Dropbox, Google Drive or Google Mail.

Demo: https://demo.wocode.com/document-viewer

Tutorial Video

Setup

SUPPORTED FILE TYPES

The following file types are supported in the viewer:

  • Adobe Portable Document Format (.PDF)
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Text files (.TXT)
  • Scalable Vector Graphics (.SVG)
  • Adobe Illustrator (.AI) – *Remote URL only
  • PostScript (.EPS, .PS) – *Remote URL only
  • Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS) – *Remote URL only
  • Tagged Image File Format (.TIFF) – *Remote URL only

Note that several file types can only be used when hosted externally. Certain file types are not supported for upload by the Without Code builder. To use these file types, use the Remote File URL option (explained below)

WIDGET PLACEMENT

  • Place the Document Viewer on your page where you would like to display your document.
  • Sizing the viewer is done in the widget options and covered in the next section

WIDGET OPTIONS (CONTENT)

  • Unique ID: Unique IDs are required when multiple instances of the Document Viewer widget will be used on the same page.
  • Upload / Select File: This file loader allows you to upload or select existing files to display. See the “How to Upload a File” section below for more information.
  • Remote File URL: This option allows you to display a file that is hosted elsewhere on the web. Note that in most cases, the last part of the URL should be the file extension type. For example: www.mysite.com/important-document.pdf
  • Reload Attempt Delay: this parameter attempts to reload document if it fails to be loaded from remote location. Larger files may benefit from longer delay times

Note that the Upload / Select File setting overrides the Remote File URL. This means that when a local file is selected using the loader, the Remote File option will not work until the local file is removed.

WIDGET OPTIONS (DESIGN)

  • Width/Height: Viewer width and height are set here in the widget options. It is best to avoid resizing the widget with the blue resize handle.
  • Viewer Border: This sets a border color and thickness around the viewer
  • PreLoader Color: This sets the color of the preloader that is seen as the viewer loads a document.

HOW TO UPLOAD A FILE

  • To use a local file, use the Upload / Select File option. When you do this, you will see several options. Scroll to the last option: File for download.
  • Use the Upload New File button in the next screen:
  • Once you’ve uploaded a new file, hover over the file and click “Select”.

TIPS FOR USING REMOTE FILES:

If files are hosted elsewhere, such as a Google Doc or Google Sheet, it can be handy to use the file URL in this case. Simply enter the direct link to the file.

As mentioned previously, the URL you use should _usually_ end in the name of the file extension. This is generally the case when files are uploaded directly to servers. In some cases, such as Google document links or Dropbox links, the URL may not end in the file extension name.

Using Dropbox for hosted files: Dropbox is a great solution for hosting files. When linking to a Dropbox-hosted file, you should begin by creating a link in Dropbox. Ensure that the file is viewable by anyone on the web. Finally, when you paste the provided Dropbox link, it may end in “…dl=0”. To view the file properly, change the “0” to “1”.