# For vanilla JavaScript/TypeScript
npm install @quotientjs/client
 
# For React applications
npm install @quotientjs/react

import { QuotientClient } from '@quotientjs/client';
 
// Initialize the SDK
const quotient = await QuotientClient.init({
  // Your public API key
  apiKey: 'pk_test_your_api_key'
});
 
// Track a page view
await quotient.analytics.event({
  eventType: 'pageView'
});
 
// Identify a user -- use this within a form submission handler
//  to implement contact capture and list building for your email campaigns.
await quotient.people.upsert({
  emailAddress: 'user@example.com',
  firstName: 'Jane',
  lastName: 'Doe'
});

import { QuotientProvider, useQuotient } from '@quotientjs/react';
 
// Wrap your app
function App() {
  return (
    <QuotientProvider 
      // Your public API key
      clientOptions={{ apiKey: 'pk_test_your_api_key' }}
      // Set to true to automatically track page views
      autoTrackPageViews={true}
    >
      <YourApp />
    </QuotientProvider>
  );
}
 
// Use in components
function MyComponent() {
  const { client } = useQuotient();
  
  const upsertPerson = () => {
    client?.people.upsert({
      emailAddress: 'user@example.com',
      firstName: 'Jane',
      lastName: 'Doe'
    });
  };
  
  return <button onClick={upsertPerson}>Click Me</button>;
}

// Track product views
await quotient.analytics.event({
  eventType: 'productView',
  productId: 'SKU123',
  productName: 'Winter Jacket',
  price: 99.99
});

// Identify users on signup or from non-authenticated forms
await quotient.people.upsert({
  emailAddress: user.email,
  properties: {
    plan: 'pro',
    company: 'Acme Corp',
    role: 'admin'
  }
});