Skip to content

Dash

Documentation about how to integrate with 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

Iframe integration#

Dash can be integrated into your existing application by the use of an iframe. The mechanism proposed for authentication is the same as above

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

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.