IntegrationsWeb Widget

Web Widget

Add a feedback button to any website with a single script tag. Your users can capture screenshots, annotate them, select a feedback type, and submit without leaving the page.

Quickstart

1

Create your site

Sign up at MCPFeedback and add your website domain in the dashboard under Sites & Apps. You'll get a unique site key.

2

Add the script tag

Paste this single line before the closing </body> tag on your site. Replace YOUR_SITE_KEY with the key from your dashboard.

index.html
<script src="https://staging.mcpfeedback.com/widget.js" data-site-key="YOUR_SITE_KEY" async></script>
3

That's it

A floating feedback button appears on your site. Users click it to capture a screenshot, annotate it, choose a feedback type, and submit. All submissions show up in your dashboard.

Framework guides

The widget works everywhere — just load the script. Here are copy-paste examples for popular frameworks.

React

App.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://staging.mcpfeedback.com/widget.js';
    script.setAttribute('data-site-key', 'YOUR_SITE_KEY');
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);

  return <div>{/* your app */}</div>;
}

Next.js

app/layout.tsx
// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://staging.mcpfeedback.com/widget.js"
          data-site-key="YOUR_SITE_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue

App.vue
<!-- App.vue -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://staging.mcpfeedback.com/widget.js';
  script.setAttribute('data-site-key', 'YOUR_SITE_KEY');
  script.async = true;
  document.body.appendChild(script);
});
</script>

Configuration

Customize the widget via data attributes on the script tag.

AttributeTypeDescription
data-site-key*stringYour unique site key from the dashboard.
data-position"bottom-right" | "bottom-left"Position of the floating button. Default: bottom-right.
data-colorstringAccent color for the widget button (hex). Default: #06b6d4.
data-textstringButton label text. Default: "Feedback".

How it works

Shadow DOM isolation

The widget runs inside a Shadow DOM so it never conflicts with your site's styles or scripts.

Screenshot capture

Uses html2canvas to capture the visible page. The widget itself is excluded from screenshots.

Annotation tools

Users can draw, highlight, add arrows, rectangles, and text on the screenshot before submitting.

Feedback type selector

A dropdown at the top of the form lets users categorize feedback as Bug Report, Feature Request, UX Issue, or General Comment. Defaults to General Comment.

Lightweight

Under 50KB gzipped. Loads asynchronously so it never blocks your page render.

Widget form fields

When a user opens the widget, the feedback form contains the following fields in order:

  1. Feedback Type — a dropdown to categorize the submission. Options: Bug Report, Feature Request, UX Issue, General Comment. Defaults to General Comment.
  2. Title — a short summary of the feedback.
  3. Description — detailed information about the issue or suggestion.
  4. Screenshot — an automatically captured and annotatable screenshot of the current page.
← All IntegrationsFlutter SDK →