To embed a PDF on a website, point an iframe at the file's URL and give it a height. Keep a separate link below it so visitors can open the document outside the embedded viewer.
For a product catalog, also check the pages with small print and decide how you will replace the file when prices change. Those details usually matter more than the embed code.
Disclosure: This article was prepared for WebViewPDF. The hosted example uses its public demo catalog.
Embed a PDF in HTML with an iframe
Upload your PDF to your website, then use its URL as the iframe source:
<iframe
class="pdf-viewer"
src="/files/catalog.pdf"
title="Product catalog"
loading="lazy"
></iframe>
<p>
<a href="/files/catalog.pdf">Open the PDF separately</a>
</p>
Set the dimensions in CSS:
.pdf-viewer {
display: block;
width: 100%;
height: clamp(28rem, 75vh, 56rem);
border: 0;
}
Replace /files/catalog.pdf with your file's address. This relative path assumes the PDF is hosted on the same website.
The title labels the frame for assistive technology. The height gives the document room to display; width: 100% fits the frame to its container. Lazy loading is useful below the fold. Remove it if the PDF is the first thing visitors should see.
The browser supplies the PDF controls. Their appearance and behavior can vary, so keep the separate link even if the embed works in your browser.
You can use this without a paid viewer or CMS plugin. You still need somewhere to host the file.
Use object for fallback content
An object element lets you put a link inside the embed as fallback HTML:
<object
class="pdf-viewer"
data="/files/catalog.pdf"
type="application/pdf"
aria-label="Product catalog"
>
<p>
The embedded preview is unavailable.
<a href="/files/catalog.pdf">Open the PDF</a>.
</p>
</object>
<p>
<a href="/files/catalog.pdf">Open the PDF separately</a>
</p>
Use the same CSS. The link outside the object remains available if a browser fails to show the fallback properly.
For an occasional brochure or form, native embedding may be all you need. A recurring catalog can need more: search across pages, reading statistics, or a new edition behind the existing link.
Embed a catalog with a hosted flipbook
With a hosted flipbook, the iframe points to a reader page instead of the raw PDF. The provider handles document processing and the viewer interface; you depend on its service and plan limits.
Here is the Quiet Form demo embedded on the WebViewPDF homepage:
The embedded catalog, open at pages 2–3.
The reader URL can be used in an iframe:
<iframe
class="pdf-viewer"
src="https://read.webviewpdf.com/v/01a1309f-80ea-711e-aa47-62a7270af7fb"
title="Quiet Form — Furniture & Design Collection"
loading="lazy"
allowfullscreen
></iframe>
<p>
<a href="https://read.webviewpdf.com/v/01a1309f-80ea-711e-aa47-62a7270af7fb">
Open the catalog separately
</a>
</p>
Reuse the .pdf-viewer CSS above. This address opens the public demo. To display your own catalog, upload your PDF, wait for processing, and copy the embed code or reader URL for that publication.
Pages 6–7 opened in the separate reader: the sofa on the left, dimensions and finishes on the right.
Two details are worth checking with your own document:
Search needs text. In the demo, searching for “sofa” returns matching pages. Selecting page 6 opens the product spread shown above. WebViewPDF's search requires a PDF text layer; a scan needs OCR before upload.
The actual search results for “sofa”, with page 6 selected.
Updates should preserve the publication. In WebViewPDF, upload a new version of the existing publication to retain its reader link and embed code. Creating a new publication is a separate operation. For a printed QR code or a catalog embedded on several sites, keeping that address matters.
If you need to build custom application controls yourself, a JavaScript viewer such as PDF.js is another route. You then maintain that integration rather than relying on a hosted reader.
When an embedded PDF does not display
Blank frame
First, open the PDF or reader URL in a private browser window. Check that it opens without your administrator login and does not return a 404 or an HTML error page.
If it works directly but fails in the iframe, check the browser console. The embedded page may restrict framing through Content-Security-Policy: frame-ancestors or X-Frame-Options. Your own page's CSP may also block the frame origin. Follow the supported embedding configuration for the server or provider involved.
Download instead of preview
Inspect the response headers. Content-Disposition: attachment requests a download. Browser settings and PDF support also affect the result; changing the iframe markup may not fix it.
Works on desktop, fails on mobile
Some mobile browsers handle raw PDF embeds differently. Keep the separate link and test another viewer if inline reading is essential.
Also distinguish a blank viewer from an unreadable document. A frame that fits the screen does not reflow a PDF. Open a page with small specifications on a real phone and check zooming, scrolling and text size.
The CMS removes the code
Some editors and hosting plans strip iframe or script markup. Use the platform's supported HTML or embed block, then check the saved page. Support for iframes does not necessarily include permission to run an external script.
Before you put it on a client site
Open the finished page while signed out. Try a desktop browser and a real phone, follow a link inside the document, and check keyboard navigation and the separate PDF link. For catalogs, search for an actual product name or part number.
If the document will be updated regularly, replace it once and reopen the original page. That is the easiest time to catch a workflow that generates a new URL for every edition.
Embedding is not copy protection: hiding a download button does not secure a public PDF. It also does not put the PDF's text into the surrounding HTML. Keep essential product descriptions and navigation on the webpage when readers need them there.
Top comments (0)