Userloop logoUserloop
Back to site

Installation

Add the Userloop feedback widget to your application.

|

The Userloop widget is a lightweight JavaScript snippet that adds a feedback button to your application. Users can click it to submit feedback, which appears in your Userloop dashboard.

Script Installation

Add the following script tag to your HTML, just before the closing </body> tag:

<script
  src="https://widget.userloop.run/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Replace YOUR_PROJECT_ID with your actual project ID from the Userloop dashboard.

[!NOTE] You can find your project ID in **Dashboard → Projects → Settings**.

Framework-Specific Installation

React

For React applications, you can add the script in your root component or use a custom hook:

// In your App.tsx or layout component
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widget.userloop.run/widget.js";
    script.setAttribute("data-project-id", "YOUR_PROJECT_ID");
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <>{/* Your app content */}</>;
}

Next.js

For Next.js, use the Script component:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://widget.userloop.run/widget.js"
          data-project-id="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Vue

In Vue applications, add the script in your main layout:

<script setup>
import { onMounted, onUnmounted } from "vue";

let script;

onMounted(() => {
  script = document.createElement("script");
  script.src = "https://widget.userloop.run/widget.js";
  script.setAttribute("data-project-id", "YOUR_PROJECT_ID");
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

Verifying Installation

Once installed, you should see a feedback button appear in the bottom-right corner of your application. Click it to open the feedback form.

[!WARNING] If the widget doesn't appear, check your browser console for errors and verify your project ID is correct.

Next Steps

Now that the widget is installed, learn how to collect your first feedback.