Install HelpAlive with an AI coding agent prompt

Add HelpAlive (an in-app AI agent) to this web app. Make only the changes below.

1. Load the HelpAlive script on every page, except pages that show data the app's owner says HelpAlive must not receive (ask them which), and only after cookie consent if this app asks for it. Put this tag in the HTML <head> of the layout or template every page uses (for example index.html, the root layout in Next.js, or the base template in Rails, Django or Laravel):

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

2. Tell HelpAlive who is signed in. Wherever the app already knows the signed-in user (right after login, and on every page load while they stay signed in), run this, filled in with the app's own user and company objects:

// Lets the calls below run before our script has finished loading. Keep it first.
window.HelpAlive = window.HelpAlive || { q: [] };
["identify", "reset", "setConsent", "track"].forEach((m) => {
  if (!HelpAlive[m]) HelpAlive[m] = (...args) => HelpAlive.q.push([m, args]);
});

// On every page while someone is logged in, starting right after login
HelpAlive.identify({
  userId: String(user.id),      // required: your own id for this person
  tenantId: String(company.id), // required: their company or workspace
  tenantName: company.name,     // required: the company's name, shown in your dashboard
  displayName: user.name,       // required: the person's name (or their email), shown in your dashboard
  email: user.email,            // optional
  role: user.role,              // recommended, helps the agent
  plan: company.plan,           // recommended, helps the agent
  createdAt: user.createdAt,    // optional: signup date, Unix time in seconds
})

userId and displayName are required: userId a stable id for the person (not their email if it can change), passed as a string, and displayName their name. If this app is B2B, with customer companies, workspaces or organizations as tenants, tenantId (that id, as a string) and tenantName (its name) are required too; if it is B2C, where people sign up on their own with no company, leave both out (in an app with both, leave them out only for the individuals). role and plan are recommended, because the agent reads both; fill them if the app has them. email and createdAt are optional (createdAt is the signup date in Unix seconds).

If that code is in a TypeScript file, add this declaration to a .d.ts file the project includes:

// In a .d.ts file your project includes, for example helpalive.d.ts
declare var HelpAlive: any

and type the queue line's rest argument:

if (!HelpAlive[m]) HelpAlive[m] = (...args: unknown[]) => HelpAlive.q.push([m, args]);

3. Where the app logs the person out, and wherever it ends a session, run this. Keep it apart from the code in step 2, never right after identify():

// In your logout code, and wherever your app ends a session. Until this runs,
// the browser keeps the person, and the next visitor's events count as theirs.
HelpAlive.reset()

4. If this app sends a Content-Security-Policy, add these sources to it without removing anything. If its script-src uses a nonce, put the page's nonce on the HelpAlive script tag the same way the app's other scripts get theirs:

script-src https://cdn.helpalive.com;
connect-src https://api.helpalive.com https://chat.helpalive.com;

Use the app's existing way of reading the current user. Don't add packages or change anything else. When you're done, list the files you changed, and tell me to sign in to the app and look for the HelpAlive agent.

The full guide, if you need more detail: https://docs.helpalive.com/installation

Add HelpAlive user verification to this app. HelpAlive is already installed: the page calls HelpAlive.identify() for the signed-in person. Make only the changes below.

1. On the server, wherever the app knows the signed-in user, create a "user token": a JWT signed with HS256, keyed on the text of the environment variable HELPALIVE_SIGNING_SECRET, with these claims:
   - sub: the same user id the page passes to identify() as userId, as a string
   - tenant: the same id the page passes as tenantId, as a string. Leave it out if the page passes no tenantId.
   Use the usual JWT library for this language. Don't add exp, kid or any other claim.

2. Get the token to the browser for the signed-in person only. Use whichever fits the app: print it into the page from the server template, or add it to an endpoint the app already has that returns the current user. Send it with Cache-Control: no-store. The secret itself must never reach the browser.

3. Change the identify() call to pass the token. The token says who the person is, so userId and tenantId are no longer passed:

// Lets the calls below run before our script has finished loading. Keep it first.
window.HelpAlive = window.HelpAlive || { q: [] };
["identify", "reset", "setConsent", "track"].forEach((m) => {
  if (!HelpAlive[m]) HelpAlive[m] = (...args) => HelpAlive.q.push([m, args]);
});

// In place of your identify() call from step 1.
// The token already says who the person is and which company they belong to.
HelpAlive.identify({
  userToken,                    // the token your server made for this person
  tenantName: company.name,     // optional: the company's name, shown in your dashboard
  displayName: user.name,       // optional
  email: user.email,            // optional
  role: user.role,              // recommended, helps the agent
  plan: company.plan,           // recommended, helps the agent
  createdAt: user.createdAt,    // optional: signup date, Unix time in seconds
})

4. Add HELPALIVE_SIGNING_SECRET to the app's list of environment variables (for example .env.example) with no value. I will set the real value myself.

When you're done, list the files you changed.

The full guide, if you need more detail: https://docs.helpalive.com/sdk/verify-users