Implementing Two CloudPDF Viewers on One Page

Introduction

This guide will walk you through the process of implementing two CloudPDF viewers on a single webpage. It is important to include the CloudPDF script tag only once and use unique id tags for each viewer div. Follow these steps to successfully embed two viewers on your page.

Instructions

1. Include the CloudPDF script tag once at the end of the <body> tag:

<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js"></script>

2. Add two unique div tags with different ids to the locations where you want the viewers to appear:

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

3. Use separate script tags for each viewer with unique configurations:

<script>
  const config1 = {
    documentId: 'documentId_1',
    darkMode: true
  };
  CloudPDF(config1, document.getElementById('viewer1')).then((instance) => {});
  const config2 = {
    documentId: 'documentId_2',
    darkMode: false
  };
  CloudPDF(config2, document.getElementById('viewer2')).then((instance) => {});
</script>

Replace documentId_1 and documentId_2 with the respective document ids for each viewer.

4. 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 - Two viewers on one page</title>
    <style>
      body, html {
        height: 100%;
        margin: 0px;
      }
    </style>
  </head>
  <body style="height: 100%">
    <div id="viewer1" style="width: 800px; height: 500px; margin: 80px auto;"></div>
    <div id="viewer2" style="width: 800px; height: 500px; margin: 80px auto;"></div>
    <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js"></script>
    <script>
      const config1 = {
        documentId: 'documentId_1',
        darkMode: true
      };
      CloudPDF(config1, document.getElementById('viewer1')).then((instance) => {});
      const config2 = {
        documentId: 'documentId_2',
        darkMode: false
      };
      CloudPDF(config2, document.getElementById('viewer2')).then((instance) => {});
    </script>
  </body>
</html>

That's it! You now have two CloudPDF viewers implemented on a single webpage. Make sure to replace the documentId values with the actual document ids you want to display.