Here are the best-practices to link PDFs on a website so they are most accessible and available to the widest audience
To make a PDF viewable on a page (to avoid downloading)
To embed a PDF onto a page so visitors can view it to the site, navigate to the page that you would like to place it on, and select Edit Page. From there, insert a new widget, select the HTML SOURCE widget from the choices given, and paste the following code into it.
Please note: If the embedded PDF has multiple pages, please be aware that scrolling through them using this method may not be supported on all devices. It is recommended to link to PDFs and have them open in a separate window for a better viewing experience.
<iframe frameborder="0" height="950px" title="a description of what is in the frame" scrolling="yes" src="/schoolFolder/files/documents/pdfFilename.pdf" width="100%"></iframe>
After pasting the above code into the widget, you will need to update the following information to be appropriate for your document.
- height - Enter the height in pixels you would like the viewer to be. You may have to try several different sizes before finding the one that will work with your PDF.
- longdesc - A description of the document
- title = a description of what is in the frame
- name - Name of the document
- src - The relative URL of the document. (For example, if the URL to the PDF is http://www.domain.org/schoolFolder/files/documents/pdfFilename.pdf - you would enter everything after http://www.domain.org (e.g. /schoolFolder/files/documents/pdfFilename.pdf)
SchoolNow Tip - If you are having issues finding the relative URL of a PDF. You can do so by using the link tool that is built into the Text widget. Copying the information that is being displayed in the URL field in the link editor.
To find the URL of a PDF stored in a Google drive, preview the PDF and click on the three vertical dots at the top right-hand side of the screen. Select Embed Item... from the options given and copy the URL in the quotes after src= and paste it into the example above, update the Title, so it is appropriate for the document.
When you are done editing the code, click on the green Create button located at the bottom of the widget and then either Publish or Save Draft in the side navigation to view the embedded PDF on the page. You may have to do this several times to adjust the widget's height so the PDF is how you would like it on the page.
Can I place a PDF as an image?
No. To properly display PDF files on your website, it is essential to avoid using the image widget, or the image tool in the WYSIWYG. PDFs are not compatible with these tools since they are not image files. Instead, we recommended direct-linking to PDF files (using the link widget) on a page for correct functionality and display.