Lovable Installation

Add Simple Commenter to your Lovable application. Lovable generates React-based applications, so you can use AI prompts to add the integration.

Replace sc_your_project_key in the snippets below with your project's public key from the Simple Commenter dashboard.

Using AI Prompts

The easiest way to add Simple Commenter to your Lovable project is to ask the AI:

Simple Prompt

Add the Simple Commenter feedback widget to my app. Add this script tag
to the index.html before the closing body tag:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-id="sc_your_project_key"
  defer
></script>

Replace sc_your_project_key with your project's public key from the Simple Commenter dashboard.

Alternative Prompt (React Component)

Add a Simple Commenter feedback widget to my app. Create a component
that loads this script:

const script = document.createElement("script");
script.src = "https://simplecommenter.com/js/comments.min.js";
script.dataset.id = "sc_your_project_key";
script.defer = true;
document.body.appendChild(script);

Add the component to the root App.tsx file.

Manual Installation

If you prefer to edit the code directly:

Method 1: index.html

Open your Lovable project
Find index.html in the file explorer
Add this before </body>:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-id="sc_your_project_key"
  defer
></script>

Method 2: React Component

Create a new component:

// src/components/SimpleCommenter.tsx
import { useEffect } from "react";

export default function SimpleCommenter() {
  useEffect(() => {
    if (document.querySelector("script[data-simple-commenter]")) return;

    const script = document.createElement("script");
    script.src = "https://simplecommenter.com/js/comments.min.js";
    script.dataset.id = "sc_your_project_key";
    script.dataset.simpleCommenter = "true";
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      const el = document.querySelector("script[data-simple-commenter]");
      if (el) document.body.removeChild(el);
    };
  }, []);

  return null;
}

Add to your App.tsx:

// src/App.tsx
import SimpleCommenter from "./components/SimpleCommenter";

function App() {
  return (
    <>
      {/* Your app content */}
      <SimpleCommenter />
    </>
  );
}

Finding Your Public Key

Your project's public key (format sc_...) is shown in your Simple Commenter dashboard. The same key works for both your preview URL (project-name.lovable.app) and any custom domain you configure.

Verifying Installation

Preview your Lovable project
Look for the feedback widget button (usually bottom-right)
Click to open and submit a test comment
Check your Simple Commenter dashboard for the comment

Troubleshooting

Lovable's preview might have restrictions
Try deploying to see the widget
Check browser console for errors

Double-check the public key in your script matches the one in your dashboard
The same public key works across preview and production, so you don't need separate projects

AI not understanding the request

Try being more specific:

Edit the index.html file. Add this exact script tag on line X
before the </body> closing tag: [paste script]

Changes not persisting

Make sure changes are saved/committed
Lovable auto-saves but may need explicit confirmation
Check the file hasn't been overwritten by other AI changes

Need help? Contact support.