// INSTALLATION

Installation

A detailed guide to installing the Feedbackly widget on your website.

Basic Installation

The simplest way to add Feedbackly is to insert the script before the closing </body> tag:

<script
  src="https://feedbackly.cc/widget.js"
  data-api-key="YOUR_API_KEY"
></script>

Replace YOUR_API_KEY with your API key from the dashboard.

React / Next.js

For React applications, use the Script component:

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

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://feedbackly.cc/widget.js"
          data-api-key="YOUR_API_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue / Nuxt

For Nuxt, add the script to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://feedbackly.cc/widget.js',
          'data-api-key': 'YOUR_API_KEY',
          defer: true,
        },
      ],
    },
  },
});

Single Page Applications

The widget automatically tracks URL changes and updates the page_url in submitted feedback. No additional configuration is required.

// If the widget doesn't appear after navigation, ensure the script is loaded once in the root layout.

Domain Restriction

For security, you can restrict the widget to a specific domain:

Open your project settings in the dashboard
Enter your domain in the "Allowed Domain" field
The widget will only work on that domain

If no domain is specified, the widget will work on any site with your API key.

Verifying Installation

After installation, verify that the widget is working:

Open your website in a browser
The feedback button should appear in the corner (bottom-right by default)
Click on it and submit a test message
Check your dashboard — the feedback should appear there