Add a Ticket Center to Your Replit App

Adding a Ticket Center to your Replit app gives your signed in users a full support portal: they can open conversations, view history, and reply, all without leaving your app. This guide is for users vibe coding an authenticated app on Replit who already have some form of login.

The Ticket Center uses HMAC SHA256 authentication. Your server signs the user's email with a secret, the embed sends the signature alongside the email, and Helpdesky verifies both before showing the panel. For the underlying concepts, read the Ticket Center Setup Guide. The steps below are the Replit specific path.

Set Up Your Helpdesk

Open the Helpdesky dashboard and go to Ticket Center in the sidebar. From this page you will need:

• Your Helpdesk ID, visible in the embed snippet at the top
• The Verification Tool further down, used later to confirm your HMAC is correct

Decide which route in your Replit app will host the support panel. A common choice is /app/support or /account/support, behind your existing auth middleware.

Generate Your HMAC Secret

On the Ticket Center page, click Generate HMAC Secret and copy the secret right away. Helpdesky never shows it a second time.

Add the secret to your Replit project's Secrets tab (the lock icon in the sidebar). Use this exact name so the AI builder prompt below works without edits:

• Key: HELPDESKY_HMAC_SECRET
• Value: the secret you just copied

Also store your helpdesk ID:

• Key: HELPDESKY_HELPDESK_ID
• Value: the ID from the embed snippet

The secret must stay server side. Do not prefix it with VITE_ or PUBLIC_, or the bundler will leak it into your client code.

Add the Embed Code

On the support page, compute the HMAC server side and pass the values to the rendered HTML. For an Express + EJS app:

import crypto from "node:crypto";

app.get("/support", requireAuth, (req, res) => {
  const email = req.user.email;
  const signature = crypto
    .createHmac("sha256", process.env.HELPDESKY_HMAC_SECRET)
    .update(email)
    .digest("hex");

  res.render("support", {
    helpdeskId: process.env.HELPDESKY_HELPDESK_ID,
    email,
    signature,
  });
});

In the template:

<div id="hdh-ticket-center"></div>
<script src="https://helpdesky.io/ticket-center.js"
  data-helpdesk-id="<%= helpdeskId %>"
  data-email="<%= email %>"
  data-signature="<%= signature %>"></script>

For a React + Vite app on Replit, do the HMAC step in your API route (or a /api/support-token endpoint) and inject the values into the page via a server rendered template or a one shot fetch before mounting the script.

Copy This Prompt for Your AI Builder

If you are using Replit's AI agent to wire this up, paste the prompt below into the chat. It tells the agent which secret to read, where to read the canonical setup steps, and what success looks like.

we need to add the helpdesky ticket center that has HMAC validation.
i added the secret HELPDESKY_HMAC_SECRET to replit secrets, plus HELPDESKY_HELPDESK_ID.
read the tutorial first: https://docs.helpdesky.io/ticket-center-setup
then add a /support route behind our existing auth, compute the HMAC SHA256 of the signed in user's email server side using HELPDESKY_HMAC_SECRET, and pass email + signature into the embed script.
do not expose the secret to the client. confirm the panel loads for a signed in test user when you are done.

The agent will fetch the Ticket Center Setup Guide and follow the canonical steps instead of guessing.

Test It

Sign in to your Replit app as a real user and open the support route. The Ticket Center should render with that user's conversations. If you see an authentication error, copy the email and signature your server generated, then paste them into the Verification Tool in the Helpdesky dashboard. The expected signature must match yours exactly.

Common issues:

• Signature mismatch. Usually trailing whitespace in the secret, or signing the wrong field. Sign the email exactly as Helpdesky stores it.
• Empty panel. Open a conversation from another channel for that email so there is something to display.
• Secret leaked into client bundle. If your Vite build inlined the secret, rename the env var so it does not start with VITE_ and rebuild.

Next Steps

Once the Ticket Center is live for signed in users, add a public Contact Form on your marketing pages for visitors who are not signed in. Route inbound support email into the same inbox with the Email Forwarding Setup Guide.