Installation

Learn how to install Annot8 on any website or web application.

Basic Installation

Add the Annot8 script to your website, just before the closing </body> tag:

<script 
  src="https://cdn.annot8.app/widget.js" 
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Script Attributes

CDN Options

Production CDN (Recommended)

<script src="https://cdn.annot8.app/widget.js" async></script>

Self-Hosted

You can also self-host the widget:

npm install @annot8/widget

import { initAnnot8 } from '@annot8/widget'

initAnnot8({
  projectId: 'YOUR_PROJECT_ID'
})

Content Security Policy (CSP)

If your site uses CSP, add these directives:

script-src 'self' https://cdn.annot8.app;
connect-src 'self' https://*.convex.cloud;
style-src 'self' 'unsafe-inline';

Verify Installation

After installation, you should see:

1. A floating toolbar in the bottom-right corner
2. The ability to click and add comments when in comment mode

Troubleshooting

Widget Not Showing

1. Check browser console for errors
2. Verify your project ID is correct
3. Ensure your domain is in the allowed domains list
4. Clear browser cache

Comments Not Saving

1. Check that you're authenticated
2. Verify your Convex connection
3. Check network requests for errors

Next Steps