Configuration

The second argument to init is a NapsterCompanionApiConfig object. Every field is optional — the SDK applies sensible defaults. This page is the full reference, grouped by concern.

All options

Every top-level field on NapsterCompanionApiConfig. All are optional; jump to a section for the details.

Placement and layout

Position values

position accepts any value from the Position enum:

• "bottom-right" (default)
• "bottom-center"
• "bottom-left"
• "top-right"
• "top-center"
• "top-left"
• "center"

await NapsterCompanionApiSdk.init(token, {
  mountContainer: "#my-container",
  position: "bottom-right",
});

Inline layout

By default the avatar is a floating corner widget (layout: "fixed"). Set layout: "inline" to render the avatar inside your own container and fill it — you control placement, size, and shape by styling that container. position is ignored in inline mode.

// <div id="avatar-box" style="width: 320px; height: 480px"></div>
await NapsterCompanionApiSdk.init(token, {
  mountContainer: "#avatar-box",
  layout: "inline",
  avatarStyle: { view: "rectangle" },
});

Sizing rules in inline mode:

• The avatar fills your container's width and height.
• If your container has no explicit height, an internal 4:5 ratio is used (matching the floating widget's proportions) so the avatar is never invisible.
• view: "round" always renders a circle that fits the smaller side and centers, regardless of the container's aspect ratio.
• Video is cropped to cover — never stretched or distorted.

Appearance

avatarStyle

Custom position with styles

You can override placement with style and className on the root container:

await NapsterCompanionApiSdk.init(token, {
  mountContainer: "#my-container",
  position: "bottom-right",
  style: {
    top: "20px",
    left: "20px",
    zIndex: "1000",
  },
  className: "my-custom-class",
});

Features

The features object toggles built-in behaviors. Each feature is a small object with its own enabled flag plus optional tuning values.

Callbacks

All callbacks are optional. They are covered in full on the Events page.

Persistence

The persistence object keeps one session alive across page navigation on a multi-page site:

NapsterCompanionApiSdk.init(token, {
  persistence: { enabled: true },
});

It has its own page — the behavior (iframe wrap, break-out rules, deferred wrap, programmatic navigation) and the full option table are covered in Persistence.

Debug

Next steps