DEV Community

Custodia-Admin
Custodia-Admin

Posted on • Originally published at pagebolt.dev

Auto-generate onboarding videos from user journey tests

#video #onboarding #automation #testing

Auto-Generate Onboarding Videos from User Journey Tests

Your E2E test suite already describes the critical user journeys: sign up, connect an integration, create a project, invite a teammate. That's also your onboarding video script.

Instead of recording walkthroughs manually — then re-recording every time the UI changes — generate them from the same source of truth as your tests.

The pattern

Store the journey as a step sequence. Run it against your staging environment. Get a narrated MP4 out.

// journeys/signup-flow.js
export const steps = [
  { action: 'navigate', url: '{{base_url}}/signup', note: 'Go to the signup page' },
  { action: 'fill', selector: '#email', value: 'demo@example.com', note: 'Enter your email' },
  { action: 'fill', selector: '#password', value: 'password123', note: 'Choose a password' },
  { action: 'click', selector: '[type="submit"]', note: 'Create your account' },
  { action: 'wait_for', selector: '.dashboard', note: 'Dashboard loads' },
  { action: 'click', selector: '#connect-integration', note: 'Connect your first integration' }
];

export const narration = `
  Welcome to the app. {{1}} Enter your email to get started. {{2}}
  Choose a password. {{3}} Hit Create Account. {{4}}
  Your dashboard is ready. {{5}} Connect an integration to unlock the full experience. {{6}}
`;
Enter fullscreen mode Exit fullscreen mode 
// scripts/generate-onboarding-video.js
import { steps, narration } from './journeys/signup-flow.js';
import fs from 'fs';

const res = await fetch('https://api.pagebolt.dev/v1/video', {
  method: 'POST',
  headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    steps,
    variables: { base_url: process.env.STAGING_URL },
    audioGuide: { enabled: true, voice: 'nova', script: narration },
    frame: { enabled: true, style: 'macos' },
    background: { enabled: true, type: 'gradient', gradient: 'ocean' },
    pace: 'slow',
    cursor: { style: 'highlight', persist: true }
  })
});

fs.writeFileSync('onboarding/signup-flow.mp4', Buffer.from(await res.arrayBuffer()));
Enter fullscreen mode Exit fullscreen mode

Keep videos current automatically

Add a weekly GitHub Actions job against staging:

name: Regenerate Onboarding Videos
on:
  schedule:
    - cron: '0 9 * * 1'  # every Monday 9am
  workflow_dispatch:

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: node scripts/generate-onboarding-video.js
        env:
          PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }}
          STAGING_URL: ${{ secrets.STAGING_URL }}
      - uses: actions/upload-artifact@v4
        with:
          name: onboarding-videos
          path: onboarding/*.mp4
Enter fullscreen mode Exit fullscreen mode

Every Monday, fresh videos. If the UI changed since last week, the video reflects it. No manual re-recording, no "this UI is outdated" support tickets.

What this replaces

The traditional onboarding video workflow: screen recorder → Loom or Camtasia → manual narration → editing → upload → repeat when UI changes. A single UI update means re-recording from scratch.

With generated videos, the journey definition is a 30-line JS file. Update a selector, push to main. Next scheduled run produces a new video with the same narration, new UI.

Try it free — 100 requests/month, no credit card. → pagebolt.dev

Top comments (0)