Docs / Widget

Widget

Drop-in widget you can mount as floating, modal, or inline. Token is never placed in the URL.

Replace placeholders: YOUR_MICROAPP_HOST, YOUR_SLUG, and mtok_....

1) Install the SDK

Add the SDK script once. This file is hosted by microapp.services.

<!-- 1) Include the SDK (no token in URL) -->
<script src="https://YOUR_MICROAPP_HOST/microapp-widget.js"></script>

2) Mount (floating)

Floating mode places a launcher on the page and opens a panel. The token is provided as mtok.

<!-- 2) Mount -->
<script>
(function () {
  function boot() {
    if (!window.MicroappWidget) return setTimeout(boot, 50);

    window.MicroappWidget.mount({
      baseUrl: "https://YOUR_MICROAPP_HOST",
      toolSlug: "YOUR_SLUG",
      mtok: "mtok_...",

      // UI
      mode: "floating",
      anchor: "bottom-right",
      offsetX: 16,
      offsetY: 16,

      // optional
      autoOpen: true,
      debug: false
    });
  }
  boot();
})();
</script>

Mount (inline)

Inline mode renders the widget inside your layout. Provide target.

<!-- Inline mount (requires a target element) -->
<div id="microapp-inline"></div>

<script>
(function () {
  function boot() {
    if (!window.MicroappWidget) return setTimeout(boot, 50);

    window.MicroappWidget.mount({
      baseUrl: "https://YOUR_MICROAPP_HOST",
      toolSlug: "YOUR_SLUG",
      mtok: "mtok_...",
      mode: "inline",
      target: "#microapp-inline"
    });
  }
  boot();
})();
</script>

Events

Use callbacks to observe readiness, auth, and run results.

window.MicroappWidget.mount({
  baseUrl: "https://YOUR_MICROAPP_HOST",
  toolSlug: "YOUR_SLUG",
  mtok: "mtok_...",
  mode: "floating",

  onReady()      { console.log("READY"); },
  onAuthOk()     { console.log("AUTH_OK"); },
  onAuthErr(e)   { console.log("AUTH_ERR", e); },
  onRunStart(e)  { console.log("RUN_START", e); },
  onRunSuccess(e){ console.log("RUN_OK", e); },
  onRunError(e)  { console.log("RUN_ERR", e); }
});

Security rules

✅ Token is NEVER in the URL
✅ Embed API calls use header: x-microapp-embed-token: mtok_...

❌ Do NOT do this:
Do not pass tokens in the URL query string. Query-string tokens are not accepted.
Want the full security rationale? See Docs · Security.