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.