Session Lens

A floating widget that drops into any prototype. During a client session you click a button, a three-column board opens (MVP / Stories / Backlog), you drag stories with the client in real time, hit Save, and the results are stored in the Feedback Admin automatically.

Two widgets, one admin

Every EI Studio prototype should have both widgets installed. They share the same projectSlug so all data — feedback and scoping sessions — is grouped together in the admin.

| Widget | What it does | Repo | |---|---|---| | Feedback widget | Collects feedback from users during testing | studioEIGen/feedback-widget | | Session Lens | Captures MVP/Backlog decisions during client sessions | studioEIGen/session-lens |

Both connect to the same Feedback Admin at https://feedback-service-nu.vercel.app.

Before you start

1. Create the project in the Feedback Admin

Go to feedback-service-nu.vercel.app/admin and click + next to the project dropdown. Enter a name and slug — note the slug, you'll use it in the config below.

If the feedback widget is also being added to this prototype, use the same slug for both.

2. Get the Scoping API key

The API key is stored in the feedback-service Vercel project under Environment Variables as SCOPING_API_KEY. You can find it at:

Vercel → ei-studio → feedback-service → Settings → Environment Variables → SCOPING_API_KEY

Add it to your prototype's .env.local as:

NEXT_PUBLIC_SCOPING_API_KEY=your-key-here

Never commit it directly in code.

How to add Session Lens to a new prototype

Step 1 — Add the script tag

Open the prototype project. Find the main layout file — this is usually one of:

• app/layout.tsx (Next.js)
• index.html (plain HTML)
• src/App.tsx (React)

For plain HTML — paste just before </body>:

<script src="https://cdn.jsdelivr.net/gh/studioEIGen/session-lens@main/dist/scoping-widget.iife.js"></script>
<script>
  ScopingWidget.init({
    projectSlug: "your-project-slug",
    projectName: "Your Project Name",
    apiUrl: "https://feedback-service-nu.vercel.app",
    apiKey: "paste-the-api-key-here",
    storiesSelector: "[data-scope-story]"
  });
</script>

For Next.js / React — add to your root layout:

<Script
  src="https://cdn.jsdelivr.net/gh/studioEIGen/session-lens@main/dist/scoping-widget.iife.js"
  strategy="afterInteractive"
  onLoad={() => {
    (window as any).ScopingWidget.init({
      projectSlug: "your-project-slug",
      projectName: "Your Project Name",
      apiUrl: "https://feedback-service-nu.vercel.app",
      apiKey: process.env.NEXT_PUBLIC_SCOPING_API_KEY,
      storiesSelector: "[data-scope-story]",
    });
  }}
/>

Step 2 — Fill in the config

projectSlug — A short unique ID for this prototype. No spaces, use hyphens. Must match the slug used in the feedback widget so both are grouped together in the admin. Examples:

• "report-analyzer"
• "intake-portal"
• "compliance-hub"

projectName — The human-readable name shown inside the widget, e.g. "Report Analyzer".

apiUrl — Always:

https://feedback-service-nu.vercel.app

apiKey — The scoping API key. Find it in Vercel → ei-studio → feedback-service → Settings → Environment Variables → SCOPING_API_KEY. Store as NEXT_PUBLIC_SCOPING_API_KEY in your .env.local and in Vercel environment variables. Never commit it directly in code.

storiesSelector — A CSS selector that points to the nav items you want as stories. Add data-scope-story to each top-level nav item in the prototype:

<div class="nav-item" data-scope-story>Pre-Cycle Readiness</div>
<div class="nav-item" data-scope-story>Authoring Workspace</div>

Then set storiesSelector: "[data-scope-story]" and the widget auto-populates.

Alternatively, pass a manual list:

stories: ["Section One", "Section Two", "Section Three"]

Step 3 — Test it

Run the prototype locally and look for a 📋 Scope Session button in the bottom-left. Click it — stories should load automatically. Try dragging one to MVP and one to Backlog, then hit Save session.

Check the Feedback Admin → MVP tab to confirm the session was saved.

Step 4 — Deploy

Deploy the prototype as normal. Add NEXT_PUBLIC_SCOPING_API_KEY to your Vercel environment variables before deploying.

How to run a session with a client

1. Open the prototype with the client on a shared screen
2. Click 📋 Scope Session in the bottom-left
3. Enter your name
4. Walk through each story — drag left for MVP, right for Backlog
5. Click Save session when done
6. Button flashes ✓ — session is saved

Inside the board you can also:

• Add a story → type in the input at the bottom of Stories column, hit Enter
• Delete a story → hover the card, click ×
• Edit a story label → double-click the label, type, hit Enter
• Re-scan page → picks up any new data-scope-story elements added since last open
• Reset board → moves all stories back to center for a fresh session

Where to see results

Log in at https://feedback-service-nu.vercel.app/admin → click MVP tab.

Each session shows who ran it, when, and what landed in MVP vs Backlog. The top of the page shows an aggregated view across all sessions so you can see at a glance which stories every client prioritized.

Updating the widget

The CDN link always points to the latest main branch build — no action needed on your end. Just redeploy the prototype after any Session Lens update to pick up the new version.