Framework installation

Next.js App Router

Add the generated Website script to the root layout. This avoids duplicate instances and keeps the form available across routes.

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <div data-feedbacks-host="YOUR_PROJECT_KEY" />
        <Script
          src="https://app.feedbacks.dev/widget/latest.js"
          data-project="YOUR_PROJECT_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

React and Vue

Copy the generated React or Vue snippet into the root index.html file, after the framework mount element. It uses the same hosted script as Website installation, loads once, survives client-side navigation, and resolves saved product settings remotely.

<div data-feedbacks-host="YOUR_PROJECT_KEY"></div>

<script
  src="https://app.feedbacks.dev/widget/latest.js"
  data-project="YOUR_PROJECT_KEY"
  defer
></script>

WordPress

1. 1

   Open Embed installation

   Select WordPress to see the stable Website snippet and placement guidance.

2. 2

   Add it through one code tool

   Use the theme footer, a header/footer code plugin, or a tag manager. Do not add the same snippet in more than one place.

3. 3

   Clear page caches

   Purge optimization and CDN caches before deciding the script failed to load.

4. 4

   Scroll before taking a screenshot

   Lazy and animated sections may not exist until they enter the viewport. Screenshot capture records the visible viewport at the user current scroll position.