Embed the operator console

The console is a single JavaScript file. It mounts into an element you choose and renders inside its own shadow root, so it cannot inherit or leak styles from the host application.

<div id="support-console" style="height: 100%"></div>

<script src="https://hepo.ai/console.js"></script>
<script>
  UooConsole.mount('#support-console', {
    token: 'YOUR_SESSION_TOKEN'
  })
</script>

Why do this

Support that lives in a second product gets checked when someone remembers. Support that lives on a tab of the tool your staff already have open all day gets checked continuously.

It also means one login. Your existing authentication issues the session token; nobody signs into a second system.

Getting a session token

Exchange your own authenticated user for a console session on the server. Never put your API key in the browser.

POST https://hepo.ai/api/v1/console/session
Authorization: Bearer YOUR_API_KEY

{ "user_email": "ana@yourcompany.com", "site": "nordvik" }

The response carries a short-lived token scoped to that operator’s role. Refresh it the same way when it expires.

Sizing and layout

The console fills its container. Give the mount element a real height, whether that is a flex child, a grid row, or an explicit value. A container with automatic height collapses to nothing, which looks like a mounting failure and is not one.

Namespacing

Everything the console sites is prefixed vsh:, and its custom events are prefixed the same way. Embedding it in an application that also sites a userInfo key is safe.

Version negotiation

The shell and its sub-applications are updated independently. On connect they exchange a protocol version, and an incompatible pair forces a reload rather than degrading quietly. If you pin the console script to a specific version, pin the server too.