Skip to content
English
Visit us at Arise GTM
  • There are no suggestions because the search field is empty.

PDF Viewer HubSpot CMS Module

Setup & Configuration Guide

Overview

The PDF Viewer module embeds a PDF document directly into your HubSpot page with a clean toolbar for navigation and zoom. Visitors can read PDFs without leaving your site — no downloads, no external tabs.

Best for: Product catalogues, whitepapers, case studies, menus, brochures, policy documents, and any content you want visitors to view inline.

Getting Started

  1. Open any page in the HubSpot editor.
  2. Search for PDF Viewer in the module panel.
  3. Drag it onto your page.
  4. In the module settings panel, configure the PDF File or PDF URL field (see Field Reference below).
  5. Upload a PDF via the PDF File field, or paste a direct URL.

Field Reference

PDF Configuration

Field What it does
PDF File Upload a PDF from the HubSpot File Manager. This takes priority over the URL field.
PDF URL Alternatively, paste a direct URL to a hosted PDF file.
Viewer Height Height of the viewer in pixels. Width is always 100%. Default: 600px.
Starting Page The page number to show when the viewer first loads. Default: 1.

Toolbar Controls

Field What it does
Show toolbar Master toggle for the entire toolbar.
Page navigation Previous/next buttons and current page number.
Zoom controls Zoom in/out buttons with percentage display.
Fullscreen button Expand the viewer to fill the entire screen.
Show page count Display total page count (e.g. "3 / 12").

Style & Appearance

Field What it does
Accent Colour Used for the loading spinner and active states.
Viewer Background Background colour behind the PDF page. Default: light grey.
Toolbar Background Background color of the toolbar. Default: dark slate.
Toolbar Text Colour Colour of icons and text in the toolbar.

How It Works

 

The module uses PDF.js — the open-source PDF rendering library also used by Firefox and Chromium-based browsers. Here's what happens when a visitor loads the page:

  • PDF.js loads asynchronously in the background.
  • The PDF is fetched and rendered to a canvas element.
  • Navigation buttons let visitors move page by page.
  • Zoom controls scale the page from 50% to 300%.
  • Fullscreen mode expands the viewer to fill the entire browser window.

 

Tips

  • File Manager PDFs: Upload your PDF to HubSpot's File Manager first — this ensures fast loading from HubSpot's CDN.
  • External URLs: If using a URL, make sure the PDF is publicly accessible (not behind authentication) and that its host server sends the correct Access-Control-Allow-Origin CORS header, otherwise the viewer will fail to load the file.
  • Height: 600px works well for A4/Letter documents.
  • Mobile: The viewer scales down on mobile. Navigation arrows appear on hover or tap.
  • Keyboard: Visitors can use arrow keys to navigate pages when hovering over the viewer.

Upgrading to Pro

 

Want FlipBook page-turn animations, a double-page spread, a download button, a print button, or continuous scroll mode? Upgrade to the PDF Viewer & FlipBook Pro module for pricing and installation instructions.

Need help with your HubSpot CMS? If you're building, rebuilding or improving a HubSpot website, see how ARISE GTM approaches HubSpot CMS builds and migrations.