Installation
How to install and set up the Cobbl Feedback Widget
Installation Methods
Choose the installation method that matches your project:
npm install @cobbl-ai/feedback-widgetChoose Your Integration
Script Tag
For static HTML, WordPress, Webflow, or any site where you can add a script tag.
JavaScript
For SPAs, vanilla JS apps, or any framework with programmatic control.
React
For React applications with proper hooks and lifecycle management.
Requirements
For Script Tag / CDN
No additional requirements — just include the script in your HTML.
For npm Package
- Node.js: 18.0.0 or higher
- React (optional): 16.8.0 or higher for the React component
React is an optional peer dependency. The widget works without React using the vanilla JS API.
Package Exports
The package provides multiple entry points:
| Import Path | Description |
|---|---|
@cobbl-ai/feedback-widget | JavaScript |
@cobbl-ai/feedback-widget/react | React |
@cobbl-ai/feedback-widget/browser | Browser global (auto-mounting) |
JavaScript Import
import { cobblWidget } from '@cobbl-ai/feedback-widget'React Import
import { FeedbackWidget } from '@cobbl-ai/feedback-widget/react'Getting the Run ID
The widget requires a runId from a prompt execution to associate feedback
with.
The runId comes from running a prompt with the CobblAdminClient:
import { CobblAdminClient } from '@cobbl-ai/sdk'
const adminClient = new CobblAdminClient({
apiKey: process.env.COBBL_API_KEY,
})
const result = await adminClient.runPrompt('my-prompt', {
topic: 'AI Safety',
})
// Use result.runId with the feedback widget
console.log(result.runId)Store the runId alongside your AI response so users can provide feedback
later.
Configuration Options
All integration methods share the same configuration options. See the specific integration pages for detailed API references with defaults:
- Script Tag - Data attributes reference
- JavaScript - JavaScript API reference
- React - React props reference
- TypeScript - TypeScript type definitions
Common Options
| Option | Type | Required | Description |
|---|---|---|---|
runId | string | Yes | Run ID from prompt execution |
variant | 'trigger' | 'thumbs' | 'inline' | No | Display variant |
position | WidgetPosition | No | Flyout position |
triggerButtonText | string | No | Trigger button text |
onSuccess | (feedbackId: string) => void | No | Success callback |
onError | (error: Error) => void | No | Error callback |
Position Options
For trigger and thumbs variants, the flyout can be positioned in 8 directions:
type WidgetPosition =
| 'top-left'
| 'top'
| 'top-right'
| 'right'
| 'bottom-right'
| 'bottom'
| 'bottom-left'
| 'left'