This guide will show you how to quickly add Marker.io to your Next.js app using our NPM package. Follow these simple steps to get started.
Step 1: Install the Marker.io SDK
Open your terminal in the root of your Next.js project and run this command to install the Marker.io SDK:
npm install @marker.io/browser
Step 2: Initialize the Widget
Open the file for your app’s main page. In the new Next.js structure, it’s likely located at
app/page.js.Paste the following code into your file:
'use client';
import { useEffect } from 'react';
import markerSDK from '@marker.io/browser';
export default function Home() {
useEffect(() => {
async function initMarkerWidget() {
await markerSDK.loadWidget({
project: 'YOUR_PROJECT_KEY_HERE', // Replace this with your actual project key
});
}
initMarkerWidget();
}, []);
return (
<div style={{ textAlign: 'center', padding: '50px' }}>
<h1>Welcome to My App</h1>
<p>The Marker.io widget is now integrated!</p>
</div>
);
}Replace
'YOUR_PROJECT_KEY_HERE'with the project key from your Marker.io dashboard. You’ll find it in Widget > Installation > NPM package. See below.
Step 3: Test the Integration
Start your app locally by running:
npm run devOpen http://localhost:3000 in your browser.
The Marker.io widget should now appear on your page. If it’s not showing up, double-check that you added the correct project key and review your browser’s developer console for errors. Also check that all add blocker are switched off.
That’s It!
The Marker.io widget is now ready to use in your Next.js app. You can submit test feedback reports to make sure everything is working properly.