Display a PDF on a website with the Resource element

Avatar
Misty Flowers

This article guides displaying a PDF on an interior Composer page in Finalsite CMS, including how to decide whether a PDF is needed and how to configure the Resource element settings.

💡 Quick answers

  • Which option is recommended for sharing information on a website? A Composer page. Page content is edited live and is read natively by screen readers. Screen readers don't always access PDFs in an optimal way. 
  • When is a PDF the right choice? For documents that must stay fixed, such as signed forms, and for printable versions of information that also appears on a page, such as a calendar.
  • Where are PDFs stored? In Resources. Upload before selecting your PDF or upload within the Resource element in Composer. 
  • Which element displays a PDF on a page? The Resource element, in List, Grid, Slideshow, or Single format.
  • Where are the PDF accessibility requirements? In Making accessible PDFs. Review them before uploading.
  • How does a PDF in a Resource element open in a new tab? In the element settings, open Link To, select Page, and leave No page selected. Each PDF then opens in a new tab when selected. Single-format Resource elements open their PDF in a new tab by default.
  • Which option displays a scrolling PDF in a fixed spot on an interior page? An iframe placed in an Embed element, described in the advanced option section.
  • How is a PDF fixed when it stops after the first page or a pop-up cuts it off? Adjust the Resource element settings described in Step 6. 

In this article

⚠️ Important Note

A Composer page is the recommended way to share information with the community. PDFs are best reserved for documents that must stay fixed. Reasons to choose a page first:

  • Live editing: Page content is edited directly in Composer. Updating a PDF means editing the original document, exporting a new file, and replacing the resource.
  • Screen reader access: Composer pages are read natively by assistive technology. A PDF carries its accessibility data inside the file, so every PDF needs tagging, reading order, and alt text before upload.
  • Compliance: PDFs on the site are held to WCAG 2.1 Level AA under ADA Title II, the same standard as pages.
  • Every screen size: Composer pages respond to phones and tablets. A PDF opens in a viewer that often needs zooming and scrolling.

When a document must stay a PDF, such as a signed form or a calendar families would like to print, follow Steps 1 through 6.

Step 1: Review PDF accessibility requirements

Accessible PDFs are built in the source document before export. Review Making accessible PDFs before uploading any file. The core requirements include:

  • Document properties: A Title and a Language declared in the file metadata.
  • Structure: Headings, lists, and tables tagged, with a logical reading order.
  • Images: Meaningful alt text on every image.
  • Contrast: A color contrast ratio of at least 4.5:1 for standard text.
  • Export method: Export from the original application with structure tags retained. Printing to PDF creates a flat image that removes accessibility data.

For the compliance timeline, see 2026 ADA WCAG 2.1 Accessibility at Finalsite.

Step 2: Decide whether a PDF is needed

Ask whether the content can live on a Composer page. Handbooks, enrollment steps, policies, and schedules usually fit well on a page, where they stay editable and accessible. A PDF fits when the document must keep its exact layout or be signed.

 Real-world scenarios

These examples show when a PDF is a good fit:

  • Field trip permission slip: Families print, sign, and return the form, so the fixed layout is part of the document.
  • Printable calendar: The calendar lives on a page or in Calendar Manager for screen reader users, and a PDF is offered as a printable extra.

Check where the PDF is used

Before uploading a replacement for an older document, open the existing file in Resources and select Where used to see every page that links to it. Outdated documents can be deleted instead of repaired. See Find where resources are used on your site.

Where used window listing the site pages that use the selected resource.

Step 3: Upload the PDF to Resources

PDFs are stored in Resources. For every upload method, see Upload a resource.

Add the PDF

  • Select the folder icon in the left Composer toolbar to open Resources.
  • Select the Public resources folder where the PDF will live.
  • Click the green Public Resource button in the top right corner.
  • Browse for the PDF or drag it into the upload area.
  • Click the orange Done button to close the window.

Resources with a folder selected and the green Public Resource button in the top right corner.

Complete the resource details

After the upload, the Edit Resource Details window opens. Complete these fields:

  • Title: The text that displays on the website. Use a descriptive title that includes the file type, such as "Field trip permission form (PDF)".
  • Name: Used for internal organization. Names are unique within a folder and use letters, numbers, hyphens, and underscores. A short, clear name matches the file naming guidance in Making accessible PDFs.
  • Description: Displays as a caption in some areas of the site, depending on the design.

⚠️ Important Note

Descriptive link text helps screen reader users and every other visitor. Choose Title in Display Resource so each link reads as a clear name, such as "Field trip permission form (PDF, opens in a new tab)", and add a short description in Thumbnail Alt Text.

  • Import ID: This option helps when uploading files in bulk, to recognize files already uploaded. 
  • Thumbnail Alt Text: Give a short description of the file in 125 characters or less, being specific so that the screen reader can announce what a user is downloading. It's unnecessary to include "PDF" because screen readers already announce the file type. 
  • Tags: Used inside Resources to find the file later.
Edit Resource Details window with the Title, Name, Description, Import ID, Thumbnail Alt Text, and Tags fields completed for a field trip permission slip.

Click Save. Pages and posts reference the resource, so the Resource element or a Site File link in the content editor keeps the file listed in Where used. Reopen the PDF's details using the Quick Actions Panel to find the Link to Resource option at the bottom of the panel. This option produces a direct link, which can break when the file changes and is missing from Where used.

Step 4: Add a Resource element to the page

  • Open a page in Composer. Toggle the Compose button to go into Edit mode. 
  • Hover to find the Add Element button which opens up the Element Library. Click to add a Resource element into this spot.
  • Click the top left hand settings gear to open up the Resource Element settings.

Interior pages offer four formats at the top of the element settings: List, Grid, Slideshow, and Single.

⚠️ Important Note

Homepage Resource elements have fixed settings tied to the Site Instructions. Changing the format or other settings on the homepage can break the homepage layout. Add PDFs to interior pages. 

Step 5: Select the PDF to display

  • In the element settings, click Browse.
  • Select the PDF in Resources. A gallery of PDFs can be selected instead for a list of documents.
  • Choose the format at the top of the settings.
resource element formats.png

Choose the format and configure settings

These Resource element settings control how the PDF appears and opens. For a deeper dive into every option, see Resource element.

Each format presents a PDF differently:

  • List: Displays each file as a link. Files download or open according to browser rules.
    • Configure settings for Formatting (how links will display) and Link To (how PDF will open and be viewable). 
  • Grid: Displays a thumbnail of each PDF, with options to display inline or as thumbnail links.
    • Configure settings for Formatting (how thumbnails can display) and Link To (how PDF thumbnails will open and be viewable). 
  • Slideshow: Select from a Gallery, and make the following configurations:
    • Display Resource Type: After selecting a gallery, ensure the Document icon type is selected. 
    • Controls > Show X items per slide: (start with 3-4 depending on the size of the space). 
    • Link To: Choose how the PDF opens when selected: 
      • Popup: Shows a preview of the PDF in a popup. Popup suits single-page PDFs; multi-page PDFs open in full with the Page option. 
      • Page: Opens the PDF in another page. Leaving Page > No page selected opens the PDF in a new tab. 
      • Element: Opens the PDF in another element on the same page.
  • Single: Displays one resource in this element. 
    • Configure settings for text displaying above or around the PDF. 
    • Single resource PDFs open in a new tab by default. 

Step 6: Troubleshoot PDF display

Preview the page after saving and open the PDF from the page to confirm that every page of the document displays.

Fix a PDF that stops after the first page or displays a cut-off view

Open the Resource element settings. In the Link To settings, select the Page option, which opens the complete PDF in a new tab. The Popup option can cut off the lower part of a multi-page PDF.

Check the PDF file

  • Open the file directly. In Resources, select the PDF and use Download Resource to confirm that the original opens with every page.
  • Replace the file everywhere. Use Replace resource to upload a corrected version. The new file appears in every place the resource is used. See Replace resources.
  • Contact Finalsite Support. Include the page URL, the resource name, and the Resource element format and Link to settings.

Advanced option: Embed a scrolling PDF

Site admins comfortable with HTML can display a scrolling PDF in a dedicated spot on an interior page by placing an iframe in an Embed element. Visitors scroll through every page of the document without leaving the page. The Resource element in Steps 4 and 5 remain the recommended method.

⚠️ Important Note

Review these points before embedding a PDF:

  • The PDF carries its own accessibility. An iframe adds no tagging, reading order, or alt text, so Step 1 applies in full.
  • Every iframe needs a descriptive title. The title attribute lets screen readers announce what the frame contains.
  • The browser supplies the viewer. Keyboard behavior varies by browser, so test with the keyboard and a screen reader.
  • Phones and tablets may display the first page of an embedded PDF. A visible link that opens the PDF in a new tab keeps every visitor on a working path.
  • The iframe uses the direct link from the Link to Resource option. That link can break when the file changes, and it is missing from Where used. Renaming or deleting the resource later can leave a blank spot on the page without a warning, so keep a list of every page with an embedded PDF.
  • The source address begins with https://. The iframe displays content from addresses that use the secure protocol.

Add the Embed element

  • Open an interior page in Composer and add an Embed element from the Standard tab of the Element Library. 
  • Click the settings gear to open the element settings, which include the Code field.

For more about the element, see Embed element and Embedding content on site pages.

Copy the direct link to the PDF

In Resources, select the PDF to open the Quick Actions Panel, then copy the Link to Resource address at the bottom of the panel.

Paste the iframe code

Paste this code into the Code field. The iframe fills the width of the page column and adjusts its height to the screen, so it resizes on phones, tablets, and desktops.

<iframe
  src="https://YOUR-SITE-ADDRESS/PATH-TO-YOUR-PDF.pdf"
  title="Field trip permission slip (PDF)"
  width="100%"
  style="width:100%; height:80vh; min-height:480px; max-height:1100px; border:0;"
  loading="lazy">
</iframe>
<p><a href="https://YOUR-SITE-ADDRESS/PATH-TO-YOUR-PDF.pdf" target="_blank" rel="noopener noreferrer">Open the field trip permission slip (PDF) in a new tab</a></p>

Then update these parts of the code:

  • src and href: Replace both addresses with the direct link copied from Resources.
  • title: Describe the document, such as the title entered in Resources.
  • Link text: Match the document name so the link makes sense out of context.

Test the embed

  • Save and publish the page.
  • View the page on a phone, a tablet, and a desktop browser.
  • Move through the page with the keyboard and a screen reader to confirm the frame is announced and focus moves on.
  • Select the link below the frame to confirm the PDF opens in a new tab.

Related articles