Guides

Embed Views into Ops Dashboard

As team members are tracked throughout the day, operations managers need tools to monitor their teams in real-time and review detailed historical reports. As the number of assets on the move increases, these managers require scalable dashboards that allow for quick assessment of their teams’ locations, organized by criteria such as team names, categories, or geographic regions. They must have the ability to see where their team members are at any given moment, review their location history, activity, and tracking status, both currently and historically. For reporting and auditing purposes, they also need to export detailed worker history data and generate aggregated reports tailored to their preferences.

To simplify the management of large, mobile teams, HyperTrack offers restricted view functionality that automatically organizes devices based on metadata set through the SDK or API.

Embed our Views

All HyperTrack Ops views are embeddable in an iframe (inline frames). This section provides an overview and methods to use the iframe.

Inline Frames

In order to embed a dashboard into your web application, you can add embeddable views implemented with HTML inline frames.

An iframe has important properties to be considered during implementation.

  • Iframe size: By default, an iframe is sized with 200 pixels height and 300 pixels width and it is recommended to implement responsiveness using CSS. Here is a sample implementation
  • Responsive views: All embeddable views are responsive and the mobile views will be displayed when the iframe size is below 500 pixels
  • Security: When you activate the sandbox property for the iframe, please include allow-scripts allow-same-origin to ensure successful execution of the JavaScript present in the Views
  • Compatibility: Please review browser compatibility of iframe properties you want to use
  • Loading times: In order to improve speed, it's recommended to set the iframe's src attribute with JavaScript after the main content is done with loading

Embed views with a secure access token

Use the OAuth API to obtain a limited use token for secure access to the embeddable views.

This token would be unique, short-lived, and restricted. 

curl -X POST https://v3.api.hypertrack.com/oauth/token \
  -d "{ 
        "client_id": "{AccountId}:", 
        "client_secret": "{SecretKey}", 
        "grant_type": "client_credentials",
        "scope": "*"
      }"

Once this token is obtained, you can use it as follows:

https://embed.hypertrack.com/views/orders?token=<token from OAuth API>

Securely restrict views with access token scope

Use scopes to restrict access to certain pages or assets whenever necessary.

A scope value can be composed as follows:

[read|write|*].[api|embed].[orders|trips|devices].[order_id|trip_id|device_id]

Scope can be defined as * as in access everything allowedbut can also be composed as follows:

  • read.embed.orders allows you to embed views where you can retrieve and display all orders
  • read.embed.drivers allows you to embed views where you can retrieve and display all drivers
  • read.embed.orders.96f7ec96-402c-47a7-b0a1-eb6b91640a58 allows you only to display only this order

To obtain a restricted token to only access a given order order_122, you can use the following example with a limited scope:

curl -X POST https://v3.api.hypertrack.com/oauth/token \
  -d "{ 
        "client_id": "{AccountId}:", 
        "client_secret": "{SecretKey}", 
        "grant_type": "client_credentials",
        "scope": "read.embed.orders.order_122"
      }"

📘

Support for scopes with write and api values will be available in future releases.

2. Embed views using Publishable Key

You can embed the HyperTrack Ops views using your publishable key found in the Setup page on your HyperTrack dashboard.

## Coding view instructions
const baseUrl = "https://embed.hypertrack.com/views/orders"
## This is an example Publishable Key. Please replace it with the key you obtain from the Setup page.
const publishableKey = "rYd51pSVlZkhisUkcQCncp-c5CVxQeRi6s6bAXM6T76bWwUlaUMlQ"

## Embeddable widget for Get Devices Status by metadata
<iframe width="400px" height="400px" src=`{baseUrl}?publishable_key={publishableKey}` />

Updated 3 months ago