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.

Whysame-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 usingReferrer-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 an OAuth access token

Use Create access token (POST /oauth/token) to obtain an access_token. Make this request on your server; never expose your account secret in browser code.

Choose a scope appropriate to the view. This example requests read access to order embeds:

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

Use the returned access_token as the view's token query parameter:

https://embed.hypertrack.com/views/orders?token=<access_token>

This is an account-wide order-view token, not a URL-locked view for one customer. scope: "*" grants all access allowed by the credentials and is not a restricted scope. Tokens expire according to the response's expires_in value.

Secure an individual order's embed URL

Use Secure Embed View (POST /oauth/embed-token) for an order-specific URL. This is a separate flow: it requires embed_url and returns secure_embed_url, rather than requiring you to assemble a URL from the token yourself.

The order must exist and have an associated device. The endpoint supports order detail URLs, not an arbitrary dashboard or list-view URL. For example, to limit the view to the visit destination, request a secure URL with show-visits-only=true:

curl -X POST https://v3.api.hypertrack.com/oauth/embed-token \
    -u '{AccountId}:{SecretKey}' \
    -H 'Content-Type: application/json' \
    -d '{
        "grant_type": "client_credentials",
        "embed_url": "https://embed.hypertrack.com/orders/your_order_handle?fulfillment_attempt=0&show-visits-only=true"
    }'

Set the iframe's src to the returned secure_embed_url without modifying its query parameters. The response also includes access_token, token_type, expires_in, and the original embed_url. The generated token restricts access to the endpoints needed for this order view. See Facility Manager View for visit-only visibility.

Restrict access token scope

For the OAuth token flow, read-only embed scopes include:

• read.embed.orders for order views
• read.embed.devices for device views (not read.embed.drivers)
• read.embed.orders.96f7ec96-402c-47a7-b0a1-eb6b91640a58 for the specified order identifier

Scopes can be space-delimited. A scope does not lock a view's URL parameters; use the secure order URL flow above when sharing a visit-only view.

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}` />