Integration Guide

Integrate FeedlyHQ into your product

Collect feedback from your users using multiple methods. Choose the integration that best fits your tech stack and requirements.

Quick Start (5 minutes)

Get started immediately with our widget or hosted pages

Step 1: Get your credentials

Step 2: Choose your integration method

• React Widget: Best for React/Next.js apps
• HTML/JS: For any website
• REST API: For custom integrations

Step 3: Start collecting feedback!

Test your integration and watch feedback appear in your dashboard in real-time

Integration Methods

React / Next.js Widget Integration

Embed our React component directly into your app for a seamless experience

Step 1: Get the widget code

Go to the Widget Code tab to get the complete FeedbackWidget component code

Step 2: Install dependencies

Terminal

npm install lucide-react sonner clsx tailwind-merge class-variance-authority

Step 3: Add to your app

App Component

import { FeedbackWidget } from '@/components/FeedbackWidget'

export default function App() {
  return (
    <div>
      <h1>My Application</h1>

      {/* Your app content */}

      {/* Feedback widget */}
      <FeedbackWidget
        appSlug="your-app-slug"
        position="bottom-right"
        buttonText="Send feedback"
      />
    </div>
  )
}

Available Props

appSlug (required) - Your app slug from dashboard

apiKey (optional) - For Team/Scale plans

position - "bottom-right" | "bottom-left" | "inline"

buttonText - Custom button text

metadata - Additional context data

Advanced React Examples

With Custom Metadata

With User Context

<FeedbackWidget
  appSlug="my-app"
  position="bottom-right"
  metadata={{
    userId: user?.id,
    plan: user?.plan,
    version: appVersion,
    url: window.location.href,
    timestamp: new Date().toISOString()
  }}
/>

Get Your Credentials

For Free Plan

Use your appSlug

your-app-slug

For Team/Scale Plans

Use your apiKey

pk_live_xxxxxxxxxxxxxxxxx

Go to Dashboard

Integration Summary

Choose the right method for your use case

React Widget

Best for: React/Next.js apps
Pros: Seamless UX, customizable
Cons: Requires React

HTML/JS

Best for: Any website
Pros: Easy setup, no framework
Cons: Less customizable

REST API

Best for: Custom integrations
Pros: Full control, server-side
Cons: More complex

Ready to start collecting feedback?

Get Started Free Go to Dashboard