Plumeo — Embed demo

Four ways to drop Plumeo views into a host app: plain URL iframes (zero deps), JS SDK (mount() + live control), Web Components (<Plumeo-asset-detail>), and React wrapper (<PlumeoWidget>). All built on the same URL-driven iframe bridge.

Host origin: —

Host controls postMessage host → iframe

Every widget on this page listens for plumeo:set-tenant, plumeo:navigate, and plumeo:set-theme messages. Click to broadcast to every embedded widget at once.
Tenant Theme Navigate

Plain URL iframe ?page=dashboard url

Host adds <iframe src="/embed?page=…">. No SDK, no build step. Filters + tenant + theme are query params.
Northvale USD dashboard ?page=dashboard&tenant=t-edu

Filtered list widgets &category=hvac,boiler url

HVAC + boiler assets (Northvale) ?page=assets&category=hvac,boiler
Urgent + emergency work orders ?page=work-orders&priority=urgent,emergency

JS SDK import { mount } from "/sdk/embed.js" sdk

Drop-in ES module. Returns a handle with setTenant(), navigate(), setTheme(), and on("ready"|"resize"|"navigate"). Call destroy() when done. 
import { mount } from "https://your-host.example.com/sdk/embed.js";

const handle = mount(document.getElementById("dash"), {
  baseUrl: "https://your-host.example.com",
  page: "dashboard",
  tenantId: "t-corp",
});
handle.on("navigate", (path) => console.log("→", path));
handle.setTenant("t-muni");                       // live, no reload
handle.navigate("asset-detail", { id: "t-edu-a-1" });
handle.setTheme("dark");
handle.destroy();
Mounted via SDK — Atlas Holdings tenant=t-corp · page=dashboard
Mounted via SDK — controlled tenant=t-muni · page=requests
SDK #B

Web Components <Plumeo-asset-detail> web-components

defineWebComponents() registers 17 custom elements (Plumeo-widget + one per view). Attribute changes are reactive — no re-render, the iframe updates via postMessage. 
<script type="module">
  import { defineWebComponents } from "/sdk/web-components.js";
  defineWebComponents();
</script>

<Plumeo-asset-detail
  base-url="https://your-host.example.com"
  tenant-id="t-edu"
  entity-id="t-edu-a-1"
  theme="dark">
</Plumeo-asset-detail>
<Plumeo-building-detail> entity-id="t-edu-bldg-nhs"
<Plumeo-documents> tenant-id="t-muni"

React wrapper @plumeo/embed/react react

Tiny wrapper component — prop changes propagate to the iframe live via the same postMessage bridge. Use this from any React host app. 
import { PlumeoWidget } from "@plumeo/embed/react";

function HostApp() {
  const [tenant, setTenant] = useState("t-edu");
  return (
    <PlumeoWidget
      baseUrl="https://your-host.example.com"
      page="asset-detail"
      tenantId={tenant}
      id="t-edu-a-1"
      theme="light"
      onNavigate={(path) => console.log(path)}
      onResize={(h) => console.log("height", h)}
    />
  );
}

Full-app iframe /?tenant=… url

For a "frame the whole product" use case — single iframe pointed at the root SPA. Handy for CRM/ERP "app tab" integrations.
Whole SPA embedded — with sidebar & topbar /?tenant=t-muni

URL builder try it yourself

/embed?page=dashboard&tenant=t-edu
Live preview —

All page values

page=RendersExtra params
dashboardPortfolio overview—
assetsAssets liststatus, condition, category, q
asset-detailSingle assetid
buildingsBuildings liststatus, q
building-detailSingle buildingid
spacesSpaces listcategory, status, q
space-detailSingle spaceid
locationsLocations list—
peoplePeople listrole, q
person-detailSingle personid
work-ordersWork-order queuestatus, priority, type, q
work-order-detailSingle work orderid
requestsRequests queuestatus, category, priority, q
request-detailSingle requestid
projectsProjects liststatus, type, q
project-detailSingle projectid
documentsDocuments listkind, q