Skip to content
English
Customer portal
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. 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 Toolbar bar colour. Default: dark slate.
Toolbar Text Colour Colour of icons and text in the toolbar.

How It Works

The module uses PDF.js (the same library used by Firefox). When a visitor loads the page, PDF.js loads asynchronously, the PDF is fetched and rendered to a canvas element, navigation buttons let visitors move page by page, zoom controls scale the page (50%–300%), and fullscreen mode fills 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).
  • 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

Need FlipBook page-turn animations, double page spread, download button, print button, or continuous scroll mode? See the PDF Viewer & FlipBook Pro module.