Pullreque.st

Configuration Options

FeedbackProvider Props

| Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | projectKey | string | ✅ Yes | - | Your project's public key | | endpoint | string | No | https://pullreque.st/api/feedback | Custom API endpoint | | children | ReactNode | ✅ Yes | - | Your app components |

useFeedback Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | onBeforeSubmit | (data) => data or Promise<data> | undefined | Transform or validate data before submission | | onSuccess | (response) => void | undefined | Called after successful submission | | onError | (error) => void | undefined | Called when submission fails | | autoCaptureUrl | boolean | true | Automatically capture current page URL |

Submit Options

| Field | Type | Required | Description | | --- | --- | --- | --- | | message | string | ✅ Yes | Feedback message (1-10,000 characters) | | userEmail | string | No | User's email address | | pageUrl | string | No | Page URL (auto-captured if enabled) | | meta | Record<string, unknown> | No | Custom metadata object | | captchaToken | string | No | hCaptcha token (if enabled) | | assets | Array<Asset> | No | Images/videos (max 3, max 3MB image/50MB video) |

Widget Init Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | projectKey | string | Required | Your project public key | | position | 'bottom-right', 'bottom-left', 'top-right', or 'top-left' | 'bottom-right' | Button position | | buttonText | string | 'Feedback' | Button text | | primaryColor | string | '#000000' | Primary color (hex) |

Example: Custom Metadata

Track additional context with feedback:
const { submit } = useFeedback()

await submit({
  message: 'Feature request',
  meta: {
    page: window.location.pathname,
    userAgent: navigator.userAgent,
    viewport: `${window.innerWidth}x${window.innerHeight}`,
    timestamp: new Date().toISOString(),
    version: '1.2.3'
  }
})

Example: Error Handling

const { submit, error, reset } = useFeedback({
  onError: (error) => {
    // Log to error tracking service
    console.error('Feedback submission failed:', error)

    // Show toast notification
    toast.error('Failed to submit feedback. Please try again.')
  },
  onSuccess: (response) => {
    toast.success('Thank you for your feedback!')
  }
})

// Clear error manually
useEffect(() => {
  if (error) {
    const timer = setTimeout(() => reset(), 5000)
    return () => clearTimeout(timer)
  }
}, [error, reset])

Next Steps