diff --git a/src/app/compare/[slug]/page.tsx b/src/app/compare/[slug]/page.tsx
index 11c04b2..1f28d97 100644
--- a/src/app/compare/[slug]/page.tsx
+++ b/src/app/compare/[slug]/page.tsx
@@ -71,6 +71,8 @@ export default async function ComparePage({
             href={MARKETPLACE_URL}
             target="_blank"
             rel="noopener noreferrer"
+            data-analytics-event="compare_marketplace_click"
+            data-analytics-label={comparison.title}
             className="inline-flex items-center gap-2 px-6 py-3 rounded-[10px] font-medium bg-gradient-to-br from-accent-warm to-accent-rose text-bg-deep hover:-translate-y-0.5 transition-all duration-300"
           >
             Install from GitHub Marketplace
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index c5b9699..a4917c4 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -40,6 +40,8 @@ export default function CompareIndex() {
           <Link
             key={c.slug}
             href={`/compare/${c.slug}`}
+            data-analytics-event="compare_index_click"
+            data-analytics-label={c.title}
             className="bg-bg-surface border border-border rounded-2xl p-7 transition-all duration-300 hover:-translate-y-1 hover:border-accent-warm hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] no-underline"
           >
             <h2 className="text-lg font-semibold text-text-primary mb-2">{c.title}</h2>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 24ae776..a600ea9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Nav } from "@/components/nav";
 import { Footer } from "@/components/footer";
+import { Analytics } from "@/components/analytics";
 import { homeDescription } from "@/lib/seo";
 
 const spaceGrotesk = Space_Grotesk({
@@ -54,6 +55,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${spaceGrotesk.variable} ${jetbrainsMono.variable}`}>
       <body>
+        <Analytics />
         <div className="bg-atmosphere" />
         <Nav />
         <div className="max-w-[1100px] mx-auto px-8 py-16 max-sm:px-4 max-sm:py-8">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8838fb6..681dbdb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,13 +5,16 @@ import { HowItWorks } from "@/components/landing/how-it-works";
 import { LiveDemoCta } from "@/components/landing/live-demo-cta";
 import { DemoVideo } from "@/components/landing/demo-video";
 import { Features } from "@/components/landing/features";
+import { KeywordPositioning } from "@/components/landing/keyword-positioning";
 import { StylingShowcase } from "@/components/landing/styling-showcase";
 import { QuickStart } from "@/components/landing/quick-start";
 import { ConfigTable } from "@/components/landing/config-table";
 import { TryCallout } from "@/components/landing/try-callout";
 import { JsonLd } from "@/components/json-ld";
 import {
+  homeDescription,
   organizationSchema,
+  pageMetadata,
   softwareApplicationSchema,
   websiteSchema,
 } from "@/lib/seo";
@@ -21,6 +24,25 @@ import {
 } from "@/lib/links";
 
 export const metadata: Metadata = {
+  ...pageMetadata({
+    title: "Free Website Feedback Widget for GitHub Issues | BugDrop",
+    description: homeDescription,
+    path: "/",
+  }),
+  keywords: [
+    "website feedback widget",
+    "GitHub Issues feedback widget",
+    "visual bug reporting tool",
+    "bug reporting widget",
+    "open source feedback widget",
+    "screenshot feedback widget",
+    "Userback alternative",
+    "Marker.io alternative",
+    "BugHerd alternative",
+    "Usersnap alternative",
+    "Sentry User Feedback alternative",
+    "Canny alternative for bug reports",
+  ],
   alternates: {
     canonical: "/",
   },
@@ -53,6 +75,7 @@ export default function Home() {
       <HowItWorks />
       <LiveDemoCta />
       <Features />
+      <KeywordPositioning />
       <StylingShowcase />
       <QuickStart />
       <ConfigTable />
diff --git a/src/app/sandbox/page.tsx b/src/app/sandbox/page.tsx
new file mode 100644
index 0000000..fb85155
--- /dev/null
+++ b/src/app/sandbox/page.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import { WidgetSandbox } from "@/components/sandbox/widget-sandbox";
+import { pageMetadata } from "@/lib/seo";
+
+export const metadata: Metadata = {
+  ...pageMetadata({
+    title: "BugDrop Sandbox | Configure and Preview the Feedback Widget",
+    description:
+      "Configure BugDrop's feedback widget, preview styling and screenshot behavior, and generate the script tag for your own app.",
+    path: "/sandbox",
+  }),
+  alternates: {
+    canonical: "/sandbox",
+  },
+};
+
+export default function SandboxPage() {
+  return <WidgetSandbox />;
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index bc6b43d..6c75559 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -29,9 +29,14 @@ export default function sitemap(): MetadataRoute.Sitemap {
       url: `${base}/use-cases/${useCase.slug}`,
       lastModified,
       changeFrequency: "monthly" as const,
-      priority: ["github-issues-feedback", "visual-bug-reporting", "nextjs-feedback-widget"].includes(
-        useCase.slug,
-      )
+      priority: [
+        "github-issues-feedback",
+        "website-feedback-widget",
+        "free-website-feedback-widget",
+        "screenshot-feedback-widget",
+        "visual-bug-reporting",
+        "nextjs-feedback-widget",
+      ].includes(useCase.slug)
         ? 0.8
         : 0.6,
     })),
diff --git a/src/app/use-cases/[slug]/page.tsx b/src/app/use-cases/[slug]/page.tsx
index 31fb99c..88a2e63 100644
--- a/src/app/use-cases/[slug]/page.tsx
+++ b/src/app/use-cases/[slug]/page.tsx
@@ -71,6 +71,8 @@ export default async function UseCasePage({
             href={MARKETPLACE_URL}
             target="_blank"
             rel="noopener noreferrer"
+            data-analytics-event="use_case_marketplace_click"
+            data-analytics-label={useCase.title}
             className="inline-flex items-center gap-2 px-6 py-3 rounded-[10px] font-medium bg-gradient-to-br from-accent-warm to-accent-rose text-bg-deep hover:-translate-y-0.5 transition-all duration-300"
           >
             Install from GitHub Marketplace
diff --git a/src/app/use-cases/page.tsx b/src/app/use-cases/page.tsx
index 22075a9..8a22d4e 100644
--- a/src/app/use-cases/page.tsx
+++ b/src/app/use-cases/page.tsx
@@ -41,6 +41,8 @@ export default function UseCasesIndex() {
           <Link
             key={uc.slug}
             href={`/use-cases/${uc.slug}`}
+            data-analytics-event="use_case_index_click"
+            data-analytics-label={uc.title}
             className="bg-bg-surface border border-border rounded-2xl p-7 transition-all duration-300 hover:-translate-y-1 hover:border-accent-warm hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] no-underline"
           >
             <span className="text-3xl mb-4 block">{uc.icon}</span>
diff --git a/src/components/analytics.tsx b/src/components/analytics.tsx
new file mode 100644
index 0000000..8b23a09
--- /dev/null
+++ b/src/components/analytics.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import Script from "next/script";
+import { Suspense, useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useReportWebVitals } from "next/web-vitals";
+
+const gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+const posthogHost =
+  process.env.NEXT_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com";
+const attributionStorageKey = "bugdrop_attribution";
+const campaignParamKeys = [
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_term",
+  "utm_content",
+  "gclid",
+  "gbraid",
+  "wbraid",
+  "msclkid",
+  "fbclid",
+] as const;
+
+declare global {
+  interface Window {
+    dataLayer?: unknown[];
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+function currentUrl(pathname: string, searchParams: URLSearchParams) {
+  const query = searchParams.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+function safeLocalStorageGet(key: string) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function safeLocalStorageSet(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // Storage can be unavailable in private browsing or restricted contexts.
+  }
+}
+
+function searchParamsObject(searchParams: URLSearchParams) {
+  const params: Record<string, string> = {};
+
+  for (const key of campaignParamKeys) {
+    const value = searchParams.get(key);
+    if (value) params[key] = value;
+  }
+
+  return params;
+}
+
+function parseStoredAttribution() {
+  const stored = safeLocalStorageGet(attributionStorageKey);
+  if (!stored) return null;
+
+  try {
+    return JSON.parse(stored) as Record<string, string | undefined>;
+  } catch {
+    return null;
+  }
+}
+
+function referrerDomain(referrer: string) {
+  if (!referrer) return undefined;
+
+  try {
+    return new URL(referrer).hostname;
+  } catch {
+    return undefined;
+  }
+}
+
+function attributionProperties(pagePath: string, searchParams: URLSearchParams) {
+  const currentParams = searchParamsObject(searchParams);
+  const stored = parseStoredAttribution();
+  const firstTouch = stored ?? {
+    first_landing_page: pagePath,
+    first_referrer: document.referrer || undefined,
+    first_referring_domain: referrerDomain(document.referrer),
+    first_seen_at: new Date().toISOString(),
+    ...Object.fromEntries(
+      Object.entries(currentParams).map(([key, value]) => [`first_${key}`, value]),
+    ),
+  };
+
+  if (!stored) {
+    safeLocalStorageSet(attributionStorageKey, JSON.stringify(firstTouch));
+  }
+
+  return {
+    ...firstTouch,
+    referrer: document.referrer || undefined,
+    referring_domain: referrerDomain(document.referrer),
+    landing_page: pagePath,
+    ...currentParams,
+  };
+}
+
+function currentAttributionProperties() {
+  return attributionProperties(
+    `${window.location.pathname}${window.location.search}`,
+    new URLSearchParams(window.location.search),
+  );
+}
+
+function sendGoogleAnalytics(command: string, ...args: unknown[]) {
+  if (!gaMeasurementId) return;
+
+  if (window.gtag) {
+    window.gtag(command, ...args);
+    return;
+  }
+
+  window.dataLayer = window.dataLayer ?? [];
+  window.dataLayer.push([command, ...args]);
+}
+
+function posthogDistinctId() {
+  const storageKey = "bugdrop_posthog_distinct_id";
+  const existing = safeLocalStorageGet(storageKey);
+  if (existing) return existing;
+
+  const nextId = window.crypto.randomUUID();
+  safeLocalStorageSet(storageKey, nextId);
+  return nextId;
+}
+
+function capturePostHogEvent(
+  eventName: string,
+  properties: Record<string, unknown>,
+) {
+  if (!posthogKey) return;
+
+  const body = JSON.stringify({
+    api_key: posthogKey,
+    event: eventName,
+    distinct_id: posthogDistinctId(),
+    properties: {
+      $current_url: window.location.href,
+      $host: window.location.host,
+      $pathname: window.location.pathname,
+      ...properties,
+    },
+  });
+
+  const url = `${posthogHost}/capture/`;
+  const blob = new Blob([body], { type: "application/json" });
+
+  if (navigator.sendBeacon?.(url, blob)) return;
+
+  void fetch(url, {
+    method: "POST",
+    body,
+    headers: { "Content-Type": "application/json" },
+    keepalive: true,
+  });
+}
+
+function captureEvent(eventName: string, properties: Record<string, unknown>) {
+  sendGoogleAnalytics("event", eventName, properties);
+  capturePostHogEvent(eventName, properties);
+}
+
+function sendGooglePageView(
+  pagePath: string,
+  properties: Record<string, unknown>,
+) {
+  sendGoogleAnalytics("event", "page_view", {
+    page_location: window.location.href,
+    page_path: pagePath,
+    page_title: document.title,
+    ...properties,
+  });
+}
+
+function PageViewTracker() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const pagePath = currentUrl(pathname, searchParams);
+    const attribution = attributionProperties(pagePath, searchParams);
+    let cancelled = false;
+    let attempts = 0;
+
+    capturePostHogEvent("$pageview", {
+      page_path: pagePath,
+      ...attribution,
+    });
+
+    const sendPageViewWhenReady = () => {
+      if (cancelled) return;
+
+      if (window.gtag || attempts >= 20) {
+        sendGooglePageView(pagePath, attribution);
+        return;
+      }
+
+      attempts += 1;
+      window.setTimeout(sendPageViewWhenReady, 100);
+    };
+
+    sendPageViewWhenReady();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const el = target.closest<HTMLElement>("[data-analytics-event]");
+      if (!el) return;
+
+      captureEvent(el.dataset.analyticsEvent ?? "site_interaction", {
+        label: el.dataset.analyticsLabel ?? el.textContent?.trim() ?? undefined,
+        destination: el.getAttribute("href") ?? undefined,
+        page_path: currentUrl(pathname, searchParams),
+        ...attributionProperties(currentUrl(pathname, searchParams), searchParams),
+      });
+    };
+
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [pathname, searchParams]);
+
+  return null;
+}
+
+export function Analytics() {
+  useReportWebVitals((metric) => {
+    const attribution = currentAttributionProperties();
+    const value =
+      metric.name === "CLS" ? Math.round(metric.value * 1000) : Math.round(metric.value);
+
+    sendGoogleAnalytics("event", metric.name, {
+      event_category: "Web Vitals",
+      event_label: metric.id,
+      value,
+      non_interaction: true,
+      ...attribution,
+    });
+    capturePostHogEvent("web_vital", {
+      id: metric.id,
+      name: metric.name,
+      value: metric.value,
+      rating: "rating" in metric ? metric.rating : undefined,
+      ...attribution,
+    });
+  });
+
+  return (
+    <>
+      {gaMeasurementId ? (
+        <>
+          <Script
+            src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
+            strategy="afterInteractive"
+          />
+          <Script id="ga4" strategy="afterInteractive">
+            {`
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){window.dataLayer.push(arguments);}
+              window.gtag = gtag;
+              gtag('js', new Date());
+              gtag('config', '${gaMeasurementId}', { send_page_view: false });
+            `}
+          </Script>
+        </>
+      ) : null}
+      <Suspense fallback={null}>
+        <PageViewTracker />
+      </Suspense>
+    </>
+  );
+}
diff --git a/src/components/landing/hero.tsx b/src/components/landing/hero.tsx
index 6bd674a..7533a7e 100644
--- a/src/components/landing/hero.tsx
+++ b/src/components/landing/hero.tsx
@@ -12,16 +12,16 @@ export function Hero() {
   return (
     <header className="text-center py-16 pb-24 max-sm:-mt-6 max-sm:pt-0 max-sm:pb-16">
       <h1 className="text-[clamp(2.5rem,6vw,4rem)] font-light tracking-tight leading-[1.15] mb-6 text-text-primary max-sm:text-[2.35rem]">
-        Free website feedback widget with
+        Free GitHub Issues feedback widget with
         <br />
         <strong className="font-bold text-accent-warm">
           screenshots in 30 seconds
         </strong>
       </h1>
       <p className="text-xl text-text-subtle max-w-[600px] mx-auto mb-10 max-sm:mb-7 max-sm:text-lg">
-        BugDrop is an open-source website feedback widget that creates GitHub
-        Issues with screenshots, annotations, system info, and redaction
-        controls. Add one script tag to any site.
+        BugDrop is an open-source website feedback widget for visual bug
+        reporting. Capture screenshots, annotations, browser metadata, and
+        privacy redactions, then create GitHub Issues from one script tag.
       </p>
       <div className="mx-auto mb-7 flex max-w-[720px] flex-wrap justify-center gap-2 text-xs font-medium text-text-muted">
         <span className="rounded border border-border bg-bg-surface px-3 py-1.5">
@@ -55,6 +55,8 @@ export function Hero() {
           target="_blank"
           rel="noopener noreferrer"
           aria-label="BugDrop was featured on Product Hunt"
+          data-analytics-event="outbound_product_hunt_click"
+          data-analytics-label="Product Hunt badge"
           className="inline-flex transition-transform duration-300 hover:-translate-y-0.5"
         >
           <Image
@@ -73,6 +75,8 @@ export function Hero() {
       <div className="flex gap-4 justify-center flex-wrap max-sm:flex-col">
         <a
           href="#try-bugdrop"
+          data-analytics-event="landing_cta_click"
+          data-analytics-label="Try it on this page"
           className="inline-flex items-center gap-2 px-8 py-4 rounded-[10px] font-medium text-[0.95rem] bg-accent-cyan text-bg-deep hover:-translate-y-0.5 hover:shadow-[0_10px_30px_rgba(125,207,255,0.24)] transition-all duration-300 max-sm:w-full max-sm:justify-center"
         >
           <MessageSquare className="size-4" aria-hidden="true" />
@@ -82,6 +86,8 @@ export function Hero() {
           href={MARKETPLACE_URL}
           target="_blank"
           rel="noopener noreferrer"
+          data-analytics-event="outbound_marketplace_click"
+          data-analytics-label="Install from GitHub Marketplace"
           className="inline-flex items-center gap-2 px-8 py-4 rounded-[10px] font-medium text-[0.95rem] bg-gradient-to-br from-accent-warm to-accent-rose text-bg-deep hover:-translate-y-0.5 hover:shadow-[0_10px_30px_rgba(255,158,100,0.3)] transition-all duration-300 max-sm:w-full max-sm:justify-center"
         >
           <ArrowUpRight className="size-4" aria-hidden="true" />
@@ -91,6 +97,8 @@ export function Hero() {
           href={GITHUB_REPO_URL}
           target="_blank"
           rel="noopener noreferrer"
+          data-analytics-event="outbound_github_click"
+          data-analytics-label="View on GitHub"
           className="inline-flex items-center gap-2 px-8 py-4 rounded-[10px] font-medium text-[0.95rem] bg-bg-surface text-text-primary border border-border hover:bg-bg-elevated hover:-translate-y-0.5 transition-all duration-300 max-sm:w-full max-sm:justify-center"
         >
           <Code2 className="size-4" aria-hidden="true" />
diff --git a/src/components/landing/keyword-positioning.tsx b/src/components/landing/keyword-positioning.tsx
new file mode 100644
index 0000000..7667e1e
--- /dev/null
+++ b/src/components/landing/keyword-positioning.tsx
@@ -0,0 +1,97 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { compareNav } from "@/lib/compare-nav";
+import { SectionHeading } from "./section-heading";
+
+const keywordClusters = [
+  {
+    title: "Website feedback widget",
+    description:
+      "A drop-in feedback button for SaaS sites, docs, internal tools, and client review environments.",
+  },
+  {
+    title: "GitHub Issues feedback",
+    description:
+      "Turn website bug reports into structured GitHub Issues instead of routing teams through another dashboard.",
+  },
+  {
+    title: "Visual bug reporting",
+    description:
+      "Capture annotated screenshots, browser metadata, viewport size, and privacy redactions with one widget.",
+  },
+  {
+    title: "Open-source alternative",
+    description:
+      "A free, MIT-licensed alternative to hosted visual feedback tools when your team wants GitHub-native triage.",
+  },
+];
+
+const competitorLinks = compareNav.filter((item) =>
+  ["userback", "marker-io", "bugherd", "usersnap", "canny", "sentry-user-feedback"].includes(
+    item.slug,
+  ),
+);
+
+export function KeywordPositioning() {
+  return (
+    <section className="mb-20">
+      <SectionHeading>Search-Focused Workflows</SectionHeading>
+      <div className="grid grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] gap-8 max-lg:grid-cols-1">
+        <div className="rounded-2xl border border-border bg-bg-surface p-7">
+          <h2 className="mb-3 text-2xl font-semibold leading-tight text-text-primary">
+            Built for teams searching for a lighter feedback widget than
+            Userback, Marker.io, BugHerd, Usersnap, Canny, or Sentry feedback.
+          </h2>
+          <p className="mb-6 text-sm leading-relaxed text-text-subtle">
+            BugDrop targets the workflow those tools often surround with paid
+            suites: collect website feedback, capture a screenshot, include
+            browser context, and create a GitHub Issue developers can triage
+            immediately.
+          </p>
+          <Link
+            href="/compare"
+            data-analytics-event="compare_index_click"
+            data-analytics-label="Compare BugDrop alternatives"
+            className="inline-flex items-center gap-2 rounded-[10px] border border-accent-cyan/40 bg-accent-cyan/10 px-4 py-2 text-sm font-medium text-accent-cyan no-underline transition-all hover:-translate-y-0.5 hover:border-accent-cyan"
+          >
+            Compare alternatives
+            <ArrowRight className="size-4" aria-hidden="true" />
+          </Link>
+        </div>
+        <div className="grid grid-cols-2 gap-4 max-sm:grid-cols-1">
+          {keywordClusters.map((cluster) => (
+            <div
+              key={cluster.title}
+              className="rounded-2xl border border-border bg-bg-surface p-5"
+            >
+              <h3 className="mb-2 text-sm font-semibold text-text-primary">
+                {cluster.title}
+              </h3>
+              <p className="text-sm leading-relaxed text-text-subtle">
+                {cluster.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="mt-6 grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4">
+        {competitorLinks.map((item) => (
+          <Link
+            key={item.slug}
+            href={`/compare/${item.slug}`}
+            data-analytics-event="competitor_compare_click"
+            data-analytics-label={item.title}
+            className="rounded-2xl border border-border bg-bg-surface p-5 no-underline transition-all duration-300 hover:-translate-y-1 hover:border-accent-warm"
+          >
+            <h3 className="mb-2 text-sm font-semibold text-text-primary">
+              {item.title}
+            </h3>
+            <p className="text-sm leading-relaxed text-text-subtle">
+              {item.description}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index bbe0173..e03b67b 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -27,6 +27,8 @@ export function Nav() {
         </a>
         <Link
           href="/#try-bugdrop"
+          data-analytics-event="nav_try_widget_click"
+          data-analytics-label="Try Widget"
           className="inline-flex items-center rounded-[10px] border border-accent-cyan/40 bg-accent-cyan/10 px-3 py-1.5 text-sm font-medium text-accent-cyan transition-all hover:-translate-y-0.5 hover:border-accent-cyan hover:bg-accent-cyan/15"
         >
           Try Widget
diff --git a/src/components/sandbox/widget-sandbox.tsx b/src/components/sandbox/widget-sandbox.tsx
new file mode 100644
index 0000000..378b019
--- /dev/null
+++ b/src/components/sandbox/widget-sandbox.tsx
@@ -0,0 +1,926 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+  Bot,
+  Check,
+  Clipboard,
+  Code2,
+  ExternalLink,
+  Eye,
+  FileCode2,
+  MonitorSmartphone,
+  Palette,
+  Play,
+  RefreshCw,
+  Send,
+  Settings2,
+  Sparkles,
+  Wand2,
+} from "lucide-react";
+import { WIDGET_URL } from "@/lib/links";
+
+type SandboxConfig = {
+  repo: string;
+  theme: "auto" | "light" | "dark";
+  position: "bottom-right" | "bottom-left";
+  color: string;
+  label: string;
+  icon: string;
+  screenshot: "optional" | "auto" | "required";
+  welcome: "once" | "always" | "never";
+  showName: boolean;
+  requireName: boolean;
+  showEmail: boolean;
+  requireEmail: boolean;
+  buttonDismissible: boolean;
+  dismissDuration: string;
+  showRestore: boolean;
+  showButton: boolean;
+  screenshotScale: string;
+  font: string;
+  radius: string;
+  bg: string;
+  text: string;
+  borderWidth: string;
+  borderColor: string;
+  shadow: string;
+  categoryLabels: string;
+};
+
+type OutputTab = "script" | "preview" | "agent";
+
+const initialConfig: SandboxConfig = {
+  repo: "mean-weasel/bugdrop-widget-test",
+  theme: "light",
+  position: "bottom-right",
+  color: "#2563eb",
+  label: "Feedback",
+  icon: "",
+  screenshot: "optional",
+  welcome: "always",
+  showName: false,
+  requireName: false,
+  showEmail: false,
+  requireEmail: false,
+  buttonDismissible: false,
+  dismissDuration: "session",
+  showRestore: true,
+  showButton: true,
+  screenshotScale: "2",
+  font: "inherit",
+  radius: "8px",
+  bg: "#ffffff",
+  text: "#162033",
+  borderWidth: "1px",
+  borderColor: "#dbe3ee",
+  shadow: "0 18px 40px rgba(22,32,51,0.09)",
+  categoryLabels: "",
+};
+
+const attributeMap: Record<keyof SandboxConfig, string> = {
+  repo: "data-repo",
+  theme: "data-theme",
+  position: "data-position",
+  color: "data-color",
+  label: "data-label",
+  icon: "data-icon",
+  screenshot: "data-screenshot",
+  welcome: "data-welcome",
+  showName: "data-show-name",
+  requireName: "data-require-name",
+  showEmail: "data-show-email",
+  requireEmail: "data-require-email",
+  buttonDismissible: "data-button-dismissible",
+  dismissDuration: "data-dismiss-duration",
+  showRestore: "data-show-restore",
+  showButton: "data-button",
+  screenshotScale: "data-screenshot-scale",
+  font: "data-font",
+  radius: "data-radius",
+  bg: "data-bg",
+  text: "data-text",
+  borderWidth: "data-border-width",
+  borderColor: "data-border-color",
+  shadow: "data-shadow",
+  categoryLabels: "data-category-labels",
+};
+
+function escapeAttribute(value: string) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;");
+}
+
+function scriptAttributes(config: SandboxConfig) {
+  const attrs: Partial<Record<keyof SandboxConfig, string>> = {
+    repo: config.repo,
+    theme: config.theme,
+    position: config.position,
+    color: config.color,
+    label: config.label,
+    icon: config.icon,
+    screenshot: config.screenshot,
+    welcome: config.welcome,
+    showName: config.showName ? "true" : "",
+    requireName: config.requireName ? "true" : "",
+    showEmail: config.showEmail ? "true" : "",
+    requireEmail: config.requireEmail ? "true" : "",
+    buttonDismissible: config.buttonDismissible ? "true" : "",
+    dismissDuration: config.buttonDismissible ? config.dismissDuration : "",
+    showRestore: config.showRestore ? "" : "false",
+    showButton: config.showButton ? "" : "false",
+    screenshotScale: config.screenshotScale === "2" ? "" : config.screenshotScale,
+    font: config.font,
+    radius: config.radius,
+    bg: config.bg,
+    text: config.text,
+    borderWidth: config.borderWidth,
+    borderColor: config.borderColor,
+    shadow: config.shadow,
+    categoryLabels: config.categoryLabels,
+  };
+
+  return Object.entries(attrs).filter(([, value]) => Boolean(value)) as Array<
+    [keyof SandboxConfig, string]
+  >;
+}
+
+function buildScriptTag(config: SandboxConfig) {
+  const lines = [`<script`, `  src="${WIDGET_URL}"`];
+  for (const [key, value] of scriptAttributes(config)) {
+    lines.push(`  ${attributeMap[key]}="${escapeAttribute(value)}"`);
+  }
+  lines[lines.length - 1] = `${lines[lines.length - 1]}></script>`;
+  return lines.join("\n");
+}
+
+function previewScriptAttributes(config: SandboxConfig) {
+  return {
+    ...Object.fromEntries(
+      scriptAttributes(config).map(([key, value]) => [attributeMap[key], value]),
+    ),
+    "data-preview": "true",
+  } as Record<string, string>;
+}
+
+function buildPreviewSnippet(config: SandboxConfig) {
+  const attrs = previewScriptAttributes(config);
+
+  return `(() => {
+  const widgetSrc = ${JSON.stringify(WIDGET_URL)};
+  const attrs = ${JSON.stringify(attrs, null, 2)};
+  document.getElementById("bugdrop-preview-script")?.remove();
+  document.getElementById("bugdrop-host")?.remove();
+  delete window.BugDrop;
+  delete window.BugDropPreview;
+
+  const script = document.createElement("script");
+  script.id = "bugdrop-preview-script";
+  script.src = widgetSrc;
+  for (const [name, value] of Object.entries(attrs)) {
+    if (value) script.setAttribute(name, value);
+  }
+  document.body.append(script);
+  console.info("[BugDrop preview] Widget injected in preview mode. Reload to remove.");
+})();`;
+}
+
+function buildAgentPrompt(config: SandboxConfig) {
+  return `Install BugDrop in this web app using the script tag below.
+
+Requirements:
+- Add the script globally so it loads on every product page after the app is interactive.
+- If this is Next.js App Router, use next/script in the root layout with strategy="afterInteractive".
+- If this is Vite, React, Rails, Laravel, or plain HTML, place it near the end of the body or equivalent app shell.
+- Preserve all data-* attributes exactly.
+- Do not include data-preview="true" in production.
+- Mark private fields with data-bugdrop-mask when they should never appear in screenshots.
+- After installing, verify the floating "${config.label || "Feedback"}" button appears and opens the wizard.
+
+${buildScriptTag(config)}`;
+}
+
+function buildBookmarklet(snippet: string) {
+  return `javascript:${encodeURIComponent(snippet)}`;
+}
+
+function buildIframeHtml(config: SandboxConfig) {
+  const attrs = Object.entries(previewScriptAttributes(config))
+    .filter(([, value]) => Boolean(value))
+    .map(([name, value]) => `${name}="${escapeAttribute(value)}"`)
+    .join(" ");
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #f8fafc;
+      --ink: #162033;
+      --muted: #64748b;
+      --line: #dbe3ee;
+      --surface: #ffffff;
+      --accent: #2563eb;
+      --success: #0f766e;
+      --warning: #b45309;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      color: var(--ink);
+      background: var(--bg);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      letter-spacing: 0;
+    }
+    button, input { font: inherit; }
+    .topbar {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      padding: 16px 24px;
+      background: rgba(255,255,255,0.9);
+      border-bottom: 1px solid var(--line);
+      backdrop-filter: blur(14px);
+    }
+    .brand { display: flex; align-items: center; gap: 10px; font-weight: 760; }
+    .brand-mark {
+      width: 30px;
+      height: 30px;
+      border-radius: 8px;
+      background: var(--accent);
+      box-shadow: inset 0 -8px 16px rgba(0,0,0,0.18);
+    }
+    .nav-actions { display: flex; gap: 10px; }
+    .nav-actions button, .secondary-action {
+      min-height: 36px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 0 12px;
+      color: var(--ink);
+      background: #fff;
+    }
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+      gap: 28px;
+      padding: 44px 24px 28px;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+    h1, h2, p { margin: 0; }
+    h1 {
+      max-width: 680px;
+      font-size: clamp(44px, 7vw, 76px);
+      line-height: 0.96;
+      letter-spacing: 0;
+    }
+    .hero p {
+      max-width: 580px;
+      margin-top: 18px;
+      color: #53647e;
+      font-size: 18px;
+      line-height: 1.6;
+    }
+    .primary-action {
+      margin-top: 26px;
+      min-height: 44px;
+      border: 0;
+      border-radius: 8px;
+      padding: 0 16px;
+      color: #fff;
+      background: var(--accent);
+      font-weight: 700;
+    }
+    .health-card, .account-panel, .feedback-list, .notes-panel {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: rgba(255,255,255,0.78);
+      box-shadow: 0 20px 60px rgba(22,32,51,0.06);
+    }
+    .health-card { padding: 24px; min-height: 260px; }
+    .health-card h2, .account-panel h2, .feedback-list h2, .notes-panel h2 {
+      font-size: 12px;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: #61708a;
+    }
+    .metric {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      color: #64748b;
+      font-weight: 650;
+    }
+    .metric strong { color: var(--ink); }
+    .workspace {
+      display: grid;
+      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
+      gap: 24px;
+      padding: 10px 24px 48px;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+    .feedback-list { overflow: hidden; }
+    .feedback-head, .task-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      gap: 16px;
+      align-items: center;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--line);
+    }
+    .task-row:last-child { border-bottom: 0; }
+    .task-title { font-weight: 760; }
+    .task-meta { margin-top: 3px; color: #64748b; font-size: 13px; }
+    .pill {
+      border-radius: 999px;
+      padding: 5px 10px;
+      background: #e6efff;
+      color: #1450c8;
+      font-size: 12px;
+      font-weight: 750;
+    }
+    .priority { color: var(--warning); font-size: 12px; font-weight: 800; }
+    .sidebar { display: grid; gap: 24px; }
+    .account-panel, .notes-panel { padding: 18px; }
+    .form-stack { display: grid; gap: 12px; margin-top: 16px; }
+    .form-stack label { display: grid; gap: 7px; color: #64748b; font-size: 13px; font-weight: 700; }
+    .form-stack input {
+      min-height: 38px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 0 12px;
+      color: var(--ink);
+      background: #f8fafc;
+      font-weight: 650;
+    }
+    .notes-panel p { margin-top: 10px; color: #64748b; line-height: 1.5; }
+    @media (max-width: 760px) {
+      .hero, .workspace { grid-template-columns: 1fr; }
+      .nav-actions { display: none; }
+      h1 { font-size: 44px; }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand"><span class="brand-mark"></span>Acme Console</div>
+    <div class="nav-actions"><button>Dashboard</button><button>Settings</button></div>
+  </header>
+  <section class="hero">
+    <main>
+      <h1>Ship feedback from the page where users notice it.</h1>
+      <p>This preview page gives the widget real layout, forms, private fields, scroll depth, and UI density for setup testing.</p>
+      <button class="primary-action">Start review</button>
+      <button class="secondary-action" style="margin-left: 8px;">View queue</button>
+    </main>
+    <aside class="health-card">
+      <h2>Release Health</h2>
+      <div class="metric"><span>Open reports</span><strong>18</strong></div>
+      <div class="metric"><span>Median triage</span><strong>42m</strong></div>
+      <div class="metric"><span>Screenshot rate</span><strong>71%</strong></div>
+    </aside>
+  </section>
+  <section class="workspace">
+    <main class="feedback-list">
+      <div class="feedback-head"><h2>Recent Feedback</h2><strong style="color: var(--success);">Live queue</strong><span></span></div>
+      <article class="task-row"><div><div class="task-title">Checkout total changes after coupon edit</div><div class="task-meta">Reported from /billing/checkout</div></div><span class="pill">Bug</span><span class="priority">High</span></article>
+      <article class="task-row"><div><div class="task-title">Add export option for filtered events</div><div class="task-meta">Reported from /events</div></div><span class="pill">Feature</span><span class="priority">Medium</span></article>
+      <article class="task-row"><div><div class="task-title">Clarify which workspace owns audit logs</div><div class="task-meta">Reported from /settings/security</div></div><span class="pill">Question</span><span class="priority">Low</span></article>
+    </main>
+    <aside class="sidebar">
+      <section class="account-panel">
+        <h2>Account Details</h2>
+        <div class="form-stack">
+          <label>Customer name<input value="Jordan Watts" readonly /></label>
+          <label>API key<input data-bugdrop-mask value="sk_live_sandbox_example_42" readonly /></label>
+          <label>Payment method<input data-bugdrop-mask value="Visa ending in 4242" readonly /></label>
+        </div>
+      </section>
+      <section class="notes-panel">
+        <h2>Private Notes</h2>
+        <p>Enterprise renewal negotiation details and account-specific implementation notes.</p>
+        <p>Unmarked content remains visible in screenshots.</p>
+      </section>
+    </aside>
+  </section>
+  <script>
+    window.addEventListener("message", event => {
+      if (!event.data || event.data.source !== "bugdrop-sandbox") return;
+      const runPreviewAction = () => {
+        if (!window.BugDropPreview) {
+          setTimeout(runPreviewAction, 100);
+          return;
+        }
+        if (event.data.action === "open") window.BugDropPreview.openWelcome();
+        if (event.data.action === "form") window.BugDropPreview.openForm();
+        if (event.data.action === "success") window.BugDropPreview.openSuccess();
+        if (event.data.action === "close") window.BugDropPreview.close();
+      };
+      runPreviewAction();
+    });
+  </script>
+  <script src="${WIDGET_URL}" ${attrs}></script>
+</body>
+</html>`;
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="grid gap-1.5 text-[13px] font-medium text-slate-400">
+      <span>{label}</span>
+      {children}
+    </label>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      className="min-h-10 rounded-[8px] border border-slate-700/80 bg-slate-950/55 px-3 text-sm text-slate-100 outline-none transition focus:border-cyan-400"
+    />
+  );
+}
+
+function SelectInput({
+  value,
+  onChange,
+  children,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      className="min-h-10 rounded-[8px] border border-slate-700/80 bg-slate-950/55 px-3 text-sm text-slate-100 outline-none transition focus:border-cyan-400"
+    >
+      {children}
+    </select>
+  );
+}
+
+function Checkbox({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <label className="flex min-h-8 items-center gap-2 text-sm font-medium text-slate-200">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        className="size-4 accent-cyan-400"
+      />
+      {label}
+    </label>
+  );
+}
+
+function CopyButton({ value, label = "Copy" }: { value: string; label?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1400);
+      }}
+      className="inline-flex min-h-9 items-center gap-2 rounded-[8px] border border-cyan-400/35 bg-cyan-400/10 px-3 text-sm font-semibold text-cyan-200 transition hover:border-cyan-300 hover:bg-cyan-400/15"
+    >
+      {copied ? <Check className="size-4" /> : <Clipboard className="size-4" />}
+      {copied ? "Copied" : label}
+    </button>
+  );
+}
+
+function GuideStep({
+  index,
+  title,
+  description,
+  active,
+  icon,
+}: {
+  index: number;
+  title: string;
+  description: string;
+  active?: boolean;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`grid grid-cols-[32px_minmax(0,1fr)] gap-3 rounded-[8px] border p-3 ${
+        active
+          ? "border-cyan-400/45 bg-cyan-400/10 text-slate-50"
+          : "border-slate-800 bg-slate-950/25 text-slate-300"
+      }`}
+    >
+      <div className="flex size-8 items-center justify-center rounded-[8px] border border-slate-700 bg-slate-950 text-xs font-bold text-cyan-200">
+        {index}
+      </div>
+      <div>
+        <div className="flex items-center gap-2 text-sm font-semibold">
+          {icon}
+          {title}
+        </div>
+        <p className="mt-1 text-xs leading-5 text-slate-400">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+function OutputTabButton({
+  active,
+  onClick,
+  icon,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`inline-flex min-h-9 items-center gap-2 rounded-[8px] px-3 text-sm font-semibold transition ${
+        active
+          ? "bg-slate-100 text-slate-950"
+          : "border border-slate-700 bg-slate-950/40 text-slate-300 hover:border-slate-500"
+      }`}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
+
+export function WidgetSandbox() {
+  const [config, setConfig] = useState<SandboxConfig>(initialConfig);
+  const [previewKey, setPreviewKey] = useState(0);
+  const [outputTab, setOutputTab] = useState<OutputTab>("script");
+
+  const scriptTag = useMemo(() => buildScriptTag(config), [config]);
+  const iframeHtml = useMemo(() => buildIframeHtml(config), [config]);
+  const previewSnippet = useMemo(() => buildPreviewSnippet(config), [config]);
+  const bookmarklet = useMemo(() => buildBookmarklet(previewSnippet), [previewSnippet]);
+  const agentPrompt = useMemo(() => buildAgentPrompt(config), [config]);
+  const activeOutput =
+    outputTab === "script" ? scriptTag : outputTab === "preview" ? previewSnippet : agentPrompt;
+
+  const update = <K extends keyof SandboxConfig>(key: K, value: SandboxConfig[K]) => {
+    setConfig((current) => {
+      const next = { ...current, [key]: value };
+      if (key === "requireName" && value === true) next.showName = true;
+      if (key === "requireEmail" && value === true) next.showEmail = true;
+      return next;
+    });
+  };
+
+  const postPreviewAction = (action: "open" | "form" | "success" | "close") => {
+    const iframe = document.getElementById("sandbox-preview") as HTMLIFrameElement | null;
+    iframe?.contentWindow?.postMessage({ source: "bugdrop-sandbox", action }, "*");
+  };
+
+  const selectOutputTab = (tab: OutputTab) => {
+    postPreviewAction("close");
+    setOutputTab(tab);
+  };
+
+  return (
+    <div className="relative left-1/2 -mt-8 grid w-[min(1580px,calc(100vw-2rem))] -translate-x-1/2 gap-5 max-sm:w-[calc(100vw-1rem)]">
+      <section className="grid min-w-0 gap-4 rounded-[8px] border border-slate-800 bg-[#111827] p-4 shadow-2xl shadow-black/25 lg:grid-cols-[280px_minmax(0,1fr)_340px] max-sm:p-3">
+        <aside className="grid content-start gap-3">
+          <div className="mb-1">
+            <h1 className="text-2xl font-bold leading-tight text-slate-50 md:text-3xl">
+              Configure BugDrop before it touches production.
+            </h1>
+            <p className="mt-3 text-sm leading-6 text-slate-400">
+              A guided sandbox for understanding widget options, previewing the wizard, and handing
+              an exact install plan to a human or coding agent.
+            </p>
+          </div>
+          <GuideStep
+            index={1}
+            title="Destination"
+            description="Choose the GitHub repo that receives feedback."
+            active
+            icon={<Settings2 className="size-4" />}
+          />
+          <GuideStep
+            index={2}
+            title="Behavior"
+            description="Decide screenshots, contact fields, and button behavior."
+            active
+            icon={<Wand2 className="size-4" />}
+          />
+          <GuideStep
+            index={3}
+            title="Styling"
+            description="Tune colors, borders, radius, shadows, and font inheritance."
+            active
+            icon={<Palette className="size-4" />}
+          />
+          <GuideStep
+            index={4}
+            title="Preview"
+            description="Walk through welcome, form, success, and submit states."
+            active
+            icon={<Eye className="size-4" />}
+          />
+          <GuideStep
+            index={5}
+            title="Install"
+            description="Copy a script tag, site preview snippet, or agent prompt."
+            icon={<FileCode2 className="size-4" />}
+          />
+        </aside>
+
+        <main className="grid min-w-0 gap-4">
+          <div className="rounded-[8px] border border-slate-700 bg-slate-950/50 p-3">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-slate-100">
+                  <MonitorSmartphone className="size-4 text-cyan-300" />
+                  Live preview canvas
+                </h2>
+                <p className="mt-1 text-sm text-slate-400">
+                  The embedded app uses the current script attributes with preview mode enabled.
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  onClick={() => setPreviewKey((key) => key + 1)}
+                  className="inline-flex min-h-9 items-center gap-2 rounded-[8px] border border-slate-700 bg-slate-950 px-3 text-sm font-semibold text-slate-200"
+                >
+                  <RefreshCw className="size-4" />
+                  Reload
+                </button>
+                <button
+                  type="button"
+                  onClick={() => postPreviewAction("open")}
+                  className="inline-flex min-h-9 items-center gap-2 rounded-[8px] bg-cyan-300 px-3 text-sm font-semibold text-slate-950"
+                >
+                  <Play className="size-4" />
+                  Welcome
+                </button>
+                <button
+                  type="button"
+                  onClick={() => postPreviewAction("form")}
+                  className="inline-flex min-h-9 items-center rounded-[8px] border border-cyan-400/35 bg-cyan-400/10 px-3 text-sm font-semibold text-cyan-200"
+                >
+                  Form
+                </button>
+                <button
+                  type="button"
+                  onClick={() => postPreviewAction("success")}
+                  className="inline-flex min-h-9 items-center rounded-[8px] border border-emerald-400/35 bg-emerald-400/10 px-3 text-sm font-semibold text-emerald-200"
+                >
+                  Success
+                </button>
+              </div>
+            </div>
+            <iframe
+              key={previewKey}
+              id="sandbox-preview"
+              title="BugDrop sandbox preview"
+              sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
+              srcDoc={iframeHtml}
+              className="mt-4 h-[720px] w-full rounded-[8px] border border-slate-700 bg-white max-sm:h-[620px]"
+            />
+          </div>
+
+          <section className="rounded-[8px] border border-slate-800 bg-slate-950/45 p-4">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-slate-100">
+                  <Code2 className="size-4 text-emerald-300" />
+                  Install workspace
+                </h2>
+                <p className="mt-1 text-sm text-slate-400">
+                  Switch between the production artifact, temporary preview, and agent handoff.
+                </p>
+              </div>
+              <CopyButton value={activeOutput} />
+            </div>
+
+            <div className="mt-4 flex flex-wrap gap-2">
+              <OutputTabButton
+                active={outputTab === "script"}
+                onClick={() => selectOutputTab("script")}
+                icon={<FileCode2 className="size-4" />}
+              >
+                Production script
+              </OutputTabButton>
+              <OutputTabButton
+                active={outputTab === "preview"}
+                onClick={() => selectOutputTab("preview")}
+                icon={<ExternalLink className="size-4" />}
+              >
+                Preview snippet
+              </OutputTabButton>
+              <OutputTabButton
+                active={outputTab === "agent"}
+                onClick={() => selectOutputTab("agent")}
+                icon={<Bot className="size-4" />}
+              >
+                Agent prompt
+              </OutputTabButton>
+            </div>
+
+            <pre className="mt-4 max-h-72 overflow-auto rounded-[8px] bg-[#050914] p-4 text-xs leading-5 text-slate-100">
+              <code>{activeOutput}</code>
+            </pre>
+
+            {outputTab === "preview" ? (
+              <div className="mt-3 grid gap-2 rounded-[8px] border border-slate-800 bg-slate-950/55 p-3">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <p className="text-sm text-slate-400">
+                    Bookmarklet version for repeated own-site previews.
+                  </p>
+                  <CopyButton value={bookmarklet} label="Copy bookmarklet" />
+                </div>
+              </div>
+            ) : null}
+          </section>
+        </main>
+
+        <aside className="grid max-h-[calc(100vh-2rem)] content-start gap-4 overflow-auto rounded-[8px] border border-slate-800 bg-slate-950/55 p-4">
+          <section className="grid gap-3">
+            <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-slate-100">
+              <Settings2 className="size-4 text-cyan-300" />
+              Configuration
+            </h2>
+            <Field label="GitHub repository">
+              <TextInput
+                value={config.repo}
+                onChange={(value) => update("repo", value)}
+                placeholder="owner/repo"
+              />
+            </Field>
+            <Field label="Screenshot mode">
+              <SelectInput
+                value={config.screenshot}
+                onChange={(value) => update("screenshot", value as SandboxConfig["screenshot"])}
+              >
+                <option value="optional">Optional: include or skip</option>
+                <option value="auto">Auto: attach without review</option>
+                <option value="required">Required before submit</option>
+              </SelectInput>
+            </Field>
+            <Field label="Welcome screen">
+              <SelectInput
+                value={config.welcome}
+                onChange={(value) => update("welcome", value as SandboxConfig["welcome"])}
+              >
+                <option value="once">Once per browser</option>
+                <option value="always">Always show</option>
+                <option value="never">Skip welcome</option>
+              </SelectInput>
+            </Field>
+            <div className="grid grid-cols-2 gap-x-4 gap-y-2">
+              <Checkbox
+                label="Show name"
+                checked={config.showName}
+                onChange={(value) => update("showName", value)}
+              />
+              <Checkbox
+                label="Require name"
+                checked={config.requireName}
+                onChange={(value) => update("requireName", value)}
+              />
+              <Checkbox
+                label="Show email"
+                checked={config.showEmail}
+                onChange={(value) => update("showEmail", value)}
+              />
+              <Checkbox
+                label="Require email"
+                checked={config.requireEmail}
+                onChange={(value) => update("requireEmail", value)}
+              />
+            </div>
+          </section>
+
+          <section className="grid gap-3 border-t border-slate-800 pt-4">
+            <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-slate-100">
+              <Send className="size-4 text-emerald-300" />
+              Launcher
+            </h2>
+            <Field label="Button label">
+              <TextInput value={config.label} onChange={(value) => update("label", value)} />
+            </Field>
+            <Field label="Position">
+              <SelectInput
+                value={config.position}
+                onChange={(value) => update("position", value as SandboxConfig["position"])}
+              >
+                <option value="bottom-right">Bottom right</option>
+                <option value="bottom-left">Bottom left</option>
+              </SelectInput>
+            </Field>
+            <div className="grid gap-2">
+              <Checkbox
+                label="Show floating button"
+                checked={config.showButton}
+                onChange={(value) => update("showButton", value)}
+              />
+              <Checkbox
+                label="Dismissible"
+                checked={config.buttonDismissible}
+                onChange={(value) => update("buttonDismissible", value)}
+              />
+              <Checkbox
+                label="Show restore tab"
+                checked={config.showRestore}
+                onChange={(value) => update("showRestore", value)}
+              />
+            </div>
+          </section>
+
+          <section className="grid gap-3 border-t border-slate-800 pt-4">
+            <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.14em] text-slate-100">
+              <Sparkles className="size-4 text-cyan-300" />
+              Styling
+            </h2>
+            <Field label="Theme">
+              <SelectInput
+                value={config.theme}
+                onChange={(value) => update("theme", value as SandboxConfig["theme"])}
+              >
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+                <option value="auto">Auto</option>
+              </SelectInput>
+            </Field>
+            <div className="grid grid-cols-2 gap-3">
+              <Field label="Accent">
+                <TextInput value={config.color} onChange={(value) => update("color", value)} />
+              </Field>
+              <Field label="Radius">
+                <TextInput value={config.radius} onChange={(value) => update("radius", value)} />
+              </Field>
+              <Field label="Background">
+                <TextInput value={config.bg} onChange={(value) => update("bg", value)} />
+              </Field>
+              <Field label="Text">
+                <TextInput value={config.text} onChange={(value) => update("text", value)} />
+              </Field>
+              <Field label="Border width">
+                <TextInput
+                  value={config.borderWidth}
+                  onChange={(value) => update("borderWidth", value)}
+                />
+              </Field>
+              <Field label="Border color">
+                <TextInput
+                  value={config.borderColor}
+                  onChange={(value) => update("borderColor", value)}
+                />
+              </Field>
+            </div>
+            <Field label="Shadow">
+              <TextInput value={config.shadow} onChange={(value) => update("shadow", value)} />
+            </Field>
+          </section>
+        </aside>
+      </section>
+    </div>
+  );
+}
diff --git a/src/content/use-cases/client-website-feedback-tool.mdx b/src/content/use-cases/client-website-feedback-tool.mdx
new file mode 100644
index 0000000..70cb1f8
--- /dev/null
+++ b/src/content/use-cases/client-website-feedback-tool.mdx
@@ -0,0 +1,27 @@
+# Client Website Feedback Tool
+
+BugDrop is a client website feedback tool for agencies, freelancers, and product teams that need structured review notes during design QA, staging review, and launch prep. Clients can report issues from the page they are reviewing without needing a GitHub account.
+
+## The Client Review Problem
+
+Client feedback often arrives as screenshots in email threads, comments in documents, chat messages, or vague notes like "the homepage looks odd on my phone." Those reports are hard to track and harder to convert into developer-ready tasks.
+
+BugDrop turns client feedback into GitHub Issues with screenshots, annotations, page URLs, browser metadata, and labels. Developers get a task they can reproduce and close.
+
+## Useful During
+
+- Staging site review
+- Pre-launch QA
+- Design implementation review
+- Content and copy review
+- Post-launch bug collection
+
+## No GitHub Account Required
+
+Clients should not need to understand your repository, issue templates, or triage workflow. They use the feedback widget on the website, and BugDrop creates the GitHub Issue behind the scenes.
+
+## Keep Feedback Close to Delivery
+
+Once the issue is in GitHub, your team can assign it, label it, link it to a pull request, discuss the fix, and close it when shipped. The client gets a simple reporting experience; the team gets a normal engineering workflow.
+
+Start with the [installation guide](/docs/installation) and review [configuration](/docs/configuration) for labels, widget placement, screenshots, and submitter fields.
diff --git a/src/content/use-cases/free-website-feedback-widget.mdx b/src/content/use-cases/free-website-feedback-widget.mdx
new file mode 100644
index 0000000..253461d
--- /dev/null
+++ b/src/content/use-cases/free-website-feedback-widget.mdx
@@ -0,0 +1,29 @@
+# Free Website Feedback Widget
+
+BugDrop gives teams a free website feedback widget that creates GitHub Issues instead of locking reports inside a hosted feedback dashboard. It is built for teams that want quick setup, screenshot context, and a workflow developers already use.
+
+## When a Free Feedback Widget Is Enough
+
+Many early-stage products, open-source projects, agencies, and internal teams do not need a full customer-feedback suite. They need a button that lets someone report a bug, capture the page state, and route the issue to the right repository.
+
+BugDrop is a strong fit when your goal is:
+
+- Collect bug reports from a public website
+- Let users submit feedback without creating an account
+- Capture screenshots and browser metadata
+- Keep triage in GitHub Issues
+- Avoid paying for another feedback inbox before the workflow is proven
+
+## What You Get
+
+BugDrop reports can include screenshots, annotations, redactions, page URLs, viewport size, browser, operating system, labels, and category fields. Developers see the report in GitHub and can assign, comment, label, prioritize, and close it in the normal issue workflow.
+
+## How It Compares to Paid Tools
+
+Tools like Userback, Marker.io, BugHerd, and Usersnap are useful when you need hosted dashboards, account management, team workflows, and broad integrations. BugDrop is narrower: it focuses on fast GitHub-native website feedback with screenshot context.
+
+That narrower scope is the point. If your team already lives in GitHub, a free widget that creates useful issues can be more efficient than adopting another product.
+
+## Start Free
+
+Install BugDrop from GitHub Marketplace, add the widget script, and test a report on a staging page. The [getting started guide](/docs/getting-started) covers the fastest path.
diff --git a/src/content/use-cases/open-source-feedback-widget.mdx b/src/content/use-cases/open-source-feedback-widget.mdx
new file mode 100644
index 0000000..9a7cca6
--- /dev/null
+++ b/src/content/use-cases/open-source-feedback-widget.mdx
@@ -0,0 +1,25 @@
+# Open-Source Feedback Widget
+
+BugDrop is an open-source feedback widget for teams that want to inspect, adapt, and self-host their feedback workflow. It is designed around GitHub Issues, so reports land where maintainers already track bugs and feature requests.
+
+## Why Open Source Matters for Feedback
+
+Feedback widgets sit on public websites and sometimes inside authenticated apps. Teams should be able to understand what the widget loads, what it captures, where data goes, and how screenshots are handled. An open-source widget makes that review possible.
+
+Open source is also useful when your workflow is specific. You may want custom labels, masking rules, issue templates, styling, or deployment constraints that do not fit a generic hosted tool.
+
+## Best Fits
+
+- Open-source projects that want community reports in GitHub
+- Developer tools with public docs and examples
+- Internal teams that need auditability
+- Agencies that want a repeatable client feedback workflow
+- Startups that want to avoid feedback-tool lock-in
+
+## GitHub Issues as the Feedback Backend
+
+BugDrop uses GitHub Issues as the system of record for feedback. That means maintainers can use labels, projects, assignees, milestones, comments, notifications, and automation without syncing from another dashboard.
+
+## Add It to Your Project
+
+Install the GitHub App, add the widget script, and configure labels, screenshots, masking, and submitter fields. The [self-hosting guide](/docs/self-hosting) covers teams that want more control over deployment.
diff --git a/src/content/use-cases/screenshot-feedback-widget.mdx b/src/content/use-cases/screenshot-feedback-widget.mdx
new file mode 100644
index 0000000..5ac178f
--- /dev/null
+++ b/src/content/use-cases/screenshot-feedback-widget.mdx
@@ -0,0 +1,30 @@
+# Screenshot Feedback Widget
+
+BugDrop is a screenshot feedback widget for teams that need users to show the problem, not just describe it. A report can include the current page screenshot, annotations, redacted regions, the page URL, and browser metadata.
+
+## Why Screenshots Matter
+
+Website bugs are often visual: clipped text, broken spacing, missing images, wrong colors, hidden buttons, mobile overflow, dark-mode issues, or browser-specific rendering problems. A written report like "the page looks broken" rarely gives developers enough context.
+
+A screenshot turns the report into a concrete artifact. An annotation points to the exact area, and metadata explains the environment where it happened.
+
+## BugDrop Screenshot Reports Include
+
+- Page screenshot
+- User annotation
+- Manual redaction before submit
+- Developer-controlled masking with `data-bugdrop-mask`
+- Page URL
+- Viewport size
+- Browser and operating system
+- Feedback category and labels
+
+## Privacy Controls
+
+Screenshots can expose private information. BugDrop supports user redaction and developer-defined masking for sensitive elements. Password and payment fields should be treated carefully, and teams should review [screenshot masking](/docs/security#screenshot-masking) before deploying the widget to authenticated product pages.
+
+## GitHub-Native Output
+
+Instead of sending screenshots to a separate dashboard, BugDrop creates a GitHub Issue. That keeps visual bug reports close to the code, release process, assignees, labels, and comments developers already use.
+
+Start with [installation](/docs/installation), then configure screenshot behavior in [configuration](/docs/configuration).
diff --git a/src/content/use-cases/website-feedback-widget.mdx b/src/content/use-cases/website-feedback-widget.mdx
new file mode 100644
index 0000000..280ee94
--- /dev/null
+++ b/src/content/use-cases/website-feedback-widget.mdx
@@ -0,0 +1,25 @@
+# Website Feedback Widget
+
+BugDrop is a website feedback widget for teams that want actionable reports without asking users to leave the page. Visitors click the widget, describe what they saw, attach or annotate a screenshot, and BugDrop sends the report to GitHub Issues with the page URL and browser context.
+
+## What Makes a Feedback Widget Useful?
+
+A feedback widget should reduce friction for the reporter and reduce ambiguity for the developer. Text-only reports often miss the page state, viewport, browser, and reproduction context. BugDrop captures those details at submit time so the issue starts with enough information to triage.
+
+## Best-Fit Workflows
+
+- Marketing pages where layout or copy issues affect conversion
+- Documentation sites where examples, tabs, and navigation need quick feedback
+- SaaS apps where users can report broken UI states from inside the product
+- Internal tools where teammates need a low-friction way to report bugs
+- Client review sites where non-technical stakeholders should not need GitHub accounts
+
+## Why Send Feedback to GitHub Issues?
+
+Most development teams already use GitHub for triage, assignment, labels, discussion, and release tracking. A separate feedback inbox creates another place to check. BugDrop keeps website feedback in the same workflow as engineering work.
+
+Each report can include a description, screenshot, annotations, feedback type, page URL, browser, operating system, viewport size, and labels. That makes the GitHub Issue useful immediately.
+
+## Add It to a Site
+
+Install the GitHub App, add the script tag from the [installation guide](/docs/installation), and configure the widget with [configuration options](/docs/configuration). For sensitive pages, review [security and screenshot masking](/docs/security) before launch.
diff --git a/src/lib/links.ts b/src/lib/links.ts
index b42f682..77a04fb 100644
--- a/src/lib/links.ts
+++ b/src/lib/links.ts
@@ -18,6 +18,7 @@ export const DEMO_PATH = "/demo";
 
 export const DEMO_URL = "https://bugdrop-widget-test.vercel.app";
 
-export const WIDGET_URL = "https://bugdrop.neonwatty.workers.dev/widget.js";
+export const WIDGET_URL =
+  process.env.NEXT_PUBLIC_BUGDROP_WIDGET_URL ?? "https://bugdrop.neonwatty.workers.dev/widget.js";
 
 export const SAMPLE_DEMO_REPO = "mean-weasel/bugdrop-widget-test";
diff --git a/src/lib/seo.ts b/src/lib/seo.ts
index 8913e64..c44db40 100644
--- a/src/lib/seo.ts
+++ b/src/lib/seo.ts
@@ -11,10 +11,10 @@ import {
 
 export const SITE_URL = "https://bugdrop.dev";
 export const SITE_NAME = "BugDrop";
-export const SITE_UPDATED = "2026-05-11";
+export const SITE_UPDATED = "2026-05-13";
 
 export const homeDescription =
-  "Free, open source website feedback widget by mean-weasel. Users report bugs with screenshots and annotations — issues are created in GitHub automatically. One script tag, zero config.";
+  "Free, open-source website feedback widget for GitHub Issues. Capture bug reports with screenshots, annotations, browser metadata, and privacy controls from one script tag.";
 
 export function absoluteUrl(path = "/") {
   if (path.startsWith("https://")) return path;
@@ -95,11 +95,6 @@ export function softwareApplicationSchema() {
     url: SITE_URL,
     applicationCategory: "DeveloperApplication",
     operatingSystem: "Web",
-    offers: {
-      "@type": "Offer",
-      price: "0",
-      priceCurrency: "USD",
-    },
     author: {
       "@type": "Organization",
       name: "mean-weasel",
@@ -126,6 +121,13 @@ export function softwareApplicationSchema() {
       GITHUB_PROFILE_URL,
     ],
     award: "Product Hunt #6 Product of the Day, May 9, 2026",
+    offers: {
+      "@type": "Offer",
+      price: "0",
+      priceCurrency: "USD",
+      availability: "https://schema.org/InStock",
+      url: MARKETPLACE_URL,
+    },
     featureList: [
       "Screenshot capture",
       "Annotation tools",
@@ -133,6 +135,8 @@ export function softwareApplicationSchema() {
       "Developer-configured privacy masking",
       "Automatic password and credit-card field masking",
       "Automatic system info",
+      "Browser metadata",
+      "GitHub Marketplace installation",
       "GitHub issue creation",
       "Fully stylable widget",
       "Shadow DOM isolation",
diff --git a/src/lib/use-cases-nav.ts b/src/lib/use-cases-nav.ts
index 1851aee..0ff0223 100644
--- a/src/lib/use-cases-nav.ts
+++ b/src/lib/use-cases-nav.ts
@@ -34,6 +34,27 @@ export const useCasesNav: UseCaseLink[] = [
       "Collect website feedback as structured GitHub Issues with screenshots, labels, browser info, and page URLs.",
     icon: "📋",
   },
+  {
+    slug: "website-feedback-widget",
+    title: "Website Feedback Widget",
+    description:
+      "Add a lightweight website feedback widget that sends screenshots, page context, and user notes to GitHub Issues.",
+    icon: "💬",
+  },
+  {
+    slug: "free-website-feedback-widget",
+    title: "Free Website Feedback Widget",
+    description:
+      "Use a free feedback widget for public sites, docs, SaaS apps, and internal tools without adding another inbox.",
+    icon: "Free",
+  },
+  {
+    slug: "screenshot-feedback-widget",
+    title: "Screenshot Feedback Widget",
+    description:
+      "Capture screenshots, annotations, browser metadata, and page URLs when users report UI bugs.",
+    icon: "📸",
+  },
   {
     slug: "visual-bug-reporting",
     title: "Visual Bug Reporting",
@@ -48,4 +69,18 @@ export const useCasesNav: UseCaseLink[] = [
       "Add BugDrop to a Next.js site with one script tag and send user feedback directly to GitHub Issues.",
     icon: "▲",
   },
+  {
+    slug: "open-source-feedback-widget",
+    title: "Open-Source Feedback Widget",
+    description:
+      "Choose an open-source feedback widget that can be inspected, self-hosted, and adapted to your GitHub workflow.",
+    icon: "OSS",
+  },
+  {
+    slug: "client-website-feedback-tool",
+    title: "Client Website Feedback Tool",
+    description:
+      "Give clients a simple way to report website issues with screenshots during review, QA, and launch prep.",
+    icon: "QA",
+  },
 ];
