Integration
The flexibility of the Developer Cloud API is what makes it the best option if you are looking to display documents in a website or web app. This section will highlight a few widely-used platforms and show how embedding the DevCloudAPI Viewer in them is extremely easy.
Note: You'll get a better understanding of the guides for the separate APIs in this page if you've read the Getting Started beforehand.
Working with the Developer Cloud API PDF Viewer
This section will provide the guidelines to work with the viewer in the platforms where your own application, website, CMS or web application are being used. It is very easy to work with the DevCloudAPI PDF viewer by just embedding the HTML element of the viewer or using the direct URL in your website. We’ll also explore a few additional and more advanced options.
Embedding the Viewer
Simple Embedding
In the first step we will show the simplest application of the DevCloudAPI PDF viewer, which is copying the HTML objects provided by the viewer and pasting them anywhere in your own web environment. We’ll use a simple HTML page hosted in our own Foxit SDK website.
Embedding using HTML
Follow the steps in the 'Creating and Working on Projects' section if you haven’t learned how to create and use your projects yet.
First, click on the ‘Embed with iFrame’ button and copy the tag code in your project by clicking the ‘Copy Link’ button.
We suggest you change the viewer size before you do it to put it on the correct size for your page. We changed our dimensions to 1920x1080 to fit on the full page.
Open up the HTML page in your own website in any editor or platform you use. We’ll use a basic Visual Studio Code window in this example. You will paste the iframe code provided to you above in the HTML document.
After pasting the code in the HTML window, save the file and update it in our website. This is how it will look:
And that’s it, with two lines of code and a couple of minutes, we have embedded a complete PDF viewer in a simple website.
Embedding in a Content Management System (CMS)
Now, if you don’t have any programming experience and are hosting your website in a content management system like Wordpress or Wix, this section will show you how to do it.
Wordpress
First, click on the ‘Embed with iFrame’ button and copy the tag code in your project by clicking the ‘Copy Link’ button.
We suggest you change the viewer size (Check the ‘Viewer Size’ section to learn how) before you do it to put it on the correct size for your page. We changed our dimensions to 1920x1080 to fit on the full page.
In your Wordpress website, create a simple new page or article for testing purposes. Here’s their own article on how to do it. We’ve called our page ‘DevCloudAPI’ in this example.
In your page editing window, paste the iframe element.
Click on ‘Publish’ and open the page URL in your browser. This is how it looks with our own Wordpress layout:
Done! You now have a complete PDF Viewer in your website page in Wordpress. You can choose to add this anywhere, within an article, in multiple pages, as a presentation, brochure, whatever you like!
Wix
First, click on the ‘Embed with iFrame’ button and copy the tag code in your project by clicking the ‘Copy Link’ button.
We suggest you change the viewer size (Check the ‘Viewer Size’ section to learn how) before you do it to put it on the correct size for your page. We changed our dimensions to 1024x768 to fit on our page style.
In your Wix website, create a simple new page or article for testing purposes. Here’s their own article on how to do it. We have created a Devcloudapi website in Wix for testing and added some of our branding to it.
In your editing window, create a new Embed element and choose ‘HTML iframe’.
Place the object in the page, click on the ‘Edit Code’ button. Paste your iframe link from DevCloudAPI and paste on the ‘Add your code here’ box:
Click on ‘Publish’ to go live with your changes. This is how our website looks:
Done! You now have a complete PDF Viewer in your website page in Wix. You can choose to add this anywhere, within an article, in multiple pages, as a presentation, brochure, whatever you like!
Advanced Embedding using JavaScript
This section looks at a slightly more advanced application of the viewer, which is creating a new web application and adding the viewer as a JavaScript Object. You can also use the same copy and paste method from the previous section in this same web application.
Create a new web project
In this example, you will need a local server like Node.js, XAMPP or Microsoft IIS enabled on your machine to run the viewer. We’ll use Node.js and the http-server method to create a local web project and run it
- Create a new directory as a project folder, such as "D:/devcloudapi_test".
- Create a html file (index.html) in the "D:/devcloudapi_test " folder.
Add JavaScript and HTML tags
In your index.html page, put the following code in the <head> tag:
<link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/css/collaborationSDK.min.css"> <!-- The include below is not required for View API--> <link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/css/bundle/app.bundle.css"> <link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/lib/WebSDK/UIExtension.vw.css">
In the body of your HTML page, create a <div> tag like below:
<div id="pdf-ui"></div>
In the bottom part of your HTML page where you put the <script> tags, please add the following:
<script src="https://devcloudapi.foxitsoftware.com/lib/WebSDK/UIExtension.full.js"></script>
<script src="https://devcloudapi.foxitsoftware.com/js/collaborationSDK.min.js"></script>
<script>
var foxitViewer = foxitCollaborationSDK({
divId: 'pdf-ui',
apiKey: 'kI35VjtfdKGUomPn',
server: 'https://devcloudapi.foxitsoftware.com',
name: 'devcloud-api-user',
file: 'https://devcloudapi.foxitsoftware.com/docs/FoxitPDFSDKforWeb_DemoGuide.pdf',
fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'
});
</script>
Your complete index.html file should look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/css/collaborationSDK.min.css">
<!-- The include below is not required for View API-->
<link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/css/bundle/app.bundle.css">
<link rel="stylesheet" href="https://devcloudapi.foxitsoftware.com/lib/WebSDK/UIExtension.vw.css">
</head>
<body>
<div id="pdf-ui"></div>
<script src="https://devcloudapi.foxitsoftware.com/lib/WebSDK/UIExtension.full.js"></script>
<script src="https://devcloudapi.foxitsoftware.com/js/collaborationSDK.min.js"></script>
<script>
var foxitViewer = foxitCollaborationSDK({
divId: 'pdf-ui',
apiKey: 'kI35VjtfdKGUomPn',
server: 'https://devcloudapi.foxitsoftware.com',
name: 'devcloud-api-user',
file: 'https://devcloudapi.foxitsoftware.com/docs/FoxitPDFSDKforWeb_DemoGuide.pdf',
fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'
});
</script>
</body>
</html>
Run the project
Now, run the command prompt or PowerShell window in the D:/devcloudapi_test folder and the Node http-server command:
Node will open the local server in the 8080 port:
And finally go to http://localhost:8080 :
Done, you’ve just wrapped the DevCloudAPI into a JavaScript object and embedded the viewer into a local web application using Foxit Developer Cloud API! The possibilities are endless, and there are many more advanced workflows you can do with this option.
If you need more information or support for advanced workflows, get in touch using the https://devcloudapi.foxitsoftware.com/support
About Us
Foxit is the industry leader in PDF SDK Technology. We help you to add complete PDF functionality to your project and develop across all platforms and environments on one Core API.
Useful Links
Our Contacts
41841 Albrae Street,
Fremont, CA 94538, USA
Sales: 1-866-680-3668
Support: 1-866-693-6948