@streamoji/avatar-widget

Plug-and-play React avatar widget package for websites.

Install

npm install @streamoji/avatar-widget

Usage

import { AvatarWidget } from "@streamoji/avatar-widget";
import "@streamoji/avatar-widget/styles.css";

export default function App() {
  return <AvatarWidget token="YOUR_ENCRYPTED_AGENT_TOKEN" />;
}

Props

• token?: string - encrypted agent token used for chat/STT requests.
• onNavigationRequested?: (url: string) => void - intercept navigation instructions from the agent.

Plain HTML (no build)

Add the widget to any HTML page without React or a build step. Paste the snippet before </body>, replace YOUR_TOKEN_HERE with your encrypted agent token, and the widget appears fixed at the bottom-right of the page.

<link rel="stylesheet" href="https://unpkg.com/@streamoji/[email protected]/dist/avatar-widget.umd.css">
<script>window.process = { env: { NODE_ENV: "production" } };</script>
<script src="https://unpkg.com/@streamoji/[email protected]/dist/avatar-widget.umd.js"></script>
<script>
  StreamojiLeadsAvatarWidget.init({ token: "YOUR_TOKEN_HERE" });
</script>

Publish Checklist

1. Set a final package name/version in package.json.
2. Build artifacts: npm run build from packages/avatar-widget.
3. Validate tarball contents: npm pack --dry-run.
4. Authenticate npm: npm login.
5. Publish: npm publish --access public.

@streamoji/avatar-widget

Plug-and-play React avatar widget for Streamoji Leads. Add the widget to any website with a single component and an optional agent token.

Installation

npm install @streamoji/avatar-widget

Peer dependencies (install if not already present):

npm install react react-dom three @react-three/fiber @react-three/drei

Usage

import { AvatarWidget } from '@streamoji/avatar-widget';

function App() {
  const agentToken = 'YOUR_AGENT_TOKEN'; // e.g. from URL, auth, or config

  return (
    <AvatarWidget
      agentToken={agentToken}
      onNavigationRequested={(url) => window.open(url, '_blank')}
    />
  );
}

Styles are included when you import the component. If your bundler does not include the package CSS, import it explicitly:

import { AvatarWidget } from '@streamoji/avatar-widget';
import '@streamoji/avatar-widget/styles.css';

Props

| Prop | Type | Description | |------|------|-------------| | agentToken | string \| undefined | Encrypted agent token for chat/STT API and for resolving the avatar GLB from R2. Omit for default avatar only. | | onNavigationRequested | (url: string) => void | Called when the agent requests a link; if not provided, links open in a new tab via window.open. | | apiBase | string | API base URL for chat and STT (default: https://ai.streamoji.com). | | defaultAvatarUrl | string | Fallback avatar GLB URL when no token or R2 lookup fails (default: /test2.glb). | | avatarBase | string | R2 base URL for avatar GLB lookup by token hash. | | debug | boolean | Enable debug logging to console (default: false). |

Publishing

This package is published to npm. To publish a new version from the repo:

cd packages/avatar-widget
npm run build
npm version patch  # or minor/major
npm publish

Scoped packages require --access public for the first publish if the scope is not yet associated with a paid plan.