Widget Configuration

Customize how the Annot8 widget behaves on your site.

Configuration Options

Pass configuration via the data-config attribute:

<script 
  src="https://cdn.annot8.app/widget.js" 
  data-project-id="pj_xxx"
  data-config='{"position":"bottom-left","primaryColor":"#3B82F6"}'
  async
></script>

Available Options

`position`

Widget toolbar position on screen.

Value	Description
`bottom-right`	Bottom right corner (default)
`bottom-left`	Bottom left corner

{ "position": "bottom-left" }

`primaryColor`

Primary brand color for the widget.

{ "primaryColor": "#3B82F6" }

`label`

Custom label for the feedback button.

{ "label": "Give Feedback" }

`showOnPages`

Only show widget on specific pages (glob patterns).

{ "showOnPages": ["/app/*", "/dashboard/*"] }

`hideOnPages`

Hide widget on specific pages.

{ "hideOnPages": ["/checkout", "/payment/*"] }

Environment-Based Config

Development vs Production

<!-- Development -->
<script 
  src="https://cdn.annot8.app/widget.js" 
  data-project-id="pj_dev_xxx"
  data-config='{"position":"bottom-left"}'
  async
></script>

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

Using Environment Variables (Next.js)

app/layout.tsx

<Script 
  src="https://cdn.annot8.app/widget.js"
  data-project-id={process.env.NEXT_PUBLIC_ANNOT8_PROJECT_ID}
  strategy="lazyOnload"
/>

Programmatic Control

Control the widget via JavaScript:

// Show/hide widget
window.Annot8.show()
window.Annot8.hide()

// Enter comment mode
window.Annot8.startComment()

// Open inbox
window.Annot8.openInbox()

// Identify user (for analytics)
window.Annot8.identify({
  userId: 'user_123',
  email: 'user@example.com',
  name: 'John Doe'
})

Events

Listen to widget events:

window.addEventListener('annot8:comment-created', (e) => {
  console.log('New comment:', e.detail)
})

window.addEventListener('annot8:comment-resolved', (e) => {
  console.log('Comment resolved:', e.detail)
})