Objective: This guide will help you seamlessly integrate Marker.io with a Remix application
Prerequisites
A basic understanding of Remix and its project structure.
An active Marker.io account with a project ID.
Steps
1. Set Up a Remix Project:
If you haven't already set up a Remix project, follow the official Remix documentation to get started.
2. Install Marker.io Browser Package:
Within your Remix project directory, install the Marker.io browser package using your package manager:
npm install -s @marker.io/browser
# or
yarn add @marker.io/browser
3. Create a Custom Hook for Marker.io:
In your project's main directory (commonly named app), create a new file named useMarkerio.tsx and add the following 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;
}
4. Integrate the Custom Hook in Your Main Component:
Open your main layout or route file (e.g., root.tsx). Integrate the Marker.io hook:
import useMarkerio from './useMarkerio';
export default function App() {
const projectId = "YOUR_MARKER_IO_PROJECT_ID"; // Replace with 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>
<Outlet />
</div>
);
}
Replace YOUR_MARKER_IO_PROJECT_ID with your actual Marker.io project ID.
5. Test the Integration:
Run your Remix application using the appropriate command (commonly npm run dev or yarn dev).
Navigate to your application in a web browser. You should see a "Report Feedback" button. Clicking on this button will trigger the Marker.io widget, allowing you to capture feedback.
6. Secure Your Project ID:
For added security, consider storing the Marker.io project ID as an environment variable or in a secure configuration to prevent unintentional exposure.
Conclusion
You've successfully integrated Marker.io with your Remix application! This setup lets users provide visual feedback directly from your application, enhancing the user experience and facilitating better communication.