Dash

Documentation about how to integrate Dash in other applications

Direct authentication with access token

In order to integrate Dash within your application, it is possible to point directly to any valid URL and to automatically log in any user by adding the access_token query string at the end of the URL. For example if you want to point to the list of dossier:

https://dash.pricehubble.com/my-dash?access_token=<YOUR ACCESS TOKEN>

Or you might want to point directly to a specific dossier overview

https://dash.pricehubble.com/dossier/169b2b19-01b6/overview?access_token=<YOUR ACCESS TOKEN>

Info

Replace <YOUR ACCESS TOKEN> with the value returned by the authentication API. To obtain this access token refer to the Authentication documentation

Warning

Do not reveal your access token to an untrusted user or the public. This technic is reserved for users within your organisation. If you need a public facing solution use a dossier permalink

Iframe integration

Dash can be integrated into your existing application by the use of an iframe. The mechanism proposed for automatic authentication is the same as above for trusted users. For public facing applications you must use a dossier permalink.

<iframe
  width="100%"
  height="500px"
  id="iframe"
  src="https://dash.pricehubble.com/my-dash?access_token=<YOUR ACCESS TOKEN>">
</iframe>

Listen to events from Dash

Dash will communicate some information via the Post Message API. You can listen to them this way:

<script>
  var receiveMessage = function (event) {
    var data = event.data

    if (data.contentHeight) {
      console.log(`content height: ${data.contentHeight}`)
      // activate this line if you want the iframe height to follow Dash content
      // document.querySelector('#iframe').height = data.contentHeight + 'px'
    }
    if (data.state && data.state === 'browserNotSupported') {
      console.log("the browser doesn't support WebGL")
    }
    if (data.state && data.state === 'ready') {
      console.log('iframe has fully loaded')
    }
  }
  window.addEventListener('message', receiveMessage, false)
</script>

Control the navigation

It is possible to order Dash to navigate to any specific pages without having to reload the whole iframe:

<script>
  var iframe = document.querySelector('#iframe').contentWindow
  // go to the list of dossier
  iframe.postMessage({ navigate: '/my-dash' }, '*')
  // go the overview of a specific dossier
  iframe.postMessage({ navigate: '/dossier/169b2b19-01b6/overview' }, '*')
</script>

This is only useful if you want to override the natural navigation interface of Dash.

Warning

We are careful to not change any of our URLs without a good reason. But this is something that cannot be avoided completly. You have to be ready to make the necessary adjustments when that happens.