Wednesday, January 1, 2025

On-Page Annotations in Next.js - Seamless Integration with Simple Commenter

Aleksander Kaaberma

Traditional PDF annotation can be a time-consuming process for web developers handling client feedback. Capturing screenshots, downloading large PDF files, and sending them back and forth via email—often with file-size issues—leads to endless "v1, v2, v3" document versions that are hard to track. Simple Commenter simplifies this by offering a live, website annotation tool directly on your Next.js site, eliminating the hassle of PDF files and version control.

With Simple Commenter, your clients and users can leave comments directly on web pages in real-time, as if using a PDF annotation tool but without the PDF. It’s the ideal website annotation tool for interactive feedback on live pages. In this guide, we’ll show you how to integrate Simple Commenter with your Next.js project, enabling PDF-like annotations and turning your site into an interactive web page markup tool for streamlined collaboration.

You can test the functionality right on the page! Just click the toolbox in the bottom right corner to share your thoughts and help us improve this guide in real-time.

Step 1: Add Simple Commenter to Your Next.js Project

To enable Simple Commenter on your Next.js site, add the following code to your <Head> tag in your main component or layout file (such as _app.js or a specific page file).

This script loads Simple Commenter and automatically enables annotation capabilities across your Next.js site. It’s compatible with various CMS platforms, including WordPress, Webflow, and Shopify, if you have multiple integrations.

Code Example

import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <> 
        <Head> 
            <script src="https://simplecommenter.com/js/comments.js" 
                data-domain="simplecommenter.com" 
                defer 
              ></script> 
        </Head> 
        <Component {...pageProps} /> 
    </>
  );
}

export default MyApp;

Step 2: Customize Simple Commenter Modes

Simple Commenter supports multiple modes, allowing you to tailor the annotation experience for different types of feedback:

Disabled Mode: Keeps Simple Commenter inactive, allowing users to navigate the site without seeing comment boxes.
View Mode: Users can view existing comments in a read-only format, perfect for reviewing feedback without making new annotations.
Add New Comments Mode: Users can add comments by clicking on specific elements, with links temporarily disabled for a seamless annotation experience.
Client Feedback Mode: Ideal for client feedback, enabling clients to leave comments on specific areas of the site without needing to download or share files.
Customer Feedback Mode: Collect end-user feedback in real-time, similar to PDF annotation tools, but directly integrated into your website.

Run Your Project

To see the integration in action, start your Next.js project. When you navigate to the annotated page, Simple Commenter will be ready, allowing users to leave feedback as if they were annotating a PDF—but directly on the webpage.

Why Simple Commenter Is a Better Alternative to PDF Annotations

Unlike traditional PDF annotation tools that require separate file handling, Simple Commenter keeps the experience smooth and fully embedded within your website. Here’s how it adds value to your annotation needs:

No External Files: Comments are added directly on the webpage, eliminating the need for PDF uploads or downloads.
Real-Time Feedback: Comments appear instantly, enabling faster and more responsive feedback cycles.
Universal Compatibility: Works across platforms like WordPress, Shopify, Webflow, and any React-based or Next.js site.

Example Usage in Next.js Components

You can also integrate Simple Commenter on specific Next.js components to manage visibility and toggle between modes programmatically.

Code Example: Enabling Simple Commenter in a Specific Component

Code Example

import React, { useEffect } from 'react';
import Head from 'next/head';

const AnnotationPage = () => {
  useEffect(() => {
    // Load Simple Commenter script
    const script = document.createElement('script');
    script.src = 'https://simplecommenter.com/js/comments.js';
    script.dataset.domain = 'simplecommenter.com';
    script.defer = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <div> 
        <Head> 
            <title>PDF-like Annotations with Simple Commenter</title> 
        </Head> 
        <h1>PDF-like Annotations with Simple Commenter</h1> 
        <p>Leave feedback directly on the page, no PDF required!</p> 
    </div>
  );
};

export default AnnotationPage;

Conclusion

Simple Commenter offers a fast, flexible alternative to PDF annotation tools by bringing interactive, PDF-like annotation capabilities directly to your Next.js site. With just a single line of code, you can transform your site into a user-friendly web annotation tool that supports real-time client and customer feedback. This setup combines the best of PDF annotation with the simplicity of a fully integrated web experience, perfect for website annotation and commenting.

By embedding annotations directly onto your webpages, Simple Commenter streamlines feedback collection, making it easy to annotate on-site without extra steps.

Simple Commenter in 2 minutes

Back to docs