FeedbackJar integrates with Remix via the Scripts component in your root.tsx or a useEffect in a root loader. Works with both Vite-based Remix and the classic compiler.
# Sign up at app.feedbackjar.com
# Create a widget → copy your Widget ID// app/root.tsx
import { useEffect } from 'react';
import { Scripts, Outlet } from '@remix-run/react';
export default function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://cdn.feedbackjar.com/sdk.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => window.fj.init(window.__FEEDBACKJAR_ID__);
}, []);
return (
<html>
<body>
<Outlet />
<script
dangerouslySetInnerHTML={{
__html: `window.__FEEDBACKJAR_ID__ = '${process.env.FEEDBACKJAR_ID}';`,
}}
/>
<Scripts />
</body>
</html>
);
}→ Pass the Widget ID from server to client via a global variable.
# .env
FEEDBACKJAR_ID=your_widget_id// app/root.tsx
import { useEffect } from 'react';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@remix-run/node';
export async function loader({ request }: LoaderFunctionArgs) {
const user = await getUser(request); // your auth helper
return { user };
}
export default function App() {
const { user } = useLoaderData<typeof loader>();
useEffect(() => {
if (user && window.fj) {
window.fj.identify({ id: user.id, email: user.email });
}
}, [user]);
// ...
}Sign up free, grab your Widget ID, and have the feedback widget running in your Remix app in 2 minutes.