Quickstart Guide

Get Annot8 running on your website in just a few minutes.

Prerequisites

An Annot8 account (Sign up free)
Access to your website's HTML

Step 1: Create a Project

Log in to your Annot8 dashboard
Click New Project
Enter your project name (e.g., "My Website")
Add your domain(s) - use localhost for local development

You can add multiple domains per project, including wildcards like *.vercel.app

Copy the script tag from your project settings and add it to your website:

Add before </body>

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

Framework-specific Installation

Next.js

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script 
          src="https://cdn.annot8.app/widget.js"
          data-project-id="pj_xxxxxxxxxxxx"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

React

src/App.tsx

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.annot8.app/widget.js'
    script.dataset.projectId = 'pj_xxxxxxxxxxxx'
    script.async = true
    document.body.appendChild(script)
    
    return () => script.remove()
  }, [])
  
  return <div>Your App</div>
}

Vue

App.vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://cdn.annot8.app/widget.js'
  script.dataset.projectId = 'pj_xxxxxxxxxxxx'
  script.async = true
  document.body.appendChild(script)
})
</script>

HTML

index.html

<!DOCTYPE html>
<html>
  <body>
    <!-- Your content -->
    
    <script 
      src="https://cdn.annot8.app/widget.js" 
      data-project-id="pj_xxxxxxxxxxxx"
      async
    ></script>
  </body>
</html>