Skip to content

Web Embed

Atlas supports embedding dashboards in external web pages via iframe. There is no separate dedicated route for embed; the public link route is iframe-safe and can be used directly as the iframe src.

Prerequisite

Before using embed, the following chain must be in place:

  1. An Atlas dashboard must be created.
  2. A public link must be generated for the dashboard (there is no separate dedicated route for embed).

→ Create Dashboard → Public Sharing

Step Description
1 Open the dashboard's Share dialog in the Atlas list
2 Click Generate Public Link in the right panel
3 Copy the generated link
4 Add an iframe in your target web page

2. iframe HTML Example

<iframe
  src="https://<your-domain>/atlas/public-dashboard/<public_url_token>"
  width="1200"
  height="800"
  frameborder="0"
  allowfullscreen
  style="border: none;">
</iframe>
Attribute Description
src The public link URL
width / height Embed size (can be made responsive via CSS)
frameborder="0" Removes the border for legacy browsers
allowfullscreen Allows the dashboard to go fullscreen

3. Responsive Embed

Use the aspect ratio technique to fit the embed into a container's width:

<style>
  .embed-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
  }
  .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="embed-container">
  <iframe
    src="https://<your-domain>/atlas/public-dashboard/<token>"
    allowfullscreen>
  </iframe>
</div>

Since Atlas V2 layout is already responsive, the content scales fluidly as the iframe size changes.

4. Security — CSP / X-Frame-Options

The Pirivision server should return the following headers for the public dashboard route to be iframe-displayable:

Header Expected Value
X-Frame-Options (unset) or ALLOW-FROM <domain>
Content-Security-Policy frame-ancestors 'self' <embed-domain> or *

Backend Configuration

If the iframe is opened on a domain different from the Pirivision server, frame-ancestors permissions must be defined in the server configuration. Check the APISIX gateway or reverse proxy settings.

5. Embed Behavior

Behavior
The dashboard loads in public mode (isPublicMode = true)
No login UI
No Edit Mode, Share, Delete buttons
The user can change the global filter
Refresh runs automatically
When iframe size changes, the layout scales responsively
The browser navigation top bar is not visible (inside iframe)

6. Embed Scenarios

Scenario Approach
KPI dashboard in a customer portal Public link → embed via iframe in the portal page
Conference presentation web page Embed; live data during the talk
TV wall (operations center) Fullscreen browser + public link (no iframe needed)
Wiki / Confluence page Use an embed macro or iframe widget

7. Embed Limitations

  • Since the public link appears in the iframe, whoever gets the token has access.
  • For cross-origin issues, the browser console will show errors; check the backend CSP configuration.
  • The host page's CSS/JS does not leak into the iframe; iframe provides isolation.
  • On mobile browsers iframe scroll behavior can occasionally get stuck; adding overflow: auto on the outer container may help.

8. Common Errors

Symptom Possible Cause Solution
iframe appears blank X-Frame-Options blocked it Configure backend CSP/X-Frame-Options
Console "Refused to display" error No frame-ancestors permission Update the CSP header
Embed does not fit on mobile Wrong aspect ratio Apply the CSS responsive embed technique
Login screen appears The token is not a public link, but a normal dashboard URL Use the /atlas/public-dashboard/<token> format

9. Next Step

→ Management — Move