Web integration guide, ScreenSteer

Download and install

Embed ScreenSteer in a plain JavaScript, React, Vue, or Svelte app with tab capture and DOM redaction.

Requirements

✓Evergreen browser
✓getDisplayMedia support
✓livekit-client

npm i ./screensteer-web-0.1.0.tgz livekit-client

QUICKSTART

Start with explicit consent

Replace pk_dev_… with the Development key shown once when you create it in the console. Use the one-time pk_live_… key from the Production environment after paid activation.

support.ts

TypeScript

import { ScreenSteerWebSession } from "@screensteer/web";

const session = new ScreenSteerWebSession({
  baseUrl: "https://screensteer.com",
  publishableKey: "pk_dev_…",
});

// Call from your Get help button after explaining screen sharing.
await session.start({ externalUserId: currentUser.id });

STEP 1

Create one session for the support surface

Initialize ScreenSteerWebSession with the service URL and a Development publishable key.

The browser must support getDisplayMedia. Call start from a user gesture so the browser can display its screen-share picker.

STEP 2

Register DOM actions

Bind each action to the DOM element defining its hit area and provide the application handler that should run.

ScreenSteer tracks element geometry and rejects stale or unavailable targets rather than synthesizing browser input.

support.ts

TypeScript

session.registerAction({
  id: "workorders.refresh",
  kind: "button",
  label: "Refresh work orders",
  element: document.querySelector("#refresh")!,
  handler: () => store.refreshWorkOrders(),
});

session.redact("account", document.querySelector("#account-panel")!);

STEP 3

Start capture and render support state

Call session.start from the Get help button after explaining what will be shared. Prefer sharing the current tab so DOM redaction geometry matches the captured surface.

Subscribe to session state to render the persistent banner, pending control sheet, pointer overlay, consent status, and Stop control.

STEP 4

Handle control and teardown

When a control request arrives, show your own confirmation and call grantControl or rejectControl.

If your prompt already covered assistance in one decision, pass controlPreauthorized to session.start (or call setControlPreauthorized once the user approves). Requests from the approved agent are then granted without a second prompt, and the console stops asking its agent to press a button that would prompt nobody.

Expose revokeControl while control is active and await session.end when the user stops support. Revoking clears pre-authorization, so coming back asks the user again.

What the device enforces

●The SDK never injects raw pointer or keyboard input.
●Only registered DOM actions can execute.
●Private regions are composited out before publication.
●Commands are checked for session, expiry, sender sequence, controller, and layout revision.

Smoke test

1Install the downloaded tarball and livekit-client.
2Start from a visible Get help button and choose the current tab.
3Join from the console and verify redacted DOM regions are opaque.
4Approve control and invoke a registered action.
5Resize or scroll and confirm targeting follows the updated layout.
6Revoke control, then stop screen sharing.

Troubleshooting

The browser blocks screen sharing

Call start directly from a user gesture and confirm the site is served over HTTPS.

Redaction is misaligned

Share the current tab and update the redacted element after layout or visibility changes.

Integrate ScreenSteer with a Web App