Install HelpAlive in a React app (Vite or Create React App)

<!-- Paste before </head> -->
<script src="https://cdn.helpalive.com/sdk/helpalive.js" data-api-key="YOUR_PROJECT_KEY" async></script>

export type HelpAliveUser = {
  userId: string;       // required: your own id for this person
  displayName: string;  // required: their name or email, shown in your dashboard
  tenantId?: string;    // B2B: their company or workspace id
  tenantName?: string;  // B2B: that company's name
  email?: string;
  role?: string;        // recommended, the agent reads it
  plan?: string;        // recommended, the agent reads it
  createdAt?: number;   // signup date, Unix time in seconds
};

// Queues calls made before our script has loaded.
function helpAlive() {
  const w = window as any;
  w.HelpAlive = w.HelpAlive || { q: [] };
  for (const m of ["identify", "reset", "setConsent", "track"]) {
    if (!w.HelpAlive[m]) w.HelpAlive[m] = (...args: unknown[]) => w.HelpAlive.q.push([m, args]);
  }
  return w.HelpAlive;
}

export function identifyUser(user: HelpAliveUser) {
  helpAlive().identify(user);
}

export function resetUser() {
  helpAlive().reset();
}

import { useEffect } from "react";
import { identifyUser } from "./helpalive";

// Inside your AuthProvider, or any component that has the signed-in user
useEffect(() => {
  if (!user) return; // still loading, or signed out: nothing to send yet
  identifyUser({
    userId: String(user.id),
    displayName: user.name,
    tenantId: String(user.company.id),   // leave out in a B2C app
    tenantName: user.company.name,       // leave out in a B2C app
    email: user.email,
    role: user.role,
    plan: user.company.plan,
    createdAt: Math.floor(new Date(user.createdAt).getTime() / 1000),
  });
}, [user]);

import { resetUser } from "./helpalive";

async function logout() {
  resetUser();
  await api.post("/logout");
  navigate("/login");
}