> ## Documentation Index > Fetch the complete documentation index at: https://highseat.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Embed a dashboard > Put a site's dashboard on any web page with a share link's embed code, or one figure or its main chart with a widget: the frame sizes itself to its content, and takes a theme and a transparent background. 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: ```html theme={null}

Analytics by Highseat

``` 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: ```html theme={null}

Analytics by Highseat

``` | 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: ```json theme={null} { "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: ```js theme={null} 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` }) ``` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.