Embedding the WebViewer on your site

Embedding the viewer in your site or app is a seamless process, all you need is to link to the library and have your bootstrap code ready.

Example 1: Autoload and display a study from a zip archive, hosted online

1. Include the library in the page you wish to display the viewer

   <script src="https://cdn.dicom.link/dicomViewer/1.6.4/dicomViewer.min.js"></script>
   

2. Bootstrap code to load and parse the page

   <script type='text/javascript'>
   		window.addEventListener('load', (event) => {   
   			var key = '[paste here the licence code you\'ve been provided with]';
   			dicomViewer.License = JSON.parse(atob(key));
   			dicomViewer.parseDOM();
   		});
   </script>
   

3. Upload a zip archive containing dicom files, including the DICOMDIR file, which is an index. This is very important for lowering the bandwidth because the viewer will have the knowledge of the structure of the study and fetch only the required images; no full scan is required.

4. Add the elements containing the viewer on the page. They must have the following attributes:       data-dicomviewer       data-dicomzip="[url here of the zip archive]" Example: <div class="test-container" data-dicomviewer data-dicomzip="/upload/arhive.zip" id="test-container-id"></div>

5. The server hosting the archive must support the following features:
         partial requests,
         CORS, if it has a different origin than the server hosting the web page

   
   

Example 2: Load the viewer inside a div

1. Include the library in the pages you wish to display the viewer and setup the tag to host the viewer

   <script src="https://cdn.dicom.link/dicomViewer/1.6.4/dicomViewer.min.js"></script>
   ..
   <div id="dicomviewer-container"></div>
   
   

2. Bootstrap code:

   <script type='text/javascript'>
   		window.addEventListener('load', (event) => {   
   			var key = '[paste here the licence code you\'ve been provided with]';
   			dicomViewer.License = JSON.parse(atob(key));
   			window.dicom1 = new dicomViewer.loadStudy();
   			dicom1.init('.dicomviewer-container').then((r) => {
   			  // on completed
   			});
   		});
   </script>
   

Differences between free and commercial versions

Limitation for Free version:

1. the free license must be renewed monthly
2. only one viewer is allowed per page
3. advanced functions are disabled: MIP,MPR,Drag/Drop, extra connectivity
4. supported archive types: zip only
5. supported Transfer Syntaxes: uncompressed only

CloudPACS Basic, which is the free version the CloudPACS suite, has the Free version of the viewer.
Any purchase of the viewer for your specified domain also activates the viewer in CloudPACS Basic to Pro, if the same email was used to register the account.