Answer
It is possible to host multiple viewers on a single page. The following example leverages Bootstrap’s tab implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="" />
<!-- Title -->
<title>AccuSample</title>
<!-- Libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<!-- PrizmCSS -->
<link rel="stylesheet" href="https://pcc-demos.accusoft.com/static/viewer-latest/css/viewercontrol.css">
<link rel="stylesheet" href="https://pcc-demos.accusoft.com/static/viewer-latest/css/viewer.css">
<!-- Inline Stylesheet -->
<style>
body {
overflow-y: hidden;
}
#viewer1, #viewer2 {
height: calc(100vh - 3em);
width: 100%;
}
</style>
</head>
<body>
<!-- #main -->
<main class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="viewer1-tab" data-toggle="tab" href="#viewer1">Viewer 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="viewer2-tab" data-toggle="tab" href="#viewer2">Viewer 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="viewer1" role="tabpanel">
<div id="viewer1">
</div>
</div>
<div class="tab-pane fade" id="viewer2" role="tabpanel">
<div id="viewer2">
</div>
</div>
</div>
</main>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- PrizmJS -->
<script src="https://api.accusoft.com/v1/docstore/viewer/assets/classic/bundle.js"></script>
<script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/jquery.hotkeys.min.js"></script>
<script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/viewercontrol.js"></script>
<script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/viewer.js"></script>
<!-- Inline Script -->
<script>
var viewingSessionId1;
var viewerControl1;
var viewingSessionId2;
var viewerControl2;
$(document).ready(function() {
$.ajax({
"type": "post",
"url": "https://api.accusoft.com/PAS/V1/ViewingSession",
"headers": {
"acs-api-key": ""
},
"data": JSON.stringify({
"source": {
"type": "url",
"url": ""
}
})
}).done(function(response) {
viewingSessionId1 = response["viewingSessionId"];
// Initialize viewer
viewerControl1 = $("#viewer1").pccViewer({
documentID: viewingSessionId1,
imageHandlerUrl: "https://api.accusoft.com/v2/viewers/proxy",
language: languageItems,
template: htmlTemplates
}).viewerControl;
});
$.ajax({
"type": "post",
"url": "https://api.accusoft.com/PAS/V1/ViewingSession",
"headers": {
"acs-api-key": ""
},
"data": JSON.stringify({
"source": {
"type": "url",
"url": ""
}
})
}).done(function(response) {
viewingSessionId2 = response["viewingSessionId"];
// Initialize viewer
viewerControl2 = $("#viewer2").pccViewer({
documentID: viewingSessionId2,
imageHandlerUrl: "https://api.accusoft.com/v2/viewers/proxy",
language: languageItems,
template: htmlTemplates
}).viewerControl;
});
});
</script>
</body>
</html>