Coolhand

Coolhand Feedback Widget

Get more high-quality human feedback on your AI workloads

Quick & Easy Integration

The Coolhand Feedback Widget is a lightweight JavaScript library that lets you collect user feedback on AI-generated content with just a few lines of code. Simply add the script to your page, mark any element containing LLM output with the coolhand-feedback attribute, and users can rate the quality of responses with a single click.

By default, all feedback is configured to be automatically sent to the Coolhand API where you can analyze patterns, identify problematic outputs, and continuously improve your AI application. However, the widget is built be compatible with any API endpoint that accepts the same basic JSON payload.

Try the interactive examples below to see how it works.

Generated Article

Static content with feedback widget

<div coolhand-feedback>
  Your AI-generated content here
</div>

Artificial intelligence has transformed the way businesses operate, enabling unprecedented levels of automation and insight generation. From natural language processing to computer vision, AI systems are now capable of tasks that were once thought to require human intelligence exclusively.

Machine learning models, particularly deep neural networks, have achieved remarkable performance on complex tasks such as image classification, speech recognition, and language translation. These advances have been driven by increases in computational power, the availability of large datasets, and improvements in algorithmic techniques.

As AI continues to evolve, organizations must consider both the opportunities and challenges it presents. Ethical considerations, data privacy, and the need for transparency in AI decision-making are becoming increasingly important topics in both research and industry applications.

Editable AI Response (Textarea)

Editable content area with revision tracking

<!-- Coolhand fuzzy-matches to original AI output by default,
     but specifying a workload id will improve match rate -->
<div coolhand-feedback data-coolhand-workload-id="workload-123">
  <textarea>AI-generated text that users can edit...</textarea>
</div>

This textarea tracks revisions. Edit the text - changes are sent after 1 second of no typing (or immediately on blur).

Editable AI Response (Input)

Input field with revision tracking (hidden widget style)

<input
  type="text"
  coolhand-feedback
  data-coolhand-widget-style="hidden"
  value="AI-generated summary..."
/>

This input field tracks revisions with no visible widget. Edit the text - changes are sent after 1 second of no typing (or immediately on blur).

Chat Interface

Interactive chat with per-message feedback (pixel style)

<!-- Use pixel style for compact chat bubbles - appears as a small
     dot that expands on hover, keeping the UI clean -->
<div coolhand-feedback data-coolhand-widget-style="pixel">
  Bot response text here...
</div>

The pixel widget style is ideal for chat interfaces and compact layouts. It renders as a tiny dot in the corner that expands into a full feedback widget on hover, keeping the conversation flow unobtrusive.

Can you explain what machine learning is in simple terms?

User - 2:30 PM

Machine learning is like teaching a computer to recognize patterns and make decisions by showing it many examples, rather than explicitly programming every rule. Think of it like teaching a child to identify animals - instead of describing every detail, you show them many pictures until they can recognize cats, dogs, etc. on their own.

AI Assistant - 2:31 PM

That makes sense! Can you give me a real-world example?

User - 2:32 PM

A great example is email spam filtering. The system learns from millions of emails that users have marked as spam or not spam. It identifies patterns like certain words, sender addresses, or formatting that commonly appear in spam. Over time, it gets better at automatically filtering out unwanted emails without you having to create rules for every possible spam scenario.

AI Assistant - 2:33 PM

How accurate are these systems typically?

User - 2:34 PM

Accuracy varies widely depending on the task and data quality. For example, spam filters can achieve 99%+ accuracy, facial recognition systems often reach 95-99% accuracy in controlled conditions, while more complex tasks like natural language understanding might range from 70-90% depending on the specific application. The key is having enough quality training data and choosing the right algorithm for the task.

AI Assistant - 2:35 PM

Widget Placement

Position widgets in different corners with placementVertical and placementHorizontal

<div coolhand-feedback
     data-coolhand-placement-vertical="top"
     data-coolhand-placement-horizontal="left">
  Content with top-left widget
</div>

The widget can be positioned in any corner using placementVertical ('top' or 'bottom') and placementHorizontal ('left' or 'right'). Use the dropdowns below to see the widget move.

This is a sample AI-generated response. Use the dropdowns above to change the widget position. The feedback widget will move to the selected corner of this container.

Current position: Bottom Right

Auto-Highlight & User Fingerprinting

New experimental features in v0.5.0

Smart Auto-Highlight (Experimental)

When enabled, widgets display a pulsating gradient border for first-time visitors to draw attention to the feedback option. Toggle the checkbox to see the effect on the content below. 

CoolhandJS.init('your-api-key', {
  autoHighlight: true  // Enable pulsating border for new visitors
});

This content has the highlight effect enabled. The widget shows a pulsating gradient border to draw attention. Toggle the checkbox above to enable/disable the effect.

User Fingerprinting (Experimental)

Automatic cookie-based user session tracking is enabled by default in v0.5.0. This helps correlate feedback across sessions and enables features like auto-highlight to remember returning visitors. 

CoolhandJS.init('your-api-key', {
  fingerprint: false  // Disable if needed for privacy compliance
});

Note: You can disable fingerprinting by setting fingerprint: false if your application requires strict privacy controls.

60 Second Setup

1. Add the Script

<script src="https://cdn.jsdelivr.net/npm/coolhand/dist/coolhand.min.js"></script>

This demo uses v0.5.0 with widget placement, auto-highlight, and user fingerprinting. View the release notes.

2. Mark Elements for Feedback

<div coolhand-feedback>
  Your AI-generated content here
</div>

3. Initialize with Your API Key

CoolhandJS.init('your-api-key', {
  widgetStyle: 'overlay',        // or 'pixel', 'hidden'
  placementVertical: 'top',      // or 'bottom' (default)
  placementHorizontal: 'right',  // or 'left'
  autoHighlight: true,           // pulsating border for first-time visitors
  explanationSample: 0.3         // 30% chance to prompt for explanation
});

New in v0.5.0: placementVertical and placementHorizontal control widget position. autoHighlight adds a pulsating gradient border for first-time visitors. User fingerprinting is enabled by default.