Page tree
Skip to end of metadata
Go to start of metadata



HDC can be integrated with 3rd party websites and provide both static and interactive view on the data.

A static images can be delivered through a dedicated API interface that takes object information and other configuration parameters. To find out more please refer to HOPAGetView4Object manual. 

For interactive integrations please start with reviewing a sample integration page provided for each application


HDC Application can be loaded in anonymous mode (see Anonymous User). 

To load the application, design an iframe location on your webpage that can look like this:

<div> <iframe width="800px" height="800px" class="hdcFrame"></iframe> </div>

Application Parameters

To load the application in a proper state, several important URL parameters must be used. 

If the parameters are not provided, the application will load in it's normal state. 


Recommended Value

for Embedded scenario

Possible Values






  • false - object properties will not be shown when clicked or hoovered

  • true - a simplified object properties view will be shown



  • true - a viewer toolbar will be shown

  • false - a viewer toolbar will not be shown



  • simple - a simple zoom toolbar will be shown, most suitable for anonymous access

  • full - a standard toolbar will be shown, that is most suitable for non-anonymous users and is dependent on actions performed (select, draw, redline, print)



  • true - a side panel used for filter legends will be included in the viewer. This panel contains listing of all filters in the system. Filter availability cannot be controlled on per user basis.

  • false - a side panel will not be shown. Presentation can still be applied through client side API.

Sample URL with requried parameters:

var hdcUrl = hdcHost + '/AnonClient/?viewport=EmbeddedViewer&viewerProperties=true&toolbar=true&toolbarStyle=simple&ViewerSidePanel=false';


Direct communication with an application running within an iframe is not allowed. To achieve a bi-directional communication HDC is using a Window.postMessage() mechanism (Link)

All functions exposed by Embedded Viewer API are available through this method as well. 

Please check the source of a sample page messageTester.html for samples on how to call and receive notifications from HDC Embedded application. 

Sending requests to Embedded application

Sample request to show specific object:

function showObject() {
	//get frame where the HDC application was loaded
    var hdcFrame = document.querySelector('.hdcFrame');
    var hdcWindow = hdcFrame.contentWindow;
    var targetOrigin = hdcUrl;

    /*Message looks similar for each method.
    * operation - corresponds to function from Embedded API
    * remaining parameters should be the same, as parameters for Embedded API function*/
	//get values from text boxes. If the domain ID is given, an external ID values can be given.
    var objectId = document.getElementById("Hdc_objectId").value;
    var objectClass = document.getElementById("Hdc_objectClass").value;
    var domain = document.getElementById("Hdc_domain").value;

	//prepare a simple message object
    var message = {
        operation: 'showObject',
        objectId: objectId,
        classId: objectClass

    if (domain !== "") {
        message.domainId = domain;

	//send the request to an iframe:
    hdcWindow.postMessage(message, targetOrigin);

Receiving requests from an Embedded application

//Subscribe to message events
window.onload = function () {
    window.addEventListener("message", this.receiveMessage);  

/*Sample code for receiving messages*/
function receiveMessage(event) {
    /* - message data (JSON or text)
        event.origin - The origin of the window that sent the message (url)
        window.origin - our origin (url)
        event.source - A reference to the window object that sent the message;

    if (event.origin !== hdcHost) {
        console.warn("Unauthorised message!");
    } else {
        console.log('Authorized message received!');


Events available through Message controller:

  • *.*
  • *.*
  • ui.system.ready
  • ui.docview.document.load
  • ui.system.messageapi.ready
  • No labels