Install the widget

The feedback widget is a small script you drop onto any website. It adds a corner button that opens a form so your visitors can send feedback, feature requests, and bug reports — and everything lands in your dashboard. Pick whichever install method matches your stack below.

Before you start

You need two things from the dashboard:

1Your site key — a publishable key that looks like fb_…. Find it in your site’s Setup tab. It is designed to live in public client-side code, so it is safe to commit and share.
2An approved domain. The widget is secure by default: it only accepts submissions from domains you’ve approved. Add the site’s domain under Setup → Approved domains before going live, or submissions will be rejected with a 403. (Local localhost testing is allowed automatically.)

Option A — Any website (HTML)

Paste this just before the closing </body> tag, replacing the key with your own. Works on any site — plain HTML, WordPress, Webflow, Shopify, anything that lets you add a script.

<script>
  window.FeedbackConfig = { apiKey: 'fb_your_key_here' };
</script>
<script src="https://feedback.latentedge.io/widget.js" defer></script>

That’s the whole install. A Feedback button appears in the corner automatically.

Option B — Next.js / React

For a React app, load the script from a small client component instead of hand-editing HTML. This is the recommended pattern for the fleet’s Next.js sites.

1. Add your key as a public env var

# frontend/.env.production  (NEXT_PUBLIC_* values are public — safe to commit)
NEXT_PUBLIC_FEEDBACK_API_KEY=fb_your_key_here

2. Create components/FeedbackWidget.tsx

'use client';
import { useEffect } from 'react';

declare global {
  interface Window {
    FeedbackConfig?: { apiKey: string };
  }
}

const FEEDBACK_KEY = process.env.NEXT_PUBLIC_FEEDBACK_API_KEY;
const WIDGET_SRC = 'https://feedback.latentedge.io/widget.js';

// Loads the LatentEdge feedback widget — a corner button that opens a form for
// feedback, feature requests, and bug reports. The site key is publishable (it
// is designed to live in client-side JS), and the widget's worker URL defaults
// to feedback.latentedge.io, so only the apiKey is needed.
export default function FeedbackWidget() {
  useEffect(() => {
    if (!FEEDBACK_KEY) return;
    if (document.getElementById('latentedge-feedback')) return;
    window.FeedbackConfig = { apiKey: FEEDBACK_KEY };
    const script = document.createElement('script');
    script.id = 'latentedge-feedback';
    script.src = WIDGET_SRC;
    script.defer = true;
    document.body.appendChild(script);
  }, []);
  return null;
}

3. Render it once in your root layout

import FeedbackWidget from '@/components/FeedbackWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  );
}

How visitors open the widget

There are three ways, and they can be combined:

1. The built-in floating button (default)

Once the script loads, a button appears in a corner of the page. Choose which corner — or hide it entirely — under Setup → Position in the dashboard.

2. Your own button (bring your own trigger)

Add data-feedback-open to any element — a nav link, a footer item, a menu entry — and clicking it opens the widget. Use this with Position set to Hidden if you only want your own trigger and no floating button.

<button data-feedback-open>Send feedback</button>

3. From your own code

Open or close the widget programmatically — for example from a keyboard shortcut or after a user finishes a task.

// Open or close the widget from anywhere in your own code:
window.FeedbackWidget.open();
window.FeedbackWidget.close();

Theming & appearance

By default the widget’s theme is set to Auto, so it matches the host site’s light or dark theme automatically and re-checks each time it opens. You can pin it to Light or Dark, and change the colors, button text, position, and which feedback types are offered — all from Setup → Widget appearance. These are server-side settings, so they update on the next page load without any code change.

Configuration reference

The only thing you set in code is window.FeedbackConfig:

apiKey (required) — your publishable fb_… site key.
apiUrl (optional) — defaults to https://feedback.latentedge.io. Only set this if you self-host the worker.

Everything else (position, theme, colors, button text, enabled feedback types) is controlled from the dashboard so it stays in sync across every site without redeploying.

Connect an AI agent (MCP)

New

The widget above collects feedback. To work with it, connect our Model Context Protocol server so Claude or any MCP-compatible agent can list, search, and summarize your feedback on demand. It runs over Streamable HTTP and needs just one thing: a read token.

1. Generate a read token

In your site’s Setup → Data API section, generate a secret token (it looks like sk_…). Unlike the publishable fb_… widget key, this one is a secret — keep it out of client-side code.

2a. Connect from Claude Code (CLI)

claude mcp add --transport http feedback \
  https://feedback.latentedge.io/api/v1/mcp \
  --header "Authorization: Bearer sk_your_read_token"

2b. Or add it to any MCP client’s config

{
  "mcpServers": {
    "feedback": {
      "type": "http",
      "url": "https://feedback.latentedge.io/api/v1/mcp",
      "headers": { "Authorization": "Bearer sk_your_read_token" }
    }
  }
}

That’s it. The agent gets three read-only tools — list_feedback, search_feedback, and get_feedback_stats — so you can ask things like “what are people saying about onboarding?” Your Setup tab has a one-click copy of this config with your token already filled in. Full details are in the MCP & API docs.

Troubleshooting

The button never appears. The script didn’t load or apiKey is missing/mistyped. Open the browser console and confirm widget.js loaded and window.FeedbackConfig.apiKey is set.
Submissions fail with 403. The page’s domain isn’t approved. Add it under Setup → Approved domains in the dashboard.
Wrong colors or theme. Adjust them under Setup → Widget appearance; changes apply on the next page load.

Need a hand? Get in touch or head to your dashboard.