Developer Onboarding

<!-- Sets workspace ID for screen recording -->
<meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />

<!-- Loads Userplane screen recording script -->
<script type="module" src="https://cdn.userplane.io/embed/script.js"></script>

import { initialize } from '@userplane/sdk';
initialize({ workspaceId: 'YOUR_WORKSPACE_ID' });

import { set } from '@userplane/sdk';

// Call after your user is authenticated
set('userId', user.id);
set('email', user.email);
set('name', user.name);
set('accountId', account.id);
set('plan', account.plan);

import { set, metadata } from '@userplane/sdk';

// Static values set once at login
set('userId', user.id);
set('email', user.email);

// Dynamic values captured fresh when the recording is submitted
metadata(() => ({
  accountId: getCurrentAccount().id,
  plan: getCurrentAccount().plan,
  page: window.location.pathname,
}));

<input type="password" data-userplane-blur />
<div class="credit-card-number" data-userplane-blur>4242 4242 4242 4242</div>

initialize({
  workspaceId: 'YOUR_WORKSPACE_ID',
  excludeCaptureEndpoints: ['/api/auth', '/api/payment', 'stripe.com'],
});

import { open, unmount, getRecordingState } from '@userplane/sdk';

// Open the recording flow
open();

// Close the recorder
unmount();

// Check current state
const state = getRecordingState(); // 'inactive' | 'active' | 'retained'