Manual Integeration

CloudPDF is a Javascript PDF viewer. For manual integration into your website, you can download a zip file with a working example by clicking "Download Viewer" or you can follow the instructions below.

If you are using one of the popular Javascript frameworks such as React, Angular or Vue, click the button "Framework Integrations"

Include this script at the end of the <body> tag

<body>
<!-- Other contents -->
<!-- .... -->
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
</script>
</body>

Add the following div tag to the place where you want the viewer to show up

<div id="viewer" style="width: 800px; height: 500px;">
</div>

Full Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudPDF - viewer</title>
<style>
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="height: 100%">
<div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
</script>
</body>
</html>
  • documentId After you upload your document to CloudPDF you will receive a documentId. How to upload a document?
  • darkMode You can set the viewer to light or darkmode by changing this variable to true or false

To view all the options go to viewer options

NOTE: In this example we set our document security to public. After uploading a document, the document is by default set on non-public to guarantee security. To view a document that is not public you must first create a signature on your server or you can change the security settings on a document.