This section explains how to get started using plain HTML.

1. Either:

   • Host the bundle.js included in the @accusoft/pdf-viewer npm package and load it in your page with a script tag:

     <script src="path/to/bundle.js"></script>

   • Reference the bundle.js file using a popular npm CDN, like jsdelivr.net:

     <script src="https://cdn.jsdelivr.net/npm/@accusoft/pdf-viewer@3/bundle.js"></script>

   This will attach the viewer creation API to window so you can use it (window.Accusoft.PdfViewerControl).

2. To ensure the best experience on mobile devices, make sure your application defines a meta viewport tag in the head of your HTML, like this:

   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

   Without this, the viewer UI may appear very small and be unusable on a mobile device (if you are already developing a web application for mobile, you likely already have a tag like this defined).

3. Define an empty container DOM element where you want the PDF viewer to be located:

   <!-- NOTE: The viewer will only fill the size of your container.
        Make sure your container has a defined width and height! -->
   <div id="myContainer" style="height: 800px;"></div>

4. Create the viewer:

   <script>
     (async () => {
       // Create a viewer
       window.myViewer = await window.Accusoft.PdfViewerControl.create({
         container: document.getElementById('myContainer'),
   
         // URL or Uint8Array for a PDF
         sourceDocument: 'https://yourdomain.com/documents/example.pdf'
       });
     })();
   </script>

   Optionally, use a licenseKey of 'eval' to evaluate Professional features, enabling the allowedControls you want, such as annotation tools:

   <script>
     (async () => {
       // Create a viewer
       window.myViewer = await window.Accusoft.PdfViewerControl.create({
         container: document.getElementById('myContainer'),
   
         // URL or Uint8Array for a PDF
         sourceDocument: 'https://yourdomain.com/documents/example.pdf',
   
         // Evaluate Professional features (page contents will be watermarked)
         licenseKey: 'eval',
   
         // Configure the UI:
         allowedControls: {
           // Enable or disable annotation tools (all false by default):
           ellipseTool: true,
           freehandDrawingTool: true,
           freehandSignatureTool: true,
           lineTool: true,
           rectangleTool: true,
           textHighlightTool: true,
   
           // Enable or disable other parts of the UI (all true by default):
           fullScreenToggle: true,
           nextAndPreviousPageButtons: true,
           pageNumberAndCount: true,
           printing: true,
           search: true,
           thumbnails: true,
           zoomInAndOutButtons: true
         }
       });
     })();
   </script>