Embed Grafana Dashboards in Portals

You can embed Grafana dashboards into both BioT portals (Organization or Manufacturer) and external portals. This guide walks through the required steps to embed a full Grafana dashboard and securely display user-specific data.

Step 1: Get the Grafana Dashboard Link

To embed a Grafana dashboard:

1. Open the dashboard in Grafana.
2. Copy the dashboard URL from the browser address bar.

Step 2: Embed in BioT Portals

To embed a Grafana dashboard in the Organization Portal or Manufacturer Portal, follow these steps:

2.1 Add a Tab Using Portal Builder

1. Log in to your Console Portal.
2. Navigate to Portal Builder.
3. From the list of pages, select the relevant page where you want to add the new tab.
4. In the Tabs Section, click on "Add Tab".
5. Select "External Page" as the tab type.
6. Name the tab and paste the Grafana link from Step 1.

2.2 Add a Cookie to Link the User Token

After adding the tab, click the pencil icon (Advanced Edit) next to the URL field. Add the following cookie:

• Name: biotUser-refreshToken
• Value: {{user._refreshToken}}

Step 3: Embed in External Portals

For third-party portals, custom web apps, or mobile applications, follow these steps:

3.1 Set the User Token via Cookie

You must programmatically set the refresh token as a cookie before displaying the Grafana iframe.

document.cookie = `biotUser-refreshToken=${'${userRefreshToken}'}; path=/; domain=bi.app.${'${your-biot-domain.com}'}; secure`;

• Replace userRefreshToken with the actual token value.
• Replace the value of the domain with your BioT deployment domain

3.2 Embed the Grafana Content

Use an <iframe> in your external site:

<iframe src="https://bi.app.${'${your-biot-domain.com}'}/d/bdv75g6oz8etcf/my-dashboard?orgId=1"
  width="100%"
  height="800"
  frameborder="0">
</iframe>

🚧

Make sure your portal domain matches your BioT deployment domain

Kiosk Mode: Recommended for Clean Embeds

To prevent unwanted UI elements from appearing (such as Grafana menus, headers, or sidebars), you can use kiosk mode by adding &kiosk to the end of the Grafana URL.

https://bi.app.${'${your-biot-domain.com}'}/d/bdv75g6oz8etcf/my-dashboard?orgId=1&kiosk

📘

Use Kiosk Mode for Cleaner Embeds

While kiosk mode cannot be enforced by us, you should configure the Grafana URL with &kiosk to ensure a clean, embedded view and avoid unexpected UI elements in both portal and mobile views.

Step 4: Verify the Embedded Content

After embedding:

1. Log in to the BioT or external portal.
2. Open the embedded Grafana tab or iframe.
3. Confirm that:
   • The dashboard loads successfully.
   • Data is filtered per the logged-in user.
   • PHI is only visible to users with appropriate permissions.

Access Control Notes:

• Users without PHI access (e.g., Manufacturer Admins) will not see sensitive data, even if it exists in the dashboard.
• Patient users do not have permission to view analytics data