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>

Enter fullscreen mode

Exit fullscreen mode

Set the dimensions in CSS:

.pdf-viewer { display : block ; width : 100% ; height : clamp ( 28rem , 75vh , 56rem ); border : 0 ; }

Enter fullscreen mode

Exit fullscreen mode

Replace /files/catalog.pdf with your file's address.…