@obsrviq/widgets

Embeddable, white-label React components. Drop them into your product; they inherit your theme via CSS variables and show no Obsrviq branding.

npm install @obsrviq/widgets

import {
  ObsrviqReplay, ObsrviqInsights, ObsrviqRecommendations, ObsrviqScore, ObsrviqCopilot,
} from '@obsrviq/widgets';
import '@obsrviq/widgets/styles.css'; // one import pulls in all tokens + styles

const api = { apiBaseUrl: 'https://api.yourapp.com', apiKey: 'sk_live_…' };

| Component | Props (beyond api + theme) | |---|---| | <ObsrviqReplay/> | sessionId, startAtMs?, height?, onEnded? | | <ObsrviqInsights/> | siteId, max?, onApply?, onDismiss? | | <ObsrviqRecommendations/> | siteId, onAction? | | <ObsrviqScore/> | siteId, type (performance/accessibility/ai-visibility), size? | | <ObsrviqCopilot/> | siteId, placeholder? |

Each renders a skeleton within ~1s, is keyboard- and screen-reader-accessible, inherits the host theme, and degrades to a friendly empty state with no data.

Theming

Override any --lum-* token globally, or per-widget via the theme prop:

<ObsrviqInsights siteId="…" {...api} theme={{ '--lum-accent': '#e11d48', '--lum-radius': '14px' }} />

Browser key exposure: widgets given a raw sk_ key expose it client-side. For customer-facing embeds, proxy through your backend or use a short-lived JWT.

Full guide: docs/EMBEDDING.md.