Cobbl

Feedback Widget Overview

Embeddable feedback widget for collecting user feedback on AI responses

The Cobbl Feedback Widget is a lightweight, embeddable widget for collecting user feedback on AI prompt responses. It seamlessly integrates with your application and sends feedback directly to the Cobbl platform.

Try It Out

Trigger Variant

A subtle text link that opens a feedback flyout when clicked.

Thumbs Variant

Thumbs up/down buttons that immediately register feedback and open a flyout for additional comments.

Inline Variant

Full feedback form rendered directly without any flyout.

Features

📦
Multiple Integration Options
Script tag, JavaScript, or React — choose what works for your stack.
🎨
Three Display Variants
Trigger button, thumbs up/down, or inline form to match your UI needs.
🔒
Style Isolation
Uses Shadow DOM for complete CSS encapsulation — no style conflicts.
⚙️
Fully Customizable
100+ CSS variables for complete visual customization.
Lightweight
Built with Preact for minimal bundle size and fast loading.
🔄
Dynamic Updates
Auto-updates when configuration changes — no reload needed.

Three Ways to Use

Display Variants

The widget supports three display variants to match your UI needs:

VariantDescriptionBest For
triggerText button that opens a feedback flyoutMinimal footprint, unobtrusive feedback
thumbsThumbs up/down buttons that open a flyoutQuick rating with optional details
inlineFull feedback form rendered directlyDedicated feedback sections

Quick Example

<div id="cobbl-feedback-widget" data-run-id="your-run-id"></div>
<script src="https://cdn.jsdelivr.net/npm/@cobbl-ai/feedback-widget"></script>

How It Works

  1. Get a Run ID: When you run a prompt with CobblAdminClient, you receive a runId in the response.
  2. Display the Widget: Mount the widget with the runId to collect user feedback.
  3. Users Submit Feedback: Users can rate the response and provide optional comments.
  4. Feedback is Stored: All feedback is sent to Cobbl and associated with the prompt run.
// 1. Run a prompt (server-side)
const result = await adminClient.runPrompt('customer_email', { name: 'John' })

// 2. Pass runId to your frontend
const runId = result.runId

// 3. Display the widget (client-side)
<FeedbackWidget runId={runId} />

Browser Support

BrowserMinimum Version
Chrome73+ (March 2019)
Firefox101+ (May 2022)
Safari16.4+ (March 2023)
Edge79+ (January 2020)

Next Steps

On this page