DocsInstallation

Widget Installation Guide

Simple as adding Google Analytics

Quick Start

Add the FeedbackFlow widget to your website in under a minute. Just copy and paste the script tag before your closing </body> tag.

Installation Script
<script
  src="https://feedbackflow.cc/widget.js"
  data-widget-key="YOUR_WIDGET_KEY"
></script>

Replace YOUR_WIDGET_KEY with your actual widget key from the Settings page.

Where do I find my widget key?

Go to Settings → Widget and select your project. Your widget key starts with wk_.

Framework-Specific Installation

HTML / Vanilla JavaScript

The simplest installation method. Works with any website, CMS, or static HTML.

Add before </body>
<!-- FeedbackFlow Widget -->
<script
  src="https://feedbackflow.cc/widget.js"
  data-widget-key="YOUR_WIDGET_KEY"
  data-position="bottom-right"
  async
></script>

Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website</h1>

  <!-- Your content here -->

  <!-- FeedbackFlow Widget - Add just before </body> -->
  <script
    src="https://feedbackflow.cc/widget.js"
    data-widget-key="wk_abc123def456"
    data-position="bottom-right"
    async
  ></script>
</body>
</html>

Configuration Options

Configure the widget using data attributes on the script tag. All options can also be set in the Settings dashboard.

AttributeTypeDefaultDescription
data-widget-keystring—Required. Your unique widget key (starts with wk_)
data-positionstringbottom-rightWidget position: bottom-right, bottom-left, top-right, top-left
data-primary-colorstring#1a1a1aPrimary button/accent color (hex code)
data-background-colorstring#ffffffModal background color (hex code)
data-text-colorstring#1a1a1aText color in the modal (hex code)
data-button-textstringSend FeedbackText displayed on the floating button
data-disable-recordingbooleanfalseDisable screen recording feature

Example with all options

<script
  src="https://feedbackflow.cc/widget.js"
  data-widget-key="wk_your_widget_key"
  data-position="bottom-left"
  data-primary-color="#6B9AC4"
  data-background-color="#F7F5F0"
  data-text-color="#1a1a1a"
  data-button-text="Report Issue"
  async
></script>

JavaScript API

After the widget loads, you can interact with it programmatically using the window.FeedbackFlow object.

Open the widget

// Open the feedback modal
window.FeedbackFlow.open();

// Open with pre-selected type
window.FeedbackFlow.open({ type: 'bug' });
window.FeedbackFlow.open({ type: 'feature' });

Close the widget

window.FeedbackFlow.close();

Set user info

// Pre-fill submitter info (e.g., from your auth system)
window.FeedbackFlow.identify({
  email: 'user@example.com',
  name: 'John Doe',
});

Destroy the widget

// Remove the widget completely
window.FeedbackFlow.destroy();

Troubleshooting

Widget doesn't appear on my site
  1. Check the widget key - Make sure your data-widget-key matches the key in your FeedbackFlow dashboard.
  2. Check the browser console - Look for any JavaScript errors that might indicate loading issues.
  3. Check Content Security Policy - If you have a strict CSP, add your FeedbackFlow domain to your allowed script sources.
  4. Ensure the script is in the body - The script should be placed before the closing </body> tag.
Screen recording permission denied
  1. User must grant permission - Screen recording requires explicit user permission via the browser's screen sharing dialog.
  2. HTTPS required - Screen recording only works on HTTPS sites (or localhost for development).
  3. Browser support - Screen recording is supported in Chrome, Edge, and Firefox. Safari has limited support.
Screenshot looks different from the actual page

The widget uses html2canvas for screenshots, which has some limitations:

  • Cross-origin images may not render (images from other domains)
  • Some CSS properties like backdrop-filter may not be captured
  • Canvas and WebGL content may appear blank
  • iframes are not captured for security reasons

For pixel-perfect captures, users can use screen recording instead.

Feedback submission failed
  1. Check network connectivity - The widget queues submissions offline and retries when connection is restored.
  2. Rate limiting - There's a limit of 10 submissions per minute per user and 100 per day per widget.
  3. Widget key invalid - Verify your widget key hasn't been regenerated in the dashboard.
Widget conflicts with my site's styles

The widget uses Shadow DOM to isolate its styles from your page. However, if you're experiencing conflicts:

  • The widget button has a z-index of 9999. If other elements overlap, you may need to adjust their z-index.
  • Global CSS resets that target all elements (e.g., * {}) should not affect the widget.
2026 feedbackflow
made with<3byinfinitemoney
TwitterDiscordEmail