Initialization

Start the SDK with init — it connects immediately and mounts the widget. Its config is a NapsterCompanionApiConfig.

Connect

init starts a session the moment you call it — it mounts the avatar and begins connecting right away. Pass the token from the connection response and a container element to mount into.

import { NapsterCompanionApiSdk } from "@touchcastllc/napster-companion-api";
import "@touchcastllc/napster-companion-api/styles";

const instance = await NapsterCompanionApiSdk.init(token, {
  mountContainer: "#avatar-container",
});

<div id="avatar-container"></div>

<script>
  window.napsterCompanionApiSDK.init(token, {
    mountContainer: "#avatar-container",
  });
</script>

init(token, config?) takes two arguments:

mountContainer accepts a CSS selector string or an HTMLElement. If you omit it, the widget mounts on document.body. If a selector matches no element, the SDK warns and falls back to document.body.

What you get back

init returns a Promise<NapsterCompanionApiInstance> — the object you use to drive the session. It resolves to the live instance once the SDK has mounted and started connecting.

import type { NapsterCompanionApiInstance } from "@touchcastllc/napster-companion-api";

const instance: NapsterCompanionApiInstance = await NapsterCompanionApiSdk.init(token, {
  mountContainer: "#avatar-container",
});

The avatar video comes up shortly after connecting — use the onAvatarReady callback to know when it's actually rendering, and read the sessionId getter for the live session identifier. See Methods for everything the instance exposes.

Tear down

Call destroy() when the widget leaves the page. It closes the WebRTC connection, removes the DOM nodes, and releases the microphone — plus any screen-share or face-tracking camera capture, if you were using those.

instance.destroy();

In component frameworks, call it from your unmount hook — see the framework examples. Failing to call destroy() leaves the connection and media tracks open.

Next steps