Embed a dashboard

Any share link without a password can sit on another page, such as a public stats page or a client portal. The board inside shows what the link shows, without the header, and anyone who opens the page can read it without an account.

Get the code

In Highseat, open Site settings › Sharing, pick a link and click its Embed code button. Choose the theme and the background, copy the code, and paste it into your page’s HTML where the board should appear. It looks like this:

<iframe src="https://app.highseat.com/share/YOUR_SHARE_TOKEN?embed=1" title="Analytics" loading="lazy" style="width:100%;height:1600px;border:0"></iframe>
<script src="https://app.highseat.com/embed.js" async></script>
<p style="margin:8px 0 0;font-size:12px"><a href="https://highseat.com/?ref=embed">Analytics by Highseat</a></p>

The snippet has three parts:

The frame loads the board. Its height starts at 1600px.
The script from embed.js sets the frame’s height to the board’s, so the page shows no second scrollbar and no empty space. It follows the board as it changes: when a reader switches a card’s tab, when data loads, and when the window narrows. Without the script, the frame stays at 1600px and scrolls inside.
The link under the frame credits Highseat. You may restyle it or remove it.

One script serves every embed on a page, so a page with two boards needs the script tag once.

Widgets

A widget shows one part of the dashboard in a small card: a single figure, or the main chart for one metric. To make one, open the site’s dashboard, set the filters you want, and click Embed… in the toolbar. Choose Chart or Figure, pick the metric and the period, and click Create embed. The code looks like this:

<iframe src="https://app.highseat.com/share/YOUR_SHARE_TOKEN?embed=1" title="Analytics" loading="lazy" style="width:100%;height:360px;border:0;color-scheme:light dark"></iframe>
<script src="https://app.highseat.com/embed.js" async></script>
<p style="margin:8px 0 0;font-size:12px"><a href="https://highseat.com/?ref=embed">Analytics by Highseat</a></p>

Widget	Shows
Chart	The main chart for visitors, views or revenue, with its total above it
Figure	Visitors, views or revenue over the period, or who is online now

An embed has its own link, and it reads nothing else. The address in the frame’s src is public, so anyone can open it. It shows only this widget, for its own metric, period and filters. A reader can’t reach the rest of the dashboard through it, which a share link’s board would allow. The period moves with the calendar: it is worked out on every load in the site’s timezone, so Last 30 days always means the last 30 days and the figure matches the dashboard for that period. Figures can be up to a minute old, and the online count up to ten seconds. The filters you set on the dashboard become part of the embed, and a segment has no online count. Revenue shows only in a widget you made for revenue. A widget’s frame starts at the card’s usual height, and embed.js fits it to the card the same way it fits a board. The card sits on your page’s background whatever you choose, and a transparent background drops the card’s own surface too. In a frame narrower than 320px, the chart drops its value labels to give the line the room. The Highseat name on the card links to highseat.com in a new tab. Your embeds are listed under Site settings › Sharing, where you can copy the code again or delete one. Deleting an embed removes it from every page that shows it.

Theme and background

The Theme choice sets the board’s colours. System follows the reader’s own light or dark setting, while Light and Dark fix one. The choice is the theme parameter on the frame’s URL (theme=light or theme=dark, left out for system). Transparent background drops the board’s own page colour, so the cards sit on your page’s background. It adds background=transparent to the URL, and a color-scheme to the frame’s style that matches the theme. A browser paints an opaque backdrop behind a frame whose colour scheme differs from its page’s, so keep that style when you edit the snippet.

What the link controls

The embed shows the board of the share link it was made from, and the link’s settings apply to it:

Password. A link with a password cannot be embedded: the frame would ask every reader of your page for it. The Embed code button explains this instead of giving code, and a protected link opened in a frame shows a notice. Use a link without a password and guard the page that holds it instead.
Segment. A link limited to a segment shows only the traffic its filters match. Readers can add filters of their own to narrow it further, never to widen it.
Revenue and chart notes appear only when the link allows them.
Expiry and deletion. When the link expires or is deleted, the frame shows that the dashboard is not available. Edit the link and the embed follows at once, with no new code.
Hide our branding removes the credit line on the board’s own page. The embed drops that line either way.

Size the frame yourself

A page that cannot load scripts from another origin, or that sizes the frame itself, can listen for the board’s message instead of loading embed.js. Whenever the board’s height changes, it posts this message to the page that frames it:

{ "type": "highseat:embed-resize", "height": 1342 }

The height is in CSS pixels. The message carries nothing else from the board. embed.js may run after the board has settled, so when it starts it asks each frame for its current height with a highseat:embed-request message. Your own listener needs no such request when it is in place before the frame loads, since it hears every message from the start. Give the frame an id, and check that a message comes from the app origin and from your frame before you use it:

const frame = document.querySelector("#analytics")

window.addEventListener("message", event => {
  if (event.origin !== "https://app.highseat.com" || event.source !== frame.contentWindow) return
  if (event.data?.type !== "highseat:embed-resize") return
  frame.style.height = `${event.data.height}px`
})

Get started

Install

First-party proxy

Tracking

Revenue

Sharing

Embed a dashboard

Get the code

Widgets

Theme and background

What the link controls

Size the frame yourself

​Get the code

​Widgets

​Theme and background

​What the link controls

​Size the frame yourself

Get the code

Widgets

Theme and background

What the link controls

Size the frame yourself