It is incredible just how much information we have today stored in PDF format. According to the PDF Association, approximately 2.5 trillion PDFs are created every year, making up 6 percent of the web. As a web developer, though, PDFs aren’t always the most outstanding experience online:
- Viewing experiences vary significantly across different users and devices because they depend on a PDF viewer. Whether it is embedded in web browsers or free online libraries, some viewers are better than others. Adobe Acrobat Reader is generally the universal standard for viewing PDFs properly. Google Chrome is also very common. However, many things have worked in Acrobat that still don’t work or render correctly in Chrome.
- It becomes difficult for me to be able to incorporate PDFs into the rest of my website. Most often, PDFs would prompt users to download PDFs on their devices.
- Converting PDFs to HTML is complicated and unreliable. If I want to present content inside a webpage that is in PDF format, I might often flatten it to PDF to make it easier to embed.
- I have no visibility into how my visitor is viewing those PDFs. This means that I have no idea if someone is reading certain pages, how long they spend on those pages, etc.
Fortunately, Adobe PDF Embed is an excellent solution to solve all of these challenges.
What is Adobe PDF Embed API?
Adobe PDF Embed API (PDF Embed API) is a free and easy way to incorporate a PDF directly into your webpage with just an easy snippet of code. It is entirely free to use and renders client-side within your web app. You don’t have to learn a sophisticated PDF library, and it is super easy to do. No data is generated on Adobe servers. You can even play with it here.
Does It Cost Anything?
Nope! The greatest thing about Adobe PDF Embed API is that it is entirely free. You don’t need anything other than a webpage to use PDF Embed.
With that, now let’s learn a little more about some of the things you can do with Adobe PDF Embed API.
One of the powerful things about the PDF Embed is that you have different embed modes to choose from depending on the type of content that you want to include:
Lot’s of APIs
Viewer API allows you to control how the Viewer behaves, such as zoom, etc. This is ideal when you want to control PDF Embed API with your own buttons.
Annotations API allows you to add annotations like comments, highlights, etc. from API, or read the current annotations in the PDF. This is ideal for adding annotations in a document or pulling out comments to integrate with other systems.
How Can I Try It?
- See in real-time the different embed modes available for your PDFs.
- Customize which features you want as part of the viewer such as annotation tools, download PDF, Print PDF, page controls, etc.
- Generates code for you to paste right into your website
Getting Your Client ID
If you want to try the PDF Embed in your own code, it works without a Client ID when you are using it locally. However, if you want to actually incorporate it into your website, you will need to get Client ID. Get your Client ID here.
Here are a couple of important tips:
- To create a Client ID, you will need to have an Adobe ID. If you don’t have one, you can sign up here using an email address, Google, Facebook, or Apple ID.
- You need to set your application domain in order for this to work.
Once you create your Client ID, you will want to copy and use that in your code.
NOTE: While you can edit your configurations in the Adobe.io Console, you will want to go to the link to create your key. If you create your key from within the Adobe.io Console, it won’t give you the option to set your domain.
Generating Your Code
When you’re using Demo Site and you click on Generate code, it will look something like this:
To get started, you will want to replace the following items:
- Replace <YOUR_CLIENT_ID> with the Client ID that you generated.
- Replace the url parameter with the URL of your PDF you want to view.
NOTE: Because PDF Embed renders client-side in the browser, it will honor any Cross-Domain restrictions set, so you may need to ensure your headers allow cross-domain linking.
- Change fileName to the name of your document. This will appear in the viewer.
Once you do that, you’ll be able to embed your PDF into your website. It’s that easy!
Where to Learn More
There are a lot of different resources that are available to make it easier for you to learn about how to use Adobe PDF Embed API. Check out a few of these resources:
Examples That Use PDF Embed API Today
There are a number of applications that already use PDF Embed API today:
PDF Embed really allows for a lot of flexibility to leverage PDFs with your websites. There is a lot more you can do with it from Analytics, Event Listeners, and more which you can learn more about in this documentation.