Widget Customization

Make the Annot8 widget match your brand and design system.

Color Customization

Primary Color

Set your brand's primary color:

<script 
  src="https://cdn.annot8.app/widget.js" 
  data-project-id="pj_xxx"
  data-config='{"primaryColor":"#8B5CF6"}'
  async
></script>

Common color presets:

Brand	Color
Blue	`#3B82F6`
Purple	`#8B5CF6`
Green	`#10B981`
Red	`#EF4444`
Orange	`#F97316`

Position

Place the widget in your preferred corner:

{ "position": "bottom-left" }

{ "position": "bottom-right" }

Custom CSS

For advanced customization, you can target widget elements using CSS custom properties:

:root {
  --annot8-primary: #8B5CF6;
  --annot8-background: #18181B;
  --annot8-text: #FAFAFA;
  --annot8-border: #27272A;
  --annot8-radius: 12px;
}

The widget uses Shadow DOM, so most external CSS won't affect it. Use CSS custom properties for customization.

Button Label

Customize the feedback button text:

{ "label": "💬 Feedback" }

{ "label": "Report Issue" }

Hide Default Elements

Hide specific parts of the widget:

{
  "hideInbox": true,
  "hideUserAvatar": true
}

Responsive Behavior

The widget automatically adapts to mobile devices:

Toolbar moves to avoid navigation bars
Comment popover becomes full-width on small screens
Touch-friendly hit areas

Mobile-Specific Config

{
  "mobile": {
    "position": "bottom-center",
    "collapsible": true
  }
}

Dark Mode

The widget automatically detects and matches your site's color scheme:

// Force dark mode
window.Annot8.setTheme('dark')

// Force light mode
window.Annot8.setTheme('light')

// Auto (default)
window.Annot8.setTheme('auto')

Examples

Minimal Style

{
  "primaryColor": "#000000",
  "label": "",
  "hideUserAvatar": true
}

Vibrant Style

{
  "primaryColor": "#8B5CF6",
  "label": "✨ Give Feedback",
  "position": "bottom-right"
}

Enterprise Style

{
  "primaryColor": "#1E40AF",
  "label": "Report Issue",
  "position": "bottom-left"
}

On this page