Embedded Support Portal

// Your server route — the integration key never reaches the browser
const response = await fetch(
  "https://mcpfeedback.com/api/portal/v1/session",
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.MCPFEEDBACK_PORTAL_SECRET}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      external_user_id: user.id,
      email: user.verifiedEmail,
      display_name: user.name,
      organization: {
        external_id: workspace.id,
        name: workspace.name,
      },
      access: canViewWorkspaceRequests
        ? "organization_admin"
        : "member",
      origin: request.headers.get("origin"),
    }),
  },
);

if (!response.ok) {
  return Response.json(
    { error: "Support is temporarily unavailable" },
    { status: 503 },
  );
}

return Response.json(await response.json());

<div id="support-portal"></div>

<script>
  const getSessionToken = async () => {
    const response = await fetch("/api/support/session", { method: "POST" });
    if (!response.ok) throw new Error("Support unavailable");
    return (await response.json()).token;
  };

  window.MCPFeedbackSessionProvider = getSessionToken;

  const widget = document.createElement("script");
  widget.src = "https://mcpfeedback.com/widget/v1.js";
  widget.dataset.siteKey = "YOUR_SITE_KEY";
  widget.async = true;
  document.body.appendChild(widget);

  const portal = document.createElement("script");
  portal.src = "https://mcpfeedback.com/portal.js";
  portal.async = true;
  portal.addEventListener("load", () => {
    MCPFeedbackPortal.mount(document.querySelector("#support-portal"), {
      siteKey: "YOUR_SITE_KEY",
      getSessionToken,
    });
  });
  document.head.appendChild(portal);
</script>

import {
  McpFeedback,
  McpFeedbackPortal,
} from "@mcpfeedback/react";

const getSessionToken = async () => {
  const response = await fetch("/api/support/session", {
    method: "POST",
  });
  if (!response.ok) throw new Error("Support unavailable");
  return (await response.json()).token;
};

export function SupportExperience() {
  return (
    <>
      <McpFeedback
        siteKey="YOUR_SITE_KEY"
        getSessionToken={getSessionToken}
      />
      <McpFeedbackPortal
        siteKey="YOUR_SITE_KEY"
        getSessionToken={getSessionToken}
        className="min-h-[520px]"
      />
    </>
  );
}