SDK reference

The portal SDK is a small, dependency-free script you load from https://userhero.co/portal.js. After it loads it exposes window.UserHero.

Loading the script

Use the queue pattern so you can call methods before the script finishes loading:

<script>
    (function () {
        window.UserHeroQueue = window.UserHeroQueue || [];
        window.UserHeroQueue.push(['init', { /* options */ }]);
    })();
</script>
<script src="https://userhero.co/portal.js" async></script>

Anything you push onto UserHeroQueue before the script loads runs as soon as it is ready, in order.

init(options)

Initialize the portal. Call once per page load.

UserHero.init({
    publicKey: 'YOUR_PUBLIC_KEY',
    user: userPayload,
    userHmac: serverGeneratedHmac,
    locale: 'en',
    theme: 'auto',
    cssVars: { primary: '#5b6cff' },
    showMetricCards: true,
    launcher: 'button',
    zIndex: 2147483000,
});

Launcher modes

• button — UserHero renders a floating support button in the bottom-right.
• custom — no built-in launcher; call UserHero.open() from your own UI (e.g. a "Help" link in your nav).
• none — the portal opens automatically as soon as init resolves. Useful for dedicated /support pages.

Methods

open() / close() / toggle()

Programmatically control the panel.

document.querySelector('.help-link').addEventListener('click', () => UserHero.open());

setUser(payload, hmac)

Update the signed-in user without a page reload (e.g. after a profile change). Pass a freshly signed payload and HMAC.

logout()

Clear the current session. The next setUser or page load will need a new HMAC.

setTheme(theme)

'light', 'dark', or 'auto'.

setLocale(locale)

'en' or 'es'.

setCssVars(vars)

Update brand colors or other variables at runtime. Same allowlist as init.

on(event, handler) / off(event, handler)

Subscribe to portal events.

UserHero.on('ticket_created', ({ ticketId }) => {
    analytics.track('Support ticket created', { ticketId });
});

Events