Embed PDF in HTML

1. Put the PDF online. Upload it to your website’s media library, or share it from Google Drive or Dropbox so anyone with the link can open it.
2. Paste its link above and give it a short title, such as “Our menu”. Screen readers read the title out.
3. Pick how it should appear: a viewer on the page (iFrame), a download button, or a card that opens the PDF in a new tab.
4. Click Generate HTML, then Test it here to check the PDF really shows.
5. Copy the code and paste it where you want it in your page’s HTML, or in your site builder’s HTML or code block.

The code for a viewer with a link underneath looks like this:

A width of 100% fills the space the code sits in, so it shrinks to fit on a phone. The height is fixed, because a PDF viewer has no natural height of its own; 600 to 800 pixels shows most of a page.

HTML has three tags that can show a PDF inside a page. They all hand the PDF to the browser’s own viewer, so what visitors see is the same; the differences are in what happens when that doesn’t work.

Use iFrame with the Open the PDF link turned on unless you have a reason not to. It is the tag site builders accept most readily, and the link covers phones that can’t show PDFs in a page.

Google Drive: share the file with Anyone with the link, copy the link and paste it above. A normal share link ends in /view, which Drive won’t let other sites show, so the tool changes it to the /preview link Drive allows. Drive draws the pages itself, so this viewer also works on phones. Drive’s own Embed item option (in the ⋮ menu when the file is open in a new window) gives the same link.

Dropbox: create a share link and paste it. It ends in dl=0, which opens Dropbox’s page; the tool changes it to raw=1 so the PDF itself is served. Use Test it here to make sure it shows.

Google Docs, Sheets and Slides: paste the share link in the same way. It is changed to the /preview link, and the download button saves the file as a PDF.

OneDrive: a share link opens OneDrive’s page and usually won’t show on other sites. Right-click the file in OneDrive, choose Embed, and paste the link from the code it gives you.

Whichever you use, anyone who can see your page can open the file, so don’t embed anything private this way.

• WordPress: the easiest way needs no code. Add a File block, upload the PDF and switch on Show inline embed. To use the code instead, add a Custom HTML block and paste it. On WordPress.com, iframe code only works on plans that allow custom code.
• Wix: click Add Elements (+), then Embed Code and Embed HTML. Choose Code, paste it in, and drag the box to the size you want.
• Squarespace: add a Code block where the PDF should go and paste the code. Code blocks are only available on plans that include custom code.

Choose WordPress, Wix, Squarespace in the tool to get the code with these steps underneath it.

• It’s a phone. Chrome on Android usually can’t show a PDF inside a page, and iPhones often show only the first page. That is what the Open the PDF link underneath is for. A Google Drive viewer works on phones too.
• The host refuses. Many sites, including Google Drive’s normal share page, tell browsers not to show their pages inside other sites. The box stays blank or says it “refused to connect”. Host the PDF yourself, or use a Drive /preview link.
• The link starts with http://. A page served over https:// won’t load http:// content in a frame. Use the https:// address.
• The file is private. A link that only works while you are signed in won’t work for visitors. Open it in a private window to check.
• The builder strips the code. Some site plans remove iframes from pasted HTML. Use the builder’s own PDF or file block, or a link card.