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

📘

Avoid Using Referrer-Policy: same-origin for Embedded Inline Frames

Setting Referrer-Policy: same-origin can cause significant issues when embedding content in inline frames. This policy prevents the Referrer header from being sent on cross-origin requests, breaking functionality for embedded iframes that depend on it for authentication, resource loading, or API calls.

Why same-origin Causes Problems

  • The Referrer header is omitted for cross-origin iframe requests, leading to authentication failures or missing context.
  • Some browsers, like Safari, enforce stricter privacy settings (e.g., "Prevent Cross-Site Tracking"), which can exacerbate this issue.
  • This breaks cross-origin iframes even when other headers (e.g., CORS) are properly configured.

Avoid using Referrer-Policy: same-origin for inline frame content. Instead, use a more permissive policy that allows the Referrer header to be included for cross-origin requests

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>

Safely and securely embed views with restricted URL based scope

You can use this API to create restricted scope URL views.

For example, you want to create a limited scope view that only allows to see worker's location near or inside the shift destination geofence. To achieve this, you may compose the following url with these parameters:

https://embed.hypertrack.com/orders/your_order_handle?show-visits-only=true

To achieve this, you use this API to create a secure embed URL as shown in the API reference above.

The secure_embed_url value shared in the API response provides a secure way of creating a URL string that can be safely shared with your customers while ensuring worker's home location privacy.

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 7 months ago