CornerCue CornerCue Docs

Frameworks

React Integration

Use the CornerCue React package to wrap any element as a feedback trigger.

Framework Guides


Install

npm install @cornercue/react

Basic usage

import { FeedbackButton } from "@cornercue/react";
function App() {
return (
<FeedbackButton
projectId="YOUR_PROJECT_ID"
user={{ id: "user_123", email: "john@example.com" }}
metadata={{ plan: "pro", version: "2.1.0" }}
>
<button className="my-feedback-btn">Give Feedback</button>
</FeedbackButton>
);
}

Main props

PropTypeRequiredDescription
projectIdstringYesCornerCue project ID
userUserInfo | nullNoUser info (id, username, email)
metadataMetadata | nullNoExtra key-value context
defaultType"bug" | "feature" | "feedback"NoSkip menu and open direct type
configWidgetConfigNoWidget behavior overrides
eventsWidgetEventsNoEvent callbacks
childrenReactNodeYesTrigger element
classNamestringNoOptional wrapper class

Skip type menu

<FeedbackButton projectId="YOUR_PROJECT_ID" defaultType="bug">
<button>Report Bug</button>
</FeedbackButton>

Event callbacks

<FeedbackButton
projectId="YOUR_PROJECT_ID"
events={{
onOpen: () => console.log("Widget opened"),
onClose: () => console.log("Widget closed"),
onSubmit: (payload) => console.log("Submitting:", payload),
onSubmitSuccess: (payload) => console.log("Sent", payload),
onSubmitError: (error, payload) => console.error("Failed", error, payload),
}}
>
<button>Feedback</button>
</FeedbackButton>