Featured Content
eGuide: Digital Transformation
Enable your employees to remain productive throughout the document management process.
Read More
SDK Technologies
Accusoft SDKs
Improve Form Processing Text Recognition Results with Regular Expressions
Learn how SmartZone uses a regular expression engine integrated into the recognition engine to achieve the best possible accuracy on data that can be defined by a regular expression.
Experience Docubee
Meet Docubee
Docubee is an intelligent contract automation platform built to help your team success
Can I host multiple PrizmDoc viewers on a single page?
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>