Full Features Showcase

Ginotate

A lightweight, embeddable screenshot and annotation widget for web applications. This page demonstrates all features using HTML attribute configuration.

Try it now: Click the purple flag button in the bottom-right corner to capture a screenshot, annotate it, and see all features in action. Open Settings (gear icon) to customize the widget!

Screenshot Capture

Three capture modes to fit every use case. Powered by html2canvas, loaded dynamically only when needed.

Full Page

Captures the entire scrollable page, including content below the fold. Perfect for documenting long pages.

Visible Area

Captures exactly what's currently visible in the browser viewport. Fast and focused.

Custom Area

Click and drag to select a specific region. Ideal for highlighting particular UI elements.

Annotation Tools

Click on any screenshot preview to open the annotation editor with these tools:

✏

Pen

Freehand drawing

□

Rectangle

Outlined boxes

→

Arrow

Directional pointers

🖌

Highlighter

Semi-transparent marker

Available colors:

Configuration Methods

Three ways to configure Ginotate, each suited for different use cases:

HTML Attributes (This Page)

Configure via gino-* attributes directly on the script tag:

<script
  src="ginotate.js"
  gino-apiKey="your-api-key"
  gino-color="purple"
  gino-icon="flag"
  gino-vars="userId,sessionId"
  defer></script>
        

JavaScript Configuration

For dynamic values from your app's state:

<script>
  window.ginotateConfig = {
    apiKey: getAuthToken(),
    testerId: getCurrentUser().name,
    endpoint: 'https://api.example.com/feedback'
  };
</script>
<script src="ginotate.js" defer></script>
        

Zero Configuration

Just embed the script - everything uses sensible defaults:

Configuration Priority

Settings are applied in this order (highest priority first):

Cookie > JS Config > HTML Attrs > Defaults

User preferences from the Settings panel always take precedence.

All Configuration Options

Property	Attribute	Default	Description
`testerId`	`gino-testerId`	""	Pre-fill tester name field
`defaultTitle`	`gino-defaultTitle`	""	Pre-fill title field
`endpoint`	`gino-endpoint`	Auto-detect	Submission URL
`apiKey`	`gino-apiKey`	""	API key (X-API-Key header)
`apiSecret`	`gino-apiSecret`	""	API secret (X-API-Secret header)
`icon`	`gino-icon`	flag	flag, bug, pencil, target, magnifier
`color`	`gino-color`	purple	8 color options
`size`	`gino-size`	medium	small (40px), medium (56px), large (72px)
`shape`	`gino-shape`	circle	circle, rounded, pill
`opacity`	`gino-opacity`	1	0 to 1 (becomes solid on hover)
`pulse`	`gino-pulse`	false	Enable pulse animation
`title`	`gino-title`	Send Feedback	Modal header text
`categories`	`gino-categories`	5 defaults	Comma-separated list
`vars`	`gino-vars`	[]	Global variable names to capture
`demoMode`	`gino-demoMode`	false	Simulate submissions

Settings Panel

Users can access a comprehensive Settings panel via the gear icon in the popover menu. All changes are saved to a cookie and persist across pages and sessions.

Override Indicators

Orange highlights show which settings differ from code defaults, with "Overrides default: X" hints.

Per-Field Reset

Reset individual fields back to code defaults without affecting other customizations.

Reset All

Clear all user customizations and restore the original code configuration.

Cookie Persistence

Settings travel across all pages on the same domain automatically.

Try it: Open Settings, change some values (try color or size), then navigate to another demo page - your settings will follow! You can also drag the button anywhere.

Rich Metadata Collection

Every submission automatically includes comprehensive context:

Page URL

Page Title

Viewport Size

Screen Size

Device Pixel Ratio

User Agent

Browser Info

Platform

Language

Timezone

Timestamp

Referrer

Custom Variables

Include your application's data in every feedback submission:

Method 1: The ginotate Bucket

// Set anywhere in your app
window.ginotate = {
  userId: 123,
  plan: 'premium',
  environment: 'production'
};

// Or as a function for dynamic values
window.ginotate = () => ({
  userId: getCurrentUser()?.id,
  cartItems: getCart().length
});
        

Method 2: Reference Global Variables

Both methods can be combined. All values appear in the customVars field of the submission payload.

This page has window.ginotate set with demo values (userId, plan, environment). Submit feedback to see them included!

How It Works

User Clicks the Button

A draggable floating button appears on the page. Clicking opens a popover with capture options.
Choose Capture Mode

Select Full Page, Visible Area, or Custom Area. The screenshot is captured using html2canvas.
Annotate (Optional)

Click the screenshot preview to open the annotation editor. Draw, highlight, or add arrows.
Fill Details

Enter a title, description, select categories, and optionally add your name.
Submit

The feedback is POSTed to your endpoint with the screenshot, metadata, and custom variables.

Submission Payload

Feedback submissions POST JSON to your configured endpoint:

{
  "testerName": "John Doe",
  "title": "Button not working",
  "description": "The submit button doesn't respond",
  "categories": ["bug"],
  "screenshot": "data:image/png;base64,...",
  "metadata": {
    "pageUrl": "https://example.com/page",
    "viewportWidth": 1920,
    "userAgent": "Mozilla/5.0...",
    // ... and more
  },
  "customVars": {
    "userId": 123,
    "plan": "premium"
  }
}
        

Headers sent: Content-Type: application/json, X-API-Key (if configured), X-API-Secret (if configured)

Explore More Demos

See different configuration approaches in action:

JavaScript Config Demo → Zero Config Demo → ← Back to Demo Hub