Marker.io Remix

1. Install Marker.io Browser Package:

In your project directory, run:

bashCopy code

npm install -s @marker.io/browser

2. Create a Custom Hook for Marker.io:

Navigate to the src directory of your project. Create a new file named useMarkerio.tsx and add the following code:

typescriptCopy code

import { useEffect, useState } from 'react'; import markerSDK, { MarkerSdk } from '@marker.io/browser'; export default function useMarkerio(projectId: string) { const [widget, setWidget] = useState<MarkerSdk | null>(null); useEffect(() => { if (typeof window !== 'undefined') { // Ensure client-side execution markerSDK .loadWidget({ project: projectId }) .then(setWidget); } }, [projectId]); return widget; }

3. Integrate the Custom Hook in Your Main Component:

Navigate to the src directory and open the index.tsx file. Integrate the Marker.io hook:

typescriptCopy code

import useMarkerio from './useMarkerio'; export default function Index() { const projectId = "65114f925fcb146d9f25b42c"; // Your Marker.io project ID const markerioWidget = useMarkerio(projectId); const handleFeedback = () => { if (markerioWidget) { markerioWidget.capture("fullscreen"); } }; return ( <div> <h1>Welcome to Remix!</h1> <button onClick={handleFeedback}>Report Feedback</button> </div> ); }

4. Run Your Remix Application:

From your project directory, run:

bashCopy code

npm run dev

This will start your Remix development server. By default, it will be accessible at http://localhost:3000.

5. Test Marker.io Integration:

Open a web browser and navigate to http://localhost:3000. You should see a “Report Feedback” button. Clicking on this button will trigger the Marker.io widget to capture feedback.

6. Secure Your Project ID:

While this guide uses a hardcoded project ID for simplicity, in a real-world scenario, consider storing the project ID as an environment variable or in a secure configuration to prevent unintentional exposure.

That’s it! You now have a Remix application integrated with Marker.io for user feedback. Adjust and expand upon this setup as needed for your specific requirements.