All Collections
Feedback & Project
Developer Tools
How to Integrate with Remix
How to Integrate with Remix

Step-by-step instructions on integrating with a Remix application

Joe Scanlon avatar
Written by Joe Scanlon
Updated over a week ago

Objective: This guide will help you seamlessly integrate with a Remix application


  • A basic understanding of Remix and its project structure.

  • An active account with a project ID.


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 Browser Package:

Within your Remix project directory, install the browser package using your package manager:

npm install -s
# or
yarn add

3. Create a Custom Hook for

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 '';

export default function useMarkerio(projectId: string) {
const [widget, setWidget] = useState<MarkerSdk | null>(null);

useEffect(() => {
if (typeof window !== 'undefined') { // Ensure client-side execution
.loadWidget({ project: projectId })
}, [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 hook:

import useMarkerio from './useMarkerio';

export default function App() {
const projectId = "YOUR_MARKER_IO_PROJECT_ID"; // Replace with your project ID
const markerioWidget = useMarkerio(projectId);

const handleFeedback = () => {
if (markerioWidget) {

return (
<h1>Welcome to Remix!</h1>
<button onClick={handleFeedback}>Report Feedback</button>
<Outlet />

Replace YOUR_MARKER_IO_PROJECT_ID with your actual 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 widget, allowing you to capture feedback.

6. Secure Your Project ID:

For added security, consider storing the project ID as an environment variable or in a secure configuration to prevent unintentional exposure.


You've successfully integrated with your Remix application! This setup lets users provide visual feedback directly from your application, enhancing the user experience and facilitating better communication.

Did this answer your question?