Beginner

Installation

Install and configure ProofConvert in 2 minutes

Install the package

1npm install @proofconvert/react

Add the Provider

Wrap your application with the ProofConvertProvider. It will automatically load the SDK.

Next.js (App Router)

1// app/layout.tsx
2import { ProofConvertProvider } from '@proofconvert/react';
3
4export default function RootLayout({ children }) {
5  return (
6    <html lang="en">
7      <body>
8        <ProofConvertProvider 
9          projectId="proj_..."
10          apiKey="pcv_..."
11          mode="development" // Optional: Remove in production
12        >
13          {children}
14        </ProofConvertProvider>
15      </body>
16    </html>
17  );
18}

Standard React (Vite / CRA)

1// src/App.tsx
2import { ProofConvertProvider } from '@proofconvert/react';
3
4export default function App() {
5  return (
6    <ProofConvertProvider 
7      projectId="proj_..." 
8      apiKey="pcv_..."
9      mode="development"
10    >
11      <YourApp />
12    </ProofConvertProvider>
13  );
14}

💡

Tip: Where to find your keys? Go to your Dashboard → Select your project → Settings → API Keys

⚠️

Local Development: We recommend setting mode="development" when testing on localhost. This prevents test feedback from affecting your production analytics.

Create your first trigger

Before using ProofConvert in your code, create a trigger in the Dashboard:

Go to Dashboard → Your Project
Click on "Create a trigger"
Give it a name (e.g., "Export PDF") and an identifier (e.g., "export-pdf")
Configure your question and options

ℹ️

What's a trigger? A trigger represents a specific action or feature in your app (like "Export PDF", "Send Email", "Generate Report", etc.). Each trigger has its own feedback question and appears right after the user completes that action.

✅

That's it! You can now use this trigger in your code.

1// app/layout.tsx 2import { ProofConvertProvider } from '@proofconvert/react'; 3 4export default function RootLayout({ children }) { 5 return ( 6 <html lang="en"> 7 <body> 8 <ProofConvertProvider 9 projectId="proj_..." 10 apiKey="pcv_..." 11 mode="development" // Optional: Remove in production 12 > 13 {children} 14 </ProofConvertProvider> 15 </body> 16 </html> 17 ); 18}

1// src/App.tsx 2import { ProofConvertProvider } from '@proofconvert/react'; 3 4export default function App() { 5 return ( 6 <ProofConvertProvider 7 projectId="proj_..." 8 apiKey="pcv_..." 9 mode="development" 10 > 11 <YourApp /> 12 </ProofConvertProvider> 13 ); 14}