Embedding more than one PDF div on a page

[danielc36355721]

I am using the pdf embed api code to add divs to a page that will show the PDF inline. However, when I have more than one PDF, it doesn't seem to work. It only shows the second one. Any idea on how I can embed two different frames on my page?

[Joel_Geraci · Accepted solution]

Take a look at this CodePen for a working example. You just need to create two different AdobeDC.View objects and be sure to use an embed mode that doesn't take over the entire browser window.

[danielc36355721]

Thanks for your reply. I appreciate your example, my code is using the embed code from the api tool. Below you can see how I have two divs in a row... this is only showing the second file. How would this be edited to match what you are suggesting? 

<div id="adobe-dc-view" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

<div id="adobe-dc-view" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf2"}},
			metaData:{fileName: "second file.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

[danielc36355721 · Accepted solution]

Answering this after resolving it, we simply change the name of the two divs as well as the div reference within the script, and this will allow for more than one PDF to be shown.

<div id="adobe-dc-view1" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view1"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

<div id="adobe-dc-view2" style="width: 100%;"></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: "9dcefe93a0974e39bde91432083cffec", divId: "adobe-dc-view2"});
		adobeDCView.previewFile({
			content:{location: {url: "https://file.org/pdf2"}},
			metaData:{fileName: "second file.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

[Joel_Geraci]

Glad you go there first. I'm very curious to see what you are doing with Embed API. If you don't want to share broadly in the forum, you can message me directly.

[danielc36355721]

Thanks for your reply. Actually I'm working now on a simple page that would
expand the lightbox button to show a PDF. We are a non-profit working in
the area of urban planning and preservation. I have to share 5-6 PDF
documents on a page and wanted to experiment with different options, so I
found the embed code and tried to play around with it.

On that note, I am trying now the Lightbox version... I took your codepen
on buttons connected to lightbox. For some reason it's not working on my
page:

https://mdpl.org/2020/08/21/ocean-drive-master-plans/

If you click the button nothing happens, and I get an error on the console.

Here's my code (adapted from yours..). I put it in a wordpress block.





Read the Full Plan

//

If you have any advice I would greatly appreciate it.

Thank you,
Daniel

Thank you,
Daniel

[Joel_Geraci]

The error is that the clientId has already been declared. You only need to declare it once, not for every button.