@userz-ai/browser

pnpm add @userz-ai/browser

import { createUserz } from '@userz-ai/browser';

const userz = createUserz({
  publicKey: 'pub_GLLHdYCLb2A2d9ieY2LmmwRJ',
});

// Optional: tag every submission with route + build info.
userz.setMetadata({
  route: window.location.pathname,
  build: import.meta.env.VITE_BUILD_SHA,
});

// Optional: identify the current end-user (public mode).
userz.setUser({ email: '[email protected]', name: 'Jane Doe' });

type Severity = 'low' | 'medium' | 'high';

interface UserIdentity {
  externalUserId?: string;
  email?: string;
  name?: string;
}

interface AttachmentRef {
  key: string;                                      // upload key from the upload-url endpoint
  kind: 'screenshot' | 'annotated' | 'attachment';
  contentType: string;
  byteSize: number;
  width?: number;
  height?: number;
}

interface ComponentTargetData {
  name: string;
  meta?: Record<string, unknown>;
  bbox?: { x: number; y: number; w: number; h: number };
  screenshotKey?: string;                           // upload key of cropped screenshot
}

interface ConsoleLogEntry {
  level: 'log' | 'info' | 'warn' | 'error' | 'debug';
  message: string;
  ts: number;                                       // epoch ms
}

interface SubmitInput {
  text: string;                                     // 1–8192 chars
  severity?: Severity | null;
  identity?: UserIdentity;                          // public mode only
  metadata?: Record<string, unknown>;               // ≤ 4 KB JSON
  attachments?: AttachmentRef[];                    // ≤ 10
  componentTarget?: ComponentTargetData;
  withScreenshot?: boolean;                         // capture document.body before submit
}

document.querySelector('#bug-button')?.addEventListener('click', async () => {
  try {
    const { id, status } = await userz.submit({
      text: 'Cart total shows NaN after applying coupon',
      severity: 'high',
      withScreenshot: true,
      metadata: { cartId: state.cart.id, coupon: state.coupon.code },
    });
    toast.success(`Reported. Tracking id: ${id}`);
  } catch (err) {
    toast.error(err instanceof Error ? err.message : 'Could not submit feedback');
  }
});

createUserz({
  publicKey,
  brandColor:       '#ff5500',   // accent (bubble + submit button)
  brandForeground:  '#ffffff',   // text on the accent
  backgroundColor:  '#0a0a0a',   // panel surface
  textColor:        '#f5f5f5',   // panel text
});

// Capture the whole viewport
const { blob, width, height } = await userz.captureScreenshot();

// Capture a specific element
const { blob } = await userz.captureScreenshot(document.querySelector('#cart')!);

// Hand it to submit() yourself if you want to render a preview first.
// (Otherwise pass withScreenshot: true and the widget handles the upload.)

const unregister = userz.registerTarget({
  el: document.querySelector('#checkout-button')!,
  name: 'CheckoutButton',
  meta: { variant: 'A', plan: 'pro' },
});

// Later, when the element unmounts:
unregister();

// Common pattern: refresh on every submit so token rotation just works.
const userz = createUserz({
  publicKey: 'pub_...',
  getUserToken: async () => {
    if (!authStore.userzToken || authStore.userzExpiresAt < Date.now() + 60_000) {
      await authStore.refreshUserzToken(); // calls your /me endpoint
    }
    return authStore.userzToken;
  },
});

// composables/useUserz.ts
import { createUserz, type Userz } from '@userz-ai/browser';
import { onBeforeUnmount, onMounted, ref } from 'vue';

export function useUserz() {
  const instance = ref<Userz | null>(null);
  onMounted(() => {
    instance.value = createUserz({
      publicKey: import.meta.env.VITE_USERZ_PUB!,
    });
  });
  onBeforeUnmount(() => instance.value?.destroy());
  return instance;
}

// userz.svelte.ts
import { createUserz, type Userz } from '@userz-ai/browser';
import { onMount } from 'svelte';

let userz = $state<Userz | null>(null);

onMount(() => {
  userz = createUserz({
    publicKey: import.meta.env.VITE_USERZ_PUB!,
  });
  return () => userz?.destroy();
});

export function getUserz() { return userz; }

<!-- Latest 1.x, recommended for most sites -->
<script src="https://cdn.userz.ai/v1/userz.js" async></script>

<!-- Pinned + integrity-checked (recommended for production) -->
<script src="https://cdn.userz.ai/v1/userz-2aa36edc80dec4bf.js" async
        integrity="sha384-2fKvaXTEgptM4Y2/VibrgrCFAl5GJCcPYP+U0KGGbPdGkxVmL/q+P16pjThzuoyU" crossorigin="anonymous"></script>

<script>
  window.addEventListener('load', () => {
    Userz.createUserz({
      publicKey: 'pub_...',
    });
  });
</script>