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 a study from a ZIP archive

Step 1. Include the library on the page where you want to display the viewer:

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

Step 2. Add the 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));
    dicomViewer.parseDOM();
  });
</script>

Step 3. Upload a ZIP archive containing DICOM files, including a DICOMDIR index file. The index is important for reducing bandwidth — the viewer knows the study structure and fetches only the required images without a full scan.

Step 4. Add the viewer element to the page:

<div class="test-container"
     data-dicomviewer
     data-dicomzip="/upload/archive.zip"
     id="test-container-id">
</div>

Note: The server hosting the archive must support partial requests (Range) and CORS (if on a different origin than your page).

Example 2 — Load the viewer inside a div

Step 1. Include the library and create the container:

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

Step 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) => {
      // viewer ready
    });
  });
</script>

Free vs. Commercial licence

CloudPACS Basic (the free tier) includes the Free viewer. Any commercial purchase of the viewer for your domain also upgrades the viewer in your SecurePACS Basic account, if the same email was used to register.