Capture feedback in your own UI

// Your backend—for example, an Express route handler.
app.post("/give-feedback", async (req, res) => {
  const headers = {
    authorization: `Bearer ${process.env.GLEANFEED_API_KEY}`, // server-side only
    "content-type": "application/json",
  };
  // A delivery ID protects retries of this HTTP operation. Keep it distinct from
  // the source record ID below so source conflicts remain detectable.
  if (req.body.deliveryId) headers["idempotency-key"] = req.body.deliveryId;

  const r = await fetch("https://app.gleanfeed.com/api/v1/feedback", {
    method: "POST",
    headers,
    body: JSON.stringify({
      title: req.body.title,
      description: req.body.body,
      // Attribute it to the signed-in user so it powers "your requests" + status emails.
      submitter: { email: req.user.email, name: req.user.name, externalId: req.user.id },
      // Private source identity and triage context — never shown on the public portal.
      source: {
        kind: "custom_form",
        externalId: req.body.requestId,
        url: req.body.pageUrl,
        capturedAt: new Date().toISOString(),
        metadata: { plan: req.user.plan, appVersion: "4.2.0" },
      },
    }),
  });
  if (!r.ok) return res.status(502).json({ error: "Could not submit feedback." });
  res.json(await r.json());
});

<script src="https://cdn.gleanfeed.com/widget.js"></script>
<script>
  window.GleanFeed.init({
    workspace: "your-workspace-slug",
    workspaceId: "YOUR_WORKSPACE_ID",
  });

  // Sign the user in (server-signed HMAC — never sign in the browser).
  await window.GleanFeed.identify({
    userId: "user_123",
    email: "ada@acme.com",
    signature: SIGNATURE_FROM_YOUR_SERVER,
  });

  // Now wire your own button to submit.
  document.querySelector("#give-feedback").addEventListener("submit", async (e) => {
    e.preventDefault();
    const { id } = await window.GleanFeed.submitFeedback({
      title: e.target.title.value,
      body: e.target.body.value,
      sourceUrl: location.href,
      metadata: { plan: "pro", appVersion: "4.2.0" },
    });
    console.log("Submitted feedback", id);
  });
</script>

import { feedback } from "@gleanfeed/widget";

await feedback.submit(
  { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com", userToken },
  { title: "Dark mode please", body: "Would love a dark theme.", sourceUrl: location.href },
);

curl -X POST "https://app.gleanfeed.com/api/sdk/feedback" \
  -H "content-type: application/json" \
  -d '{
    "workspaceId": "YOUR_WORKSPACE_ID",
    "userToken": "SIGNED_USER_TOKEN",
    "title": "Dark mode please",
    "body": "Would love a dark theme.",
    "sourceUrl": "https://app.acme.com/settings",
    "metadata": { "plan": "pro" }
  }'

"use client";

import { useState } from "react";

export function FeedbackButton({ pageUrl = location.href }: { pageUrl?: string }) {
  const [state, setState] = useState<"idle" | "sending" | "done" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    setState("sending");
    // Your own endpoint — it adds the API key server-side and calls Glean Feed.
    const r = await fetch("/give-feedback", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ title: form.title.value, body: form.body.value, pageUrl }),
    });
    setState(r.ok ? "done" : "error");
  }

  if (state === "done") return <p>Thanks — we got your feedback.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="title" placeholder="Summary" required />
      <textarea name="body" placeholder="What's on your mind?" required />
      <button disabled={state === "sending"} type="submit">
        {state === "sending" ? "Sending…" : "Send feedback"}
      </button>
      {state === "error" && <p role="alert">Couldn't send that — try again.</p>}
    </form>
  );
}

"use client";

import { useState } from "react";
import { feedback } from "@gleanfeed/widget";

const config = { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com" };

export function FeedbackButton({ userToken }: { userToken: string }) {
  const [state, setState] = useState<"idle" | "sending" | "done" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    setState("sending");
    try {
      // The signed user token stands in for a key — safe to ship to the browser.
      await feedback.submit(
        { ...config, userToken },
        { title: form.title.value, body: form.body.value, sourceUrl: location.href },
      );
      setState("done");
    } catch {
      setState("error");
    }
  }

  if (state === "done") return <p>Thanks — we got your feedback.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="title" placeholder="Summary" required />
      <textarea name="body" placeholder="What's on your mind?" required />
      <button disabled={state === "sending"} type="submit">
        {state === "sending" ? "Sending…" : "Send feedback"}
      </button>
      {state === "error" && <p role="alert">Couldn't send that — try again.</p>}
    </form>
  );
}