Manual Integeration

CloudPDF is a JavaScript PDF viewer that can be manually integrated into your website. Follow the instructions below for a smooth integration process.

If you are using a popular JavaScript framework such as React, Angular, or Vue, please refer to our "Framework Integrations" guide.

Include the following script at the end of the <body> tag:

<body>
  <!-- Other contents -->
  <!-- .... -->
  <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js"></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 location where you want the viewer to appear:

<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"></script>
    <script>
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {
        
      });
    </script>
  </body>
</html>

documentId After uploading your document to CloudPDF, you will receive a documentId. Learn how to upload a document
darkMode Set the viewer to light or dark mode by changing this variable to true or false.

For a complete list of options, refer to the viewer options.

NOTE: In this example, we set our document security to public. By default, documents are set to non-public to ensure security. To view a non-public document, you must first create a signature on your server or change the document's security settings.