Embed Grafana Dashboards in Portals

You can embed Grafana dashboards or individual panels into both BioT portals (Organization or Manufacturer) and external portals. This guide walks you through the shared and platform-specific steps needed to successfully embed and personalize the content.

Step 1: Get the Grafana Link

You can embed either:

• An entire dashboard, or
• A single panel from a dashboard.

To embed a dashboard:

1. Open the dashboard in Grafana.
2. Click the “Share” icon at the top.
3. Copy the URL.

To embed a panel:

1. Click the three dots on the top-right corner of the panel, then click the “Share” icon.
2. Choose the “Embed” tab and copy the URL.
   • The link will include a _panelId _and other dashboard context.

Step 2: Embed in BioT Portals

To embed Grafana into the Organization Portal or Manufacturer Portal, follow these steps:

2.1 Add a Tab Using Portal Builder

1. Log into 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}}

❗️

Note on Compatibility

Starting from BioT version 2.3.28, use biotUser-refreshToken.
For older versions, continue using biotUser-token.

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

You can use either a full dashboard link or a panel-specific link.

🚧

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 or panel 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