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>