Embedding in other tools
Most tools people write in will not run a script tag, but almost all of them will show a URL. A pane can be addressed as a single URL and shown as an embedded frame, with no change to the host page and nothing to install.
When to use this
Use the script embed wherever you control the page — it reflows with your layout, costs one request, and many panes share one loader.
Use an embedded URL when you do not:
- A tool that strips scripts. Confluence, Notion, SharePoint, Jira, most wikis, most CMSs, most ticket systems.
- A page you cannot edit the source of, but can paste a link into.
- One pane, in prose. A single live view inside a runbook or a design document, where the point is the paragraph it sits next to.
The embed URL
One pane per URL. Everything the pane needs is in the address.
https://lightpane.io/embed/v1/?service=ec2&provider=aws&account=YOUR_ACCOUNT_HANDLE#k=lp_ak_YOUR_ACCESS_KEY
| Parameter | Value | Notes |
|---|---|---|
| service | ec2 |
A service inventory pane. One of service or p is required |
| p | cost-summary |
A compound pane, instead of service |
| provider | aws · gcp · azure |
Defaults to aws |
| account | zesty-ridge |
The account handle. Omit and the key's default is used |
| region | eu-west-1 |
Defaults to eu-west-2 |
| #k | lp_ak_… |
The access key. After the #, not the ? — see below |
Every pane's page in the catalog gives you this
URL already filled in for that pane, under Embedding in an iframe.
Copy it from there rather than assembling one by hand — the
service and p values are exact identifiers, and
a near miss renders nothing.
It follows the pane kind, the same split as the script embed: a service
inventory pane uses service=, a compound pane uses
p=. If you have the catalog page open, the right one is
already in the URL it shows you.
Where the key goes, and why
The access key goes after the #, not after the
?. It is worth being precise about what that does, because
it is easy to overstate.
The key is sent to a server. It has to be — it is the
credential the API checks. The frame's own JavaScript reads it out of the
fragment and sends it to api.lightpane.io in the body of a
POST, and that is how the pane gets any data at all.
What the # changes is which requests carry it, and
therefore where it can be written down:
-
Browsers never transmit the fragment. When the frame
itself is fetched, everything after the
#stays in the browser. A web server, proxy or CDN access log records the method, the path and the query string — so a key after?would be written to that log line on every single load. After#it cannot be, because it was never sent. -
It is not sent as a
Referer. Fragments are stripped from referrer headers; query strings are not. - The POST body is a different matter from a URL. Request bodies are not recorded by ordinary access logging the way URLs are, and LightPane's discovery function does not log the key.
So the rule is narrow and real: putting a credential in a URL path or query string gets it copied into log files; putting it in the fragment does not. That is the whole of the benefit.
The fragment is not a secrecy mechanism. Anyone who can see the page can read the URL — from the embed block's properties, the page source, or their own browser history, which stores the fragment. Treat an embed URL as readable by everyone who can open the page it sits on, and as something they can copy and use elsewhere.
Which means the key matters more than its placement. An access key used for embedding should be scoped to the accounts that page's readers are allowed to see and nothing more. Issue a separate key per audience rather than reusing one broad key, and if the audience changes, rotate the key rather than editing the page.
Sizing the frame
This is where embedded panes differ most from in-page ones. A pane in your own page is as tall as its content; an iframe is as tall as you say it is, and the pane inside cannot push it taller.
<iframe src="https://lightpane.io/embed/v1/?service=ec2&provider=aws&account=YOUR_ACCOUNT_HANDLE#k=lp_ak_YOUR_ACCESS_KEY"
title="EC2 instances"
style="width:100%;height:460px;border:0"
loading="lazy"></iframe>
Picking a height:
- Start at 460 px. Comfortable for an inventory pane of a dozen rows.
- Compound panes need more — 600 px upward. A posture or cost board composes several sections.
- Too short is better than too tall. A pane given less height than its content scrolls inside the frame, which readers understand. A frame much taller than its pane leaves a slab of empty space in the middle of the document, which looks broken.
Width is easier: 100% and let the host decide. The pane
adapts — but hold it above the
280 px floor. Many wikis put
embeds in a narrow content column, and a two-column page layout can leave
less room than the viewport suggests.
Tool-by-tool
Most tools need nothing beyond pasting the URL. These are the ones people ask about; we will add a page per tool as each is worked through properly.
Confluence
Use the Iframe macro (Cloud) or HTML macro (Data Center), paste the URL, and set a fixed height. Confluence will not run a script macro on most configurations, so the URL embed is the route.
If the macro is not in the list, an administrator has restricted it — that is a space or instance setting, not something the URL can work around.
Notion
Paste the URL into a page and choose Embed when Notion offers "Dismiss / Bookmark / Embed". Drag the bottom edge to set the height; Notion remembers it per block.
Notion keeps the full URL, key included, in the page content — so the sharing scope of the page is the sharing scope of the key. Notion pages are easy to share publicly by accident, which makes a narrowly scoped key worth more here than almost anywhere else.
SharePoint
The Embed web part. SharePoint enforces an allow-list of
embeddable domains, so an administrator may need to add
lightpane.io before anything renders.
Anything else
If a tool has an "embed", "iframe" or "HTML" block, the URL works in it. If it only offers a link, it will not — a pane needs to be rendered, not linked.
What you give up
An embedded URL is the right tool in the right place, and it is not as good as a pane in your own page. Specifically:
- One pane per frame. Six panes means six frames and six loads of the runtime. A page of your own shares one loader across all of them.
- Fixed height. The frame cannot grow with its content.
- No layout. The grid and comparison patterns need CSS on the host page, which is exactly what these tools do not give you.
- The key is in the URL, and so in the document.
A reasonable rule: embed URLs for one or two panes inside prose. Past that, build a page and link to it.
If nothing appears
| What you see | Cause |
|---|---|
| "Missing pane" |
No service= or p= in the URL, or a
typo in the name. Copy the URL from the pane's catalog page.
|
| "Missing embed key" |
No #k=. Check the tool has not stripped everything
after the # — some link fields do.
|
| A blank or refused frame | The tool is blocking the embed, not rendering it empty. Look for an allow-list of permitted domains in its admin settings. |
| A pane marked MOCK DATA | It is rendering correctly but has no valid key — the key is missing, mistyped, or not scoped to that account. |
| An empty pane, no error |
The pane worked and found nothing. Check the region: it defaults
to eu-west-2, which may not be where your resources
are.
|