Skip to content

Quickstart

Ship your first Shadow tutorial in under 10 minutes.

This quickstart walks you from sign-up to a published tutorial video in under ten minutes. It assumes you have a web application where you can paste a <script> tag.

1. Create your workspace

  1. Sign up at app.byshadow.ai/signup.
  2. Create an organization, then create a site. A site is a single product — https://app.example.com, for instance.
  3. Copy the install snippet from the Install page.

2. Install the capture SDK

Paste the snippet into the <head> of every page of your app:

<script async src="https://sdk.byshadow.ai/v1.js"
  data-site="YOUR_SITE_PUBLIC_KEY"></script>

The loader reads data-site and bootstraps passive capture. No other configuration is required; origin allow-lists and redaction rules come from your site’s settings in the Shadow dashboard.

The always-loaded public bundle is small and passive by default. Runs inside requestIdleCallback, flushes via sendBeacon, never blocks a paint.

3. Verify install

Back in the dashboard, open the Install page and click Verify. You should see a green check within a few seconds of opening your app in a new tab.

4. Create a tutorial

  • Open the Captures tab and pick a session that covers the flow you want to explain.
  • Optionally label a few screens in the Screens view to give the AI better context.
  • Click New tutorial, paste a prompt like "How to create a new project".

Shadow will select relevant screens, draft the script, and build the storyboard. You’ll see it appear in a few seconds.

5. Review and render

  • Reorder scenes by dragging.
  • Edit narration — autosave is on.
  • Hit Compose to regenerate voiceover, then Render to produce the MP4.

When the render finishes (usually 1–3 minutes), open the video detail page.

6. Publish & embed

Click Publish. You now have:

  • a public link at https://byshadow.ai/v/<slug>
  • an embed snippet you can paste anywhere:
<iframe
  src="https://byshadow.ai/v/YOUR_SLUG"
  allow="autoplay; fullscreen; picture-in-picture"
  loading="lazy"
  style="width: 100%; aspect-ratio: 16/9; border: 0;"
></iframe>

That’s it — you shipped a tutorial video. Re-render, rename, or unpublish at any time from the dashboard.