Product Annotator

Create interactive, annotated product images with hotspots. Add clickable annotations to product images with titles, descriptions, prices, and links. Generate professional embed code for Wix, Shopify, and other website builders.

Features

• Drag-and-Drop Interface: Upload images and place hotspots intuitively
• Hotspot Management: Add, edit, delete, and reorder product annotations
• Rich Annotations: Add for each hotspot:
  • Title (product name)
  • Description (product details)
  • Price information
  • Links (to product page, cart, etc.)
  • Custom emoji icons
• Live Preview: See changes in real-time as you edit
• Canvas Editor: Full three-pane layout:
  • Left: Annotation list
  • Center: Image canvas with draggable hotspots
  • Right: Property editor
• Multiple Export Formats:
  • Embed code (for Wix, Shopify)
  • JSON (for developers)
  • CSV (for spreadsheet import)
• Responsive Design: Dark mode optimized UI
• Batch Operations: Manage multiple annotations efficiently

Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Canvas API: Image manipulation and hotspot rendering
• Storage: Browser localStorage (auto-save)
• Export: HTML/JSON/CSV generation
• UI: Three-pane drag-and-drop interface

How It Works

Workflow

1. Upload Image

   • Drag & drop or click to select
   • Supported formats: JPG, PNG, WebP, GIF

2. Add Hotspots

   • Click image or use "Add" button
   • Click placement sets position
   • Hotspots appear as red circular buttons

3. Edit Hotspot

   • Click hotspot in list or on image
   • Right panel shows editor
   • Update title, description, price, link, icon

4. Position Hotspots

   • Drag hotspots on image to reposition
   • Or edit coordinates in editor panel

5. Export

   • HTML embed code (copy-paste ready)
   • JSON (for developers)
   • CSV (for data import)

Editor Panes

Left Sidebar - Annotation List

• Lists all hotspots with numbers
• Click to select and edit
• Delete button for each
• "Add" button at bottom

Center Canvas - Image Editor

• Displays product image
• Red circular hotspot buttons overlay
• Drag to reposition hotspots
• Click to select
• Shows coordinates on hover

Right Panel - Property Editor

• Title field (product name)
• Description textarea (details)
• Price field
• Link field (URL)
• Icon selector (emoji picker)
• Position coordinates (X, Y)

Usage

Basic Steps

1. Open index.html in web browser
2. Click upload area or drag image
3. Click on image to add hotspots
4. Click hotspots to edit properties
5. Drag to reposition
6. Export when done

Export Options

HTML Embed Code

Perfect for Wix, Shopify, Webflow:

<div class="product-annotator" data-image="url">
  <!-- Generated by Product Annotator -->
  <!-- Paste this into your website -->
</div>

JSON Format

For developers and custom integration:

{
  "image": "base64-encoded",
  "hotspots": [
    {
      "id": 1,
      "x": 50,
      "y": 50,
      "title": "Product Name",
      "description": "Details",
      "price": "$99.99",
      "link": "https://...",
      "icon": "🏎️"
    }
  ]
}

CSV Format

For spreadsheet import:

hotspot_id,x,y,title,description,price,link,icon
1,50,50,"Product","Details","$99.99","https://...",

Features in Detail

Hotspot Properties

• Position: X, Y coordinates (pixels)
• Title: Product name or feature (max 100 chars)
• Description: Detailed text, features (max 500 chars)
• Price: Format as you wish ($99.99, etc.)
• Link: Full URL to product or cart page
• Icon: Choose from emoji picker or keep default (+)

Hotspot Customization

• Colors: Red circular buttons with white icons
• Size: 40px diameter (auto-scales on hover)
• Icons: Default (+), or select emoji
• Hover State: Scales up, shows shadow
• Active State: Blue ring highlight

Auto-Save

• Data saved to browser localStorage
• Persists between sessions
• Clear cache to reset

File Structure

product-annotator/
├── index.html                    # Complete application
└── README.md                     # This file

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge
Image Upload	✅	✅	✅	✅
Canvas API	✅	✅	✅	✅
Drag & Drop	✅	✅	✅	✅
localStorage	✅	✅	✅	✅
Export	✅	✅	✅	✅

Keyboard Shortcuts

Key	Action
Delete	Remove selected hotspot
Escape	Deselect hotspot
Ctrl+Z	Undo (basic)
Ctrl+S	Save/Export
↑↓←→	Fine-tune position

Performance

• Lightweight single-file application
• Optimized canvas rendering
• Efficient DOM updates
• Fast JSON/CSV export

Use Cases

• Product Photography: E-commerce product images
• Interactive Content: Landing pages with clickable features
• Real Estate: Property photos with room annotations
• Interior Design: Furniture/decor product showcase
• Fashion: Clothing item details and links
• UI/UX: Interactive mockups and prototypes
• Educational: Diagrams with explanatory hotspots
• Travel: Map annotations and points of interest

E-Commerce Integration

Wix

1. Export HTML embed code
2. Add "Embed" element to page
3. Paste generated code
4. Configure links to products

Shopify

1. Export JSON
2. Use custom app integration
3. Or export HTML and embed in rich text

WordPress

1. Export HTML
2. Use in HTML block
3. Or integrate with custom plugin

Webflow

1. Use embed component
2. Paste HTML code
3. Adjust styling in Webflow

Tips for Best Results

1. Image Size: Use 800x800 to 2400x2400px
2. Clear Products: Well-defined products work best
3. Logical Placement: Place hotspots on distinct features
4. Short Titles: 1-3 words per hotspot
5. Mobile Ready: Test on mobile before exporting
6. Link Testing: Verify all links work before embedding

Advanced Tips

• Batch Export: Use JSON for bulk import to other tools
• Responsive Images: Use percentage-based positioning
• Analytics: Add tracking parameters to exported links
• Multiple Products: Create multiple annotations per image
• Backup: Download JSON regularly as backup

Troubleshooting

Problem	Solution
Image won't upload	Check file format (JPG/PNG/WebP) and size (<10MB)
Hotspots not saving	Check browser storage hasn't hit limit
Export text garbled	Try different browser or clear cache
Can't drag hotspot	Ensure image is loaded first
Links not working	Verify full URLs (include http://)

Data Privacy

• ✅ Images stored locally in browser
• ✅ No uploads to external servers
• ✅ No analytics or tracking
• ✅ Export data stays on your device
• ✅ Clear browser cache to delete everything

Accessibility

• Keyboard navigation support
• Focus indicators for interactive elements
• Semantic HTML structure
• Alt text for all images
• High contrast dark theme

License

Created by Pawan K Jajoo

---

Tags: productivity, drag-and-drop, free-software, website-design, free-to-use, product-editor-frontend