How to Embed Your PDF for Free
Online visitors appreciate the ease of use and functionality of elements on websites they browse. If you have a website that presents any sort of documents online in a PDF format, creating handy displays of interactive documents will attract more visitors and enhance their experience. As a website owner, you should always keep that in mind.
If you have one PDF file or files that you want to display on your site, you might want to embed them in your HTML code, which can be done in several ways. Below are at least three methods of how to embed a PDF document. Using any of them adds value to your website and gives the visitors an option that other similar websites might not provide at all.
Method #1: Integrate PDFs with our editor
If you not only want your users to find and download the PDF file they need but also give them a unique solution that will enable them to edit the file with just one click, consider embedding the file into your website’s content with FormsPal. Our tool combines both PDF viewer and editor functions and lets your visitors use various features to work with the document they need.
Embedding with the FormsPal PDF editor is easy:
- Go to formspal.com/pdf-editor/embed-pdf/.
- Provide the needed document – you can either paste a URL to the PDF file or upload it from your device.
- Choose how you want your PDF file link to be displayed on your webpage – as an image link or text link (if you choose the image, you can make it big or small, too).
- Check how the PDF file will look on your web page and test the functionality of the embedded PDF.
- Copy and paste the text into your website HTML to embed the PDF file.
This is an example of how the code will look:
<a href=" https://formspal.com/pdf-editor/?docId=12325421" target="_blank" class="preview-cont" style="display: block;width: 180px;height: 60px;text-align: center;border: 1px solid #ddd;border-radius: 4px;"><img width="160px" height="60px" src="https://formspal.com/images/web-in/open_with.svg" alt="open with formspal.com" /></a>
As a result, your visitors will be able to view the pages of the PDF document, change their order, add text, draw, fill out, and edit, sign, and save PDFs using our tool.
Advantages:
- Both viewer and editor options
- Higher level of interactivity
- Enhanced user experience
- Works for all browsers and devices
Disadvantages: None
Method #2: Incorporate <iframe>
One of the default options of how to embed PDF into your content is to use the iframe tag. Many website owners widely use this technique to embed a PDF into a web page. It is often adopted because of its ease of use and that almost any browser is compatible with the iframe tag.
The iframe code is also provided by online storage services like Google Drive or Microsoft’s OneDrive when you upload your PDF file or files there and want to embed them. In such a case, you need to make sure that you made the file open to the public. After you get the iframe code copied, you can easily paste it on any of your pages and embed a PDF file in your web page.
With the iframe tag, you can specify your preferred width and height of the embedded PDF document. The text will look as simple as this:
<iframe frameborder="0" scrolling="no"
width="640" height="480"
src="https://drive.google.com/DOCUMENT/d/[DOCUMENT_ID]/preview">
</iframe>The width and height parameters above are given just as an example; you can specify it according to your content area width or as 100%, for example.
For the "scr" parameter, you can use a direct URL to the file—for example, https://mysite.com/my-files/file.pdf.
Advantages: A quick and straightforward way to integrate a PDF document.
Disadvantages: No control over how PDF document is presented on a web page.
Method #3. Make use of the Adobe API
Adobe View SDK is a unique solution that offers an Inline Mode that lets a visitor scroll through all of the pages of a PDF document without having to go to the parent web page. Another thing is that Adobe View SDK lets website owners hide the PDF control panel from users and blend PDF files with other HTML elements on your web page, which makes the content on your website look more consistent.
However, it will take some time to embed the PDF using this approach. First, you will have to go to the Adobe website and create an account for your site (or use the existing one). Then, you will need to open Adobe playground to create the code. You will need to replace certain default elements: ClientID (API key) should be replaced with your credentials (only if you plan to use a local webserver). The URL has to indicate the location of your PDF document.
The example HTML code you insert into your page content will look like this:
<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function () {
var adobeDCView = new AdobeDC.View({
clientId: "YOUR-CLIENT-ID",
divId: "adobe-dc-view",
});
adobeDCView.previewFile(
{
content: {
location: { url: "https://yoursite/some-folder/your-file.pdf" },
},
metaData: { fileName: "your-file.pdf" },
},
{
embedMode: "IN_LINE",
showDownloadPDF: false,
showPrintPDF: false,
}
);
});
</script>
If you want to allow users to download the embedded PDF file, you can set showDownloadPDF to “true.” Also, set showPrintPDF to “true” if you want to display the Print button.
Advantages: A more customized PDF reading experience for the visitors.
Disadvantages: This method requires more steps and knowledge to embed PDF documents than other options.
As you can see, there are at least three ways to embed PDFs in your webpage. The choice depends on how you want your PDF document to be displayed. You clearly don’t need to be tech-savvy to use any of the methods to embed PDFs on your page, so it’s all about your preference and convenience!