Framer Installation

Add Simple Commenter to your Framer site using the custom code settings.

Step-by-Step Installation

1. Open Site Settings

Open your project in Framer
Click the gear icon or go to Site Settings
Navigate to the General tab

2. Add Custom Code

Scroll down to Custom Code
In the End of <body> tag section, paste:

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

Click Save or close the settings panel

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

3. Publish Your Site

Click Publish in the top right
Your changes will go live

Using a Code Component (Alternative)

You can also create a code component:

Click the + button to add a new component
Select Code component
Add this code:

export default function SimpleCommenter() {
  React.useEffect(() => {
    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);

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

  return null;
}

Add the component to your page
Publish

The Site Settings method is recommended as it applies to all pages automatically.

Verifying Installation

Publish your site
Visit the live site (not the editor preview)
Look for the feedback widget button
Check browser Developer Tools (F12) for errors

Troubleshooting

The widget won't appear in the Framer editor. You must view the published site.

Ensure you published after adding the code
Check the code is in the "End of body" section
Verify the public key matches your dashboard settings
Clear your browser cache

Staging vs Production

The same public key works across both staging and production sites.

Need help? Contact support.