Build an Embeddable Widget SDK

// src/loader.ts -- the script customers load; built to public/sdk.js
const WIDGET_URL = "https://widget.feedback.app";

interface FeedbackConfig {
  projectId: string;
  position?: "bottom-right" | "bottom-left";
  theme?: "light" | "dark" | "auto";
  primaryColor?: string;
  userId?: string;
  userHash?: string; // HMAC-SHA256(userId), computed on the customer's server
  email?: string;
  onSubmit?: (feedback: unknown) => void;
}

class FeedbackWidget {
  private iframe: HTMLIFrameElement | null = null;
  private trigger = document.createElement("button");
  private listener = (e: MessageEvent) => this.onMessage(e);

  constructor(private config: FeedbackConfig) {
    const side = config.position === "bottom-left" ? "left" : "right";
    this.trigger.setAttribute("aria-label", "Send feedback");
    this.trigger.textContent = "?";
    this.trigger.style.cssText = `position:fixed;${side}:20px;bottom:20px;z-index:2147483647;` +
      `width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;color:#fff;font:600 24px system-ui;` +
      `background:${config.primaryColor ?? "#3B82F6"};box-shadow:0 4px 12px rgba(0,0,0,.15)`;
    this.trigger.onclick = () => (this.iframe ? this.close() : this.open());
    document.body.appendChild(this.trigger);
    window.addEventListener("message", this.listener);
  }

  open(): void {
    if (this.iframe) return;
    const c = this.config;
    const side = c.position === "bottom-left" ? "left" : "right";
    const f = document.createElement("iframe");
    f.title = "Feedback";
    // Without allow-same-origin the widget's origin is "null" and it cannot call its own API.
    // This is safe because the iframe is cross-origin to the host page.
    f.sandbox.add("allow-scripts", "allow-forms", "allow-same-origin");
    f.style.cssText = `position:fixed;${side}:20px;bottom:90px;z-index:2147483646;border:0;` +
      `border-radius:12px;width:380px;height:500px;max-width:calc(100vw - 40px);background:#fff;` +
      `box-shadow:0 8px 30px rgba(0,0,0,.12)`;
    // Only non-sensitive options go in the URL; identity is sent by postMessage after the handshake.
    f.src = `${WIDGET_URL}/widget?` + new URLSearchParams({
      projectId: c.projectId, theme: c.theme ?? "auto", color: c.primaryColor ?? "#3B82F6",
    });
    document.body.appendChild(f);
    this.iframe = f;
  }

  close(): void { this.iframe?.remove(); this.iframe = null; }

  identify(userId: string, userHash: string, email?: string): void {
    Object.assign(this.config, { userId, userHash, email });
    this.sendIdentity();
  }

  destroy(): void {
    this.close();
    this.trigger.remove();
    window.removeEventListener("message", this.listener);
  }

  private sendIdentity(): void {
    const { userId, userHash, email } = this.config;
    if (userId) this.iframe?.contentWindow?.postMessage(
      { type: "IDENTIFY_USER", userId, userHash, email }, WIDGET_URL);
  }

  private onMessage(e: MessageEvent): void {
    // Check both the origin and that the message came from our own iframe
    if (e.origin !== WIDGET_URL || e.source !== this.iframe?.contentWindow) return;
    switch (e.data?.type) {
      case "WIDGET_READY": this.sendIdentity(); break;
      case "FEEDBACK_SUBMITTED":
        this.config.onSubmit?.(e.data.feedback);
        setTimeout(() => this.close(), 2000);
        break;
      case "WIDGET_CLOSE": this.close(); break;
    }
  }
}

(window as any).FeedbackWidget = FeedbackWidget;

// Auto-init from data attributes: <script src=".../sdk.js" data-project-id="...">
const el = document.currentScript as HTMLScriptElement | null;
const init = () => {
  (window as any).__feedbackWidget = new FeedbackWidget({
    projectId: el!.dataset.projectId!,
    position: el!.dataset.position as FeedbackConfig["position"],
    theme: el!.dataset.theme as FeedbackConfig["theme"],
    primaryColor: el!.dataset.color,
  });
};
if (el?.dataset.projectId) { // an async script in <head> can run before <body> exists
  if (document.body) init(); else addEventListener("DOMContentLoaded", init);
}

<!-- Simple: one script tag -->
<script src="https://widget.feedback.app/sdk.js"
        data-project-id="proj_abc123" data-position="bottom-right"
        data-theme="auto" data-color="#6366F1" async></script>

<!-- Advanced: programmatic control -->
<script src="https://widget.feedback.app/sdk.js" async></script>
<script>
  window.addEventListener('load', () => {
    const widget = new FeedbackWidget({
      projectId: 'proj_abc123',
      onSubmit: (feedback) => analytics.track('feedback_submitted', feedback),
    });
    // userHash comes from the customer's server: HMAC-SHA256 of the user ID, hex-encoded
    widget.identify(currentUser.id, currentUser.feedbackHash, currentUser.email);
  });
</script>

// src/widget.ts -- runs inside the iframe, built to public/widget.js
const params = new URLSearchParams(location.search);
let identity: { userId?: string; userHash?: string; email?: string } = {};

// Only the embedding page (our direct parent) may send us identity
addEventListener("message", (e) => {
  if (e.source === parent && e.data?.type === "IDENTIFY_USER") {
    const { userId, userHash, email } = e.data;
    identity = { userId, userHash, email };
  }
});

document.querySelector("form")!.addEventListener("submit", async (e) => {
  e.preventDefault();
  const message = new FormData(e.target as HTMLFormElement).get("message");
  const res = await fetch("/api/feedback", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ projectId: params.get("projectId"), message, ...identity }),
  });
  // The parent's origin is unknown here; frame-ancestors already limits who can embed us
  if (res.ok) parent.postMessage({ type: "FEEDBACK_SUBMITTED", feedback: { message } }, "*");
});

parent.postMessage({ type: "WIDGET_READY" }, "*");

// src/server.ts -- serves the widget page and receives feedback
import { createHmac, timingSafeEqual } from "node:crypto";
import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { serveStatic } from "@hono/node-server/serve-static";
import { zValidator } from "@hono/zod-validator";
import { z } from "zod";

// Replace with your database: allowed customer origins and identity secret per project
const projects = new Map([
  ["proj_abc123", { origins: ["https://app.acme.example"], secret: process.env.ACME_IDENTITY_SECRET ?? "dev-only" }],
]);

const feedbackSchema = z.object({
  projectId: z.string().min(1),
  message: z.string().trim().min(1).max(5000),
  rating: z.number().int().min(1).max(5).optional(),
  userId: z.string().max(200).optional(),
  userHash: z.string().max(128).optional(),
  email: z.email().optional(),
  pageUrl: z.url().optional(),
});

const app = new Hono();

// Only the customer's own sites may frame the widget
app.get("/widget", (c) => {
  const project = projects.get(c.req.query("projectId") ?? "");
  if (!project) return c.text("Unknown project", 404);
  c.header("Content-Security-Policy", `frame-ancestors ${project.origins.join(" ")}`);
  return c.html(`<!doctype html><meta charset="utf-8"><title>Feedback</title>
<form id="f"><textarea name="message" required maxlength="5000"></textarea><button>Send</button></form>
<script type="module" src="/widget.js"></script>`); // widget.js: see Step 3
});

app.use("/*", serveStatic({ root: "./public" })); // sdk.js, widget.js

app.post("/api/feedback", zValidator("json", feedbackSchema), (c) => {
  const body = c.req.valid("json");
  const project = projects.get(body.projectId);
  if (!project) return c.json({ error: "unknown project" }, 404);

  // Trust a userId only if the customer's server signed it
  let verified = false;
  if (body.userId && body.userHash) {
    const want = createHmac("sha256", project.secret).update(body.userId).digest("hex");
    verified = want.length === body.userHash.length &&
      timingSafeEqual(Buffer.from(want), Buffer.from(body.userHash));
  }
  console.log("feedback", { ...body, userHash: undefined, verified });
  return c.json({ ok: true }, 201);
});

serve({ fetch: app.fetch, port: 8787, hostname: "127.0.0.1" });