IntegrationsWeb Widget

Web Widget

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

Quickstart

1

Create your site

Sign up at MCPFeedback and add your website domain in the dashboard under Sites. 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://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, and submit feedback. 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://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://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://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.

Lightweight

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

← All IntegrationsFlutter SDK →