All Collections
Feedback & Project
Developer Tools
Integrating in a React Next.js 13+ Environment
Integrating in a React Next.js 13+ Environment

Integrate for user feedback in a React-based Next.js 13 project

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


Collecting user feedback is crucial for improving your web application. provides a seamless bridge between your users and your React-based Next.js project. With the advent of Next.js 13, integrating requires a specific approach due to the introduction of client and server components. This guide will walk you through integrating within a Next.js 13 project.

Preliminary Setup

Ensure Your Project is Up-To-Date

Update your project to Next.js 13.4 or later using the following command:

npm install next@latest

Retrieve Your Project ID:

Sign up or log in to your account and create a new project if you haven't already.

Once your project is set up, navigate to the settings of your project on Under the Widget tab, click on Installation. Here, you will find your project ID under the NPM package section. Make a note of this ID as you'll need it for the next steps.

Step 1: Create the Component

Create MarkerComponent.client.js: Create a file named MarkerComponent.client.js in a directory of your choice. This file will hold the code to initialize the widget.In this file, paste the following code, replacing 'your-project-id' with the project ID you noted down earlier:

'use client';

import React, { useEffect } from 'react';
import markerSDK from '';

export default function MarkerComponent() {
useEffect(() => {
project: 'your-project-id',
}, []);

return null;

Step 2: Integrate with Next.js

Open layout.tsx and import the MarkerComponent by adding the following line at the top of your file, adjusting the path to match the location of your MarkerComponent.client.js file:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import MarkerComponent from '../path-to-marker-component/MarkerComponent.client'

// ... rest of your code

Within the RootLayout component of layout.tsx, include the MarkerComponent so it looks like this:

// ... rest of your code

export default function RootLayout({
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/* ...any other head elements you may have */}
<body className={inter.className}>
<MarkerComponent />

Step 3: Test the Integration:

  • Now it's time to test the integration and see if the widget shows up in your application.

  • Run your Next.js application using the following command in the terminal:

    npm run dev

  • Once your application is running, open it in your web browser and you should see the widget appearing on your site, ready to collect feedback.

By following these detailed steps, you will be able to integrate into your React-based Next.js 13+ project and start collecting user feedback efficiently.

Did this answer your question?