Quick Start
Get up and running in under 5 minutes.
Step 1: Get Your Project Key
- Navigate to your project settings
- Copy your project public key (starts with
prj_pk_)
Step 2: Choose Integration Method
Option A: Headless React (Recommended)
Full control over UI and styling.
import { FeedbackProvider, useFeedback } from '@pullreque.st/button/react/headless'
import { useState } from 'react'
function App() {
return (
<FeedbackProvider projectKey="prj_pk_YOUR_KEY">
<YourApp />
</FeedbackProvider>
)
}
function FeedbackButton() {
const { submit, isSubmitting, error } = useFeedback()
const [message, setMessage] = useState('')
return (
<form onSubmit={async (e) => {
e.preventDefault()
await submit({ message })
}}>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
className="border rounded p-2"
/>
<button disabled={isSubmitting} className="bg-blue-500 text-white px-4 py-2 rounded">
{isSubmitting ? 'Sending...' : 'Send Feedback'}
</button>
{error && <p className="text-red-500">{error.message}</p>}
</form>
)
}Option B: CDN Quick Setup
Ready-to-use widget with minimal code.
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>My Application</h1>
<script src="https://pullreque.st/cdn/button.js"></script>
<script>
PullrequeStButton.init({
projectKey: 'prj_pk_YOUR_KEY',
position: 'bottom-right',
buttonText: 'Feedback',
primaryColor: '#000000'
})
</script>
</body>
</html>