Web widget

Script tag

Load embed.js from your tenant origin (the same host as the help center). The loader derives its origin from the script URL and injects a launcher plus an iframe pointed at /widget.

<script src="https://support.clientname.app/embed.js" async></script>
<script>
  Supportal.init({
    identityToken: () => fetch("/api/supportal-token").then((r) => r.text()),
    position: "right",
    launcher: true,
  });
</script>

JavaScript API

• Supportal.open() / Supportal.close() — control the panel.
• Supportal.identify(tokenOrFn) — swap identity and refresh the session.
• Supportal.logout() — drop session and return to anonymous.
• Supportal.on("unread", cb) — unread message counts.

npm package

Install @supportal/widget for bundlers. Pass an explicit host instead of relying on the script src.

pnpm add @supportal/widget

import { Supportal } from "@supportal/widget";

Supportal.init({
  host: "https://support.clientname.app",
  identityToken: async () => myBackend.issueIdentityJwt(),
  position: "left",
});

postMessage bridge

The parent page and iframe communicate with namespaced messages { source: "supportal", type, payload }. The iframe validates parent.origin against widget.allowedOrigins.