Displaying or Linking a PDF

Overview: What are we talking about?

This article and video cover how to display or link a PDF on your website.

This article includes:

• Linking a PDF
• Displaying a PDF
• Video Tutorial

Linking a PDF

To link a PDF file from an existing page on your website:

1. Save the PDF or Word document file on your computer with a filename with no spaces
   Good: filename.pdf
   Bad: file name.pdf
2. From the HTML Website Editor, click File Uploader from the left sidebar.
   
3. A pop-up window will appear. Click Select Files.
   
4. Select the PDF file from your computer and click Open. Then click Upload All.
   
5. From the upload list, click Copy URL next to the PDF file you just uploaded.
   
6. Highlight and copy the PDF file URL.
   
7. Go to the page you wish to link this PDF file and open the HTML editor for that page.
8. Type a word in the editor. Then left-click and highlight the word. Once the word is highlighted, click the link icon (looks like a chain link).
   

9. A pop-up window will appear.

   • On the Link Info tab, in the URL field, right-click and paste the link you copied in step 6.

   • You may want to make the document pop-up in its own window. On the Target tab, click the Target dropdown menu and select New Window.

   • Click OK to save the hyperlink.
     

10. The word will now be a hyperlink that opens the PDF document when someone clicks on it.

Displaying a PDF

To display the whole PDF file on an existing page on your website:

1. Save the PDF or Word document file on your computer with a filename with no spaces
   Good: filename.pdf
   Bad: file name.pdf
2. From the HTML Website Editor, click File Uploader from the left sidebar.
   
3. A pop-up window will appear. Click Select Files.
   
4. Select the PDF file from your computer and click Open. Then click Upload All.
   
5. From the upload list, click Copy URL next to the PDF file you just uploaded.
   
6. Highlight and copy the PDF file URL.
   
7. Go to the page you wish to display this PDF file and open the HTML editor for that page.
8. In the editor, click your cursor where you want the PDF to start displaying. Then click the IFrame icon (looks like a globe).
   

9. A pop-up window will appear.

   • On the General tab, in the URL field, right-click and paste the link you copied in step 6.

   • Enter 800 in the Width field and 1100 in the Height field, to mimic the standard 8x11 paper size.
   • From the Alignment dropdown menu, select Middle.
   • Check the box Enable scrollbars.
   • The rest of the fields are optional (Name, Title, Description, etc.)

   • Click OK to insert the IFrame.
     

10. Click Save.
11. The process is now complete. Within the HTML editor, the PDF file may show as a box labeled IFrame. However, if you go visit the live site, you should see the PDF displayed in full.
    

Video Tutorial

The video instructions specifically for Linking a PDF are from [0:00 to 2:00] in the video below.

The video instructions specifically for Displaying a PDF begins at [2:00] in the video below.