Features Pricing Build Docs Demos About Sign in Get early access
Embed

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

Which parameter, service or p?

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.

It is not hidden

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 seeCause
"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.