Many organizations have PDF documents on their web properties. While PDFs are a reliable format for storing and distributing content, when left up to the browser to determine, the consumption experience is unfortunately inconsistent.

Depending on the type of device, browser, and a user’s software preferences, a PDF may:

• Open in the current window or tab, taking them away from your web experience.
• Download directly to their device without opening (i.e: to a “Downloads” folder), potentially getting lost.
• Open a new window or a new tab, in either the foreground or the background.

As a site owner, none of these situations are predictable or ideal.

To make matters worse, a PDF in a new tab, window, or sent to a local folder becomes an analytics black box. You have no idea how people are interacting with the content.

There’s a better way.

The PDF Embed API solves this inconsistency by creating a uniform high-fidelity viewing experience for all users, regardless of device.

Not only do your PDFs look great and open within the browser as you intend, but the PDF Embed API also offers you complete control over the experience through a whole new set of capabilities including annotation, analytics, collaboration, save controls, and more.

Try the demo to get a sense of what the PDF Embed API can do. Oh, and did I mention it’s free to use?

But what about all the PDFs currently on your website? How can you make it easier to view all of the PDFs posted there without having to manually code each one to take advantage of these new features? That’s where Adobe PDF Embed API and Adobe Experience Platform Launch work beautifully together.

Adobe Experience Platform Launch enables brands to centrally manage and deploy scripts, data collection, and marketing technologies across their properties.

The instructions below assume you’re already familiar with Adobe Experience Platform Launch. If you’re not sure what that is or would like a refresher, check out the Launch homepage or product documentation to acquaint yourself.

What We’ll Do

• Create an Adobe PDF Embed API key
• Create an Adobe Experience Platform Launch Rule to deploy the PDF Embed API

Before We Begin…

You will need access to your organization’s Adobe Experience Platform Launch console. If you do not have access, please contact your organization’s Adobe administrator.

Assumptions and Caveats

Step 1 : Get an Adobe PDF Embed API Key

If you already have your PDF Embed API Key, skip ahead to the next section.

Head over to the PDF Embed API homepage and click the Get Free Credentials button, or use this direct link.

On the Get Started with Document Services APIs page:

• Click the Get Started button in the Create New Credentials section.

On the Create New Credentials page:

1. Select PDF Embed API as the service.
2. Give your credentials a name.
3. Enter the domain name of the site you want to deploy the Embed API on.
4. Click Create Credentials.

Your new Client Credentials are now ready. Make note of your Client ID(API Key), as you will need to copy it into the Launch rule that we create in the next step.

Step 2 : Create a Launch Rule

You’ll now use Adobe Experience Platform Launch to create a rule that:

• Runs on every page.
• Inspects the page for HTML ‘A’ tags that reference PDF documents.
• Rewrites the PDF links to use the Adobe PDF Embed API.

Create the Rule

1. Log in to Adobe Experience Platform Launch.
2. Select the Launch property on which you want to deploy the PDF Embed API.
3. Click the Rules tab for the selected property.
4. Click the Add Rule button.

On the Tag Properties page of your new rule:

1. Give your rule an easily recognizable name (ex: ‘Change PDF Links to PDF embed API’).
2. Click the Plus icon to add an event in the Events section.
3. Select Core as the Extension.
4. Select DOM Ready as the Event type.
5. Click the Keep Changes button in the top right hand corner.

Under the Actions section, click the Plus icon to add an action.

On the Action Configuration screen:

1. Select Core as the Extension.
2. Select Custom Code as the Action type.
3. Choose Javascript as the Language.
4. Click the Open Editor button to edit the code.

On the Edit Code screen:

Copy and paste the code from within the following gist into the code editor:

GIST: https://gist.githubusercontent.com/whatwork/43eb2ef874f4b662ca5271f690731795/raw/b2ad2098fbe40c93256e5181634e38a163cc1f2c/embedApiLightboxExample.js

IMPORTANT:  Replace the value of the client Id on line 4 with the value you were assigned when you created your PDF Embed API Client Id in step 1.

It should look something like this:

Click Save.

Publish the Rule

You will now publish and test your new rule.

1. Click Publishing Flow from the left-hand rail.
2. Click Add Library.

On the Create Library page:

1. Give your new library a name (ex: PDF Embed).
2. Select the environment to which you want to deploy the rule.
3. Click Add All Changed Resources.

You will see your new rule appear in the Resource Changes section.

Click the Save & Build for Development button.

Test the Rule

For the sake of demonstration, we’ll use the following HTML as an example. It’s deliberately simple, containing only 3 buttons with some PDF links.

GIST of HTML example: https://gist.githubusercontent.com/whatwork/7634bc02ae40ac1825e1738ca731a9d1/raw/31ae309f2fa8aa1eadeb98191e394f6ab9915e5f/embedApiLightboxIndex.html

Our test page when deployed to our web server:

Click one of the buttons and…

… the PDF loads in the Embed API viewer! Gorgeous!

Final Thoughts

We’ve been able to enhance the PDF reading experience for our site visitors in a matter of minutes with the combined power of the PDF Embed API and Adobe Experience Platform Launch.

Now that you see how easy it is to put the viewer on a page, explore the examples from our GitHub to get an idea of what possibilities are now open to you with the PDF Embed API.

Enjoy!