What is the absolute bare minimum I need to use PrizmDoc Cloud?

Question

What is the absolute bare minimum I need to use PrizmDoc Cloud?

Answer

This will allow you to load a document via a URL using PrizmDoc Cloud. Just include your PrizmDoc Cloud API key in the POST request headers.

Please note: This is purely intended as a proof-of-concept. You should never include your API key in your client-side Javascript.

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- Metadata -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />

    <!-- Title -->
    <title>AccuSample</title>

    <!-- Libraries -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">

    <!-- PrizmDoc CSS -->
    <link rel="stylesheet" href="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/css/viewercontrol.css">
    <link rel="stylesheet" href="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/css/viewer.css">

    <!-- Inline Stylesheet -->
    <style></style>

</head>
<body>

    <!-- #viewer -->
    <div id="viewer" class="pccv pcc-full-screen"></div>

    <!-- Libraries -->
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/jquery-3.4.1.min.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/jquery.hotkeys.min.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/underscore.min.js"></script>

    <!-- PrizmDoc JS -->
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewercontrol.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewer.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewerCustomizations.js"></script>

    <!-- Inline Script -->
    <script>

        let viewingSessionId;
        let viewerControl;

        $(document).ready(function() {
            $.ajax({
                "type": "POST",
                "url": "https://api.accusoft.com/prizmdoc/ViewingSession",
                "headers": {
                    "acs-api-key": "4lTamQVZmrkqZhH8cZhdu7L0xyhUa3gorcaCFQpA_zmuowZs4zoF39V4IckpnVW_"
                },
                "data": JSON.stringify({
                    "source": {
                        "type": "url",
                        "url": "https://www.usability.gov/sites/default/files/creating-wireframes.pdf"
                    }
                })
            }).done(function(response) {
                PCCViewer.Ajax.setHeaders({
                    "acs-api-key": "4lTamQVZmrkqZhH8cZhdu7L0xyhUa3gorcaCFQpA_zmuowZs4zoF39V4IckpnVW_"
                });

                viewingSessionId = response["viewingSessionId"];

                // Initialize viewer
                viewerControl = $("#viewer").pccViewer({ 
                    "documentID": viewingSessionId,
                    "imageHandlerUrl": "https://api.accusoft.com/prizmdoc",
                    "language": viewerCustomizations.languages["en-US"],
                    "template": viewerCustomizations.template,
                    "icons": viewerCustomizations.icons,
                    "annotationsMode": "LayeredAnnotations"
                }).viewerControl;

                viewerControl.on("ViewerReady", function() {
                    console.log("Ready!");
                });
            });
        });

    </script>

</body>
</html>