Lovable Installation

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

Important: The domain in your script must exactly match the domain you registered in your Simple Commenter dashboard. If they don't match, the widget won't load.

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-domain="my-domain.com"
  defer
></script>

Replace my-domain.com with your actual domain from the Simple Commenter dashboard. Use your Lovable subdomain (e.g., myapp.lovable.app) or custom domain.

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.domain = "my-domain.com";
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-domain="your-domain.com"
  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.domain = "your-domain.com";
    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 Domain

Your Lovable domain is typically:

Preview URL: project-name.lovable.app
Custom domain: Whatever you've configured

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

Domain mismatch

Preview domains can differ from production
You may need separate projects for preview vs production
Or use dynamic domain detection:

script.dataset.domain = window.location.hostname;

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.