SupaFeedback
Get started

Widget Installation Guide

Learn how to integrate the SupaFeedback widget into your website or application.

Quick Start

Get up and running in under 5 minutes with a simple script tag. No complex setup required.

Framework Support

Works with React, Vue, Next.js, WordPress, and any site that can load a script tag.

General Installation

Get Your Project ID

First, you need the unique ID for the project you want to embed.

  • Navigate to the Projects page in your dashboard.
  • Select the project you wish to install.
  • Open the Setup page for that project.
  • Your unique Project ID will be displayed there. Copy it.

Add the Script Tag

Paste the SupaFeedback script near the end of your HTML, before the closing body tag.

  • Include <script src="https://www.supafeedback.com/widget.js?pid=YOUR_PROJECT_ID" defer></script>
  • Replace YOUR_PROJECT_ID with the ID you copied.
  • The script loads once and attaches click handlers automatically.

Add a Trigger Button

Any element with the data-sf attribute opens the feedback widget.

  • Add data-sf to a button or link.
  • Example: <button data-sf>Give Feedback</button>
  • Click the element to open the widget and send feedback to your inbox.

User Identification

Attach a customer email to each submission so you can reply from the inbox.

HTML
<button
  data-sf
  data-sf-email="user@example.com"
>
  Give Feedback
</button>

You can also set data-sf-email on the <html> element for a site-wide default.

Programmatic Triggers

Open the widget from your own UI without relying on a data-sf click.

JavaScript
// Open the widget (optionally pass a trigger element)
window.SupaFeedback.open();

// Close the widget
window.SupaFeedback.close();

Widget Control API

After the script loads, window.SupaFeedback exposes a small API:

MethodDescription
open(el?)Opens the feedback dialog. Pass an optional trigger element for positioning and email lookup.
close()Closes the feedback dialog.

Framework Support

SupaFeedback is a plain script tag, so it works in any stack. Drop the snippet into your root layout or template:

  • Next.js / React — add the script in your root layout and put data-sf on any button.
  • Vue — load the script in index.html and bind the attribute on your trigger.
  • WordPress / HTML — paste the snippet before </body>.