Wednesday, January 1, 2025

How to Add PDF-like Annotations in React Using Simple Commenter

Aleksander Kaaberma
React

While traditional PDF annotation requires downloading, uploading, or editing within a separate tool, Simple Commenter brings the ease of PDF-like annotations directly onto your webpage. With this simple integration, clients or users can leave comments directly on-page, providing insights and feedback without the hassle of managing PDF files.

In this guide, we’ll show you how to set up Simple Commenter in your React project, making it feel like a React PDF annotation tool—but faster and more user-friendly.

Step 1: Set Up Simple Commenter in Your React Project

Integrating Simple Commenter is straightforward, requiring only a quick addition to your website's <head> tag.

Copy and Paste the Code

To get started, add this script to the <head> section of your index.html file in the public directory of your React project:This script automatically enables annotation capabilities across your website. It’s compatible with any React setup and works seamlessly on platforms like WordPress, Webflow, Shopify, and others if you’re working with multiple CMS integrations.

Code Example
<script src="https://simplecommenter.com/js/comments.js" data-domain="yourdomain.com" defer></script>

Customize Simple Commenter Modes

Simple Commenter offers multiple modes to suit different types of feedback collection:

  • Disabled Mode: Keeps the tool inactive, allowing normal navigation without visible comment boxes.
  • View Mode: Lets users view existing comments in a read-only format, ideal for reviewing past feedback.
  • Add New Comments Mode: Allows users to add comments directly on elements by hovering or clicking on them.
  • Client Feedback Mode: Perfect for client-based projects, this mode allows clients to comment directly on specific sections of the site, just as they would on a PDF but without needing to download or share files.
  • Customer Feedback Mode: Ideal for gathering end-user feedback, this mode keeps customers engaged by enabling on-page comments, similar to PDF annotations but directly integrated into the live website.

Run Your Project

Start your React project to test the integration: Navigate to your website, and you’ll see the Simple Commenter interface ready for on-page annotation. Users can interact with your website’s elements to leave feedback as if they were annotating a PDF—but with the added convenience of staying on the page.

Why Simple Commenter is Better Than PDF Annotations

Unlike traditional PDF annotation tools that require users to handle PDF files, Simple Commenter keeps the experience smooth and embedded directly within your website. Here’s how it adds value:

  • No External Files: Comments are made directly on the webpage without requiring users to upload or download PDFs.
  • Real-Time Feedback: Comments appear in real-time, allowing faster and more responsive feedback cycles.
  • Universal Compatibility: Simple Commenter works on all platforms, including WordPress, Shopify, Webflow, and React-based websites.

Example Usage in React

To integrate Simple Commenter into specific components in your React app, you can manage visibility and interactivity by toggling between modes programmatically.

Code Example: Setting up Commenting Modes in React

Here’s how you can customize modes in your React component:

Code Example
import React, { useEffect } from 'react';

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

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

  return (
    <div> 
        <h1>PDF-like Annotations with Simple Commenter</h1> 
        <p>Leave your feedback directly on the page, no PDFs needed!</p> 
        {/* Additional components for your page */} 
    </div>
  );
};

export default AnnotationPage;

Conclusion

Simple Commenter provides a powerful, easy-to-use alternative to React PDF annotation tools, giving users a PDF-like annotation experience directly on any webpage. With just a single line of code, you can add valuable, on-page feedback features to your React website. It’s a fast, flexible way to bring interactive annotation to your projects, eliminating the extra steps required by PDF annotations and making it perfect for real-time client and customer feedback.

This setup allows you to capture insights and feedback effortlessly on any page, combining the best of PDF-like annotation with the simplicity of web integration.

Simple Commenter in 2 minutes

Back to docs