How to Embed a PDF on a Website (HTML and Wix)

To embed a PDF on a website, upload the file to a public web address, then add an <iframe> tag pointing at that link in your page's HTML, or use the built-in Document tool in the Wix editor. Both methods display the PDF directly on the page so visitors can read and scroll it without downloading anything first. The whole process takes only a few minutes.

Key takeaways

• The fastest no-code route is an <iframe>: one line of HTML pointing to your PDF's public web address.
• Your PDF must live at a stable, publicly reachable URL first, or the embed shows a blank box.
• Wix users skip the code entirely; the Document element handles embedding through the editor.
• Mobile browsers often ignore inline PDF viewers, so always include a plain download link as a backup.
• Keep the file small (ideally under a few MB) so it loads quickly and doesn't frustrate readers.

What "embedding" a PDF actually means

Embedding means the PDF appears inside your web page, framed by your own header, sidebar, and footer, rather than forcing a download or opening in a separate tab. The browser renders the document in a small viewer window right where you place it, and visitors scroll through it like any other content on the page.

This matters for documents people want to skim in place: menus, brochures, price lists, event programs, research papers, manuals, and reports. Visitors can glance at the document without leaving your site, which keeps them on the page longer and feels more polished than a bare "click here to download" link.

Every embed really has two parts: a hosted PDF (the file sitting at a web address) and a container (the HTML element or Wix widget that displays it). Get those two right and everything else is detail.

Before you start: host the PDF

No embed method works until your PDF has a public URL, a web address anyone can open. You have a few options:

• Your own site's file manager. Most hosts and site builders let you upload a PDF to a "files" or "media" folder. After uploading, copy its direct link, the one that ends in .pdf.
• Cloud storage. Google Drive, Dropbox, and OneDrive can host a file, but you must set sharing to "anyone with the link" and use the service's preview or embed URL, not the regular share link. The plain share link usually opens that service's own viewer, which often refuses to load inside an iframe.
• A dedicated file host. Any service that hands you a direct .pdf link will do.

Quick test: paste the URL into a private or incognito browser window. If the PDF opens cleanly without asking you to log in, it's ready to embed. If it asks for permission or redirects you somewhere else, fix the sharing settings before going further.

Want to trim the file first? You can compress, rename, or flatten your document in our online PDF editor so it loads fast and looks clean before you upload it.

How to embed a PDF on a website with HTML

This is the direct, no-plugin approach, and it works on virtually any site where you can edit the HTML.

1. Upload your PDF and copy its public URL (see the section above).
2. Open the HTML editor for the page or block where you want the PDF. That might be your CMS code view, an HTML widget, or the raw template file, depending on your setup.
3. Paste in an iframe pointing at your file. Here's the core snippet:

<iframe
  src="https://yourdomain.com/files/brochure.pdf"
  width="100%"
  height="800px"
  style="border: 1px solid #ccc;"
  title="Spring Brochure">
</iframe>

4. Swap the src value for your real PDF URL. Keep the rest as-is to start.
5. Adjust the size. width="100%" makes the viewer fill its column, and height controls how tall the box is. For a one-page document, 600px is usually enough; for a multi-page report, 800px or more cuts down on cramped inner scrolling.
6. Add a fallback link right below the iframe, because some browsers, especially on phones, won't render the inline viewer:

<p><a href="https://yourdomain.com/files/brochure.pdf">Download the brochure (PDF)</a></p>

7. Save and preview on both desktop and a phone before you call it done.

That's the whole job. The <iframe> element is the most widely supported way to display a PDF on a web page, which is why it's a safer everyday choice than the older <embed> and <object> tags.

The realistic failure mode

The number one reason an HTML embed shows a blank gray box is the URL. If the file isn't truly public, or the link points to a viewer page instead of the raw .pdf, the iframe loads nothing.

The second most common cause is a security header. Some hosts, including Google Drive's standard share link, send an X-Frame-Options or Content-Security-Policy rule that forbids their pages from being framed by other sites. When that happens, the file itself is fine, but the host is blocking the embed. The fix is to move the PDF to a host you control, or use that service's dedicated "embed" URL rather than its share link.

A smaller gotcha: if your page loads over https:// but your PDF link starts with http://, the browser may silently block it as "mixed content," leaving an empty frame. Always match the protocol so both are https://.

How to embed a PDF on a Wix website

Wix hides the code entirely, which makes it the friendliest route if you'd rather not touch HTML.

1. Open the Wix Editor and go to the page where you want the PDF.
2. Click Add Elements (the plus icon) in the left toolbar.
3. Choose Document. Wix has a dedicated document element built for exactly this.
4. Upload your PDF when prompted, or pick one already in your media library.
5. Position and resize the element on the page by dragging it where you want it.
6. Set the behavior. You can let visitors view the document, open it in a new tab, or download it; choose whichever fits the content.
7. Click Publish and check the live page on desktop and mobile.

If you'd rather show the actual document inline (a true reading viewer rather than a button), add an Embed a Widget / HTML iframe element instead and drop in the same iframe code from the HTML section above. Wix's embed widget accepts custom HTML, so the two methods meet in the middle. Just remember that the same hosting rule applies: the PDF URL must be public and frame-friendly, or the widget shows the same blank box.

HTML vs. Wix: which should you use?

	HTML iframe	Wix Document element
Coding needed	A little (copy/paste)	None
Where it works	Almost any website	Wix sites only
Control over look	Full (size, border, styling)	Limited to Wix's options
Inline reading view	Yes	Button by default; iframe widget for inline
Best for	Custom sites, full control	Wix users who want zero code

Use the HTML iframe when you run your own site, use a CMS like WordPress, or want precise control over the viewer's size and appearance. Use the Wix Document element when your site is on Wix and you'd rather click than code. Neither option is universally better; they solve the same problem on different platforms, and the right pick is simply whichever matches the site you already have.

If your site runs on WordPress specifically, the trade-offs shift a little, and we cover them in how to embed a PDF in WordPress (plugin vs. no-plugin). And if you're sharing documents inside a workspace rather than a public website, see how to add a PDF to a Notion page.

Tips for a clean, fast embed

• Keep the file lean. Large, high-resolution PDFs load slowly inside an iframe. Compress image-heavy files before uploading so the viewer isn't staring at a spinner.
• Name the file sensibly. A URL ending in 2026-menu.pdf reads better (and is friendlier for search engines) than final_v3_REAL.pdf.
• Test on a phone. Inline PDF rendering is inconsistent on mobile, and your fallback download link is what saves the visit.
• Set a sensible height. Too short and readers fight a tiny scroll box inside the page; too tall and the layout feels unbalanced. Match the height to the document's length.
• Don't embed sensitive documents publicly. Anything at a public URL can be found by anyone who has the link. Keep private files behind a login instead of an open embed.
• Update in place when you can. If you upload a new version under the same file name and URL, the embed refreshes automatically, with no code change needed.

FAQ

How do I show a PDF on my website?

Upload the PDF so it has a public web address, then either paste an <iframe> tag pointing to that URL into your page's HTML, or, on Wix, add the built-in Document element and upload the file there. The PDF then displays inline so visitors can read it without downloading. Always add a plain download link underneath as a backup for mobile browsers.

Why is my embedded PDF showing a blank box?

Almost always it's the link. Either the file isn't truly public, the URL points to a viewer page instead of the raw .pdf, or the host blocks framing with a security header (Google Drive's standard share link is a common culprit). Move the file to a host you control or use that service's dedicated embed URL, and make sure the link starts with https://.

Can I embed a PDF without any code?

Yes. On Wix, the Document element handles it entirely through the editor, with no code at all. Many other site builders and CMS platforms offer a similar "embed file" or PDF widget. And even the HTML iframe method only asks you to copy and paste one snippet, which most people manage fine without a coding background.

Will the embedded PDF work on mobile phones?

Sometimes, but not reliably. Some mobile browsers refuse to render PDFs inside an iframe and show a blank space or a download prompt instead. That's expected behavior, not a bug in your setup. This is exactly why you should always place a visible "Download PDF" link beside or below the embed.

Should I use <iframe>, <embed>, or <object>?

For everyday use, <iframe> is the most dependable and best supported across browsers, so start there. The <embed> and <object> tags also display PDFs and can serve as nested fallbacks, but they offer no real advantage for a simple inline document. Stick with the iframe unless you have a specific reason not to.

How big can the PDF be?

There's no hard limit, but smaller is better. A heavy, image-rich PDF can take several seconds to appear inside an iframe, and many visitors give up before it loads. Aim to keep files under a few megabytes by compressing images and removing unused pages, and reserve large documents for a download link rather than an inline viewer.