ProjectMate

What it is

Visitors click a floating launcher on your page. A fullscreen overlay opens and loads a separate app in an iframe — isolated from your CSS and JS. Configuration (copy, links, feature flags, theme) is passed over postMessage.

You keep your site static or minimal; you do not add routes or a backend just to ship “help / feedback / what’s new”.

Where’s the demo?

Open demo.html after running pnpm build and pnpm demo (served over HTTP, not file://). You’ll see a sample host page and the floating widget.

On Netlify, the same demo is published at /demo.html next to this page once the site build finishes.

Basic use

Host your built embed.js, host the overlay app, then:

<script src="https://projectmate.uft1.com/embed.js"></script>
<script>
  ProjectMate.init({
    projectId: "my-tool",
    appUrl: "https://projectmate.uft1.com/overlay/",
    about: { title: "My tool", description: "…" },
    features: { chat: false, feedback: true, updates: true, issues: false, about: true },
  });
</script>

Open from a link (optional): set autoOpen so a hash, query string, or path opens the overlay without clicking the launcher. Each rule is optional; if more than one is set, any match (OR) will open.

autoOpen: {
  hash: "help",              // matches #help
  query: { name: "pm", value: "1" },  // matches ?pm=1
  path: "/support",          // pathname (default: prefix match, e.g. /support and /support/…)
  pathMatch: "prefix",       // or "exact"
}

Hide the floating button and open the overlay from your own UI (a regular link, a button, or programmatically):

ProjectMate.init({
  projectId: "my-tool",
  appUrl: "https://projectmate.uft1.com/overlay/",
  launcher: { hidden: true },
  autoOpen: { hash: "help" },     // optional
});

// Anywhere on your page
<a href="#help">Open help</a>
<button onclick="ProjectMate.open()">Open help</button>

Full options (changelog, links, accent, web3forms, feedbackEndpoint, …) are in the repo README and packages/shared-types.