Add a Ticket Center to Your Bolt.new App

Adding a Ticket Center to Bolt.new gives your signed in users a full support portal: open conversations, view history, and reply, all without leaving your app. This guide assumes you already have authentication in place.

The Ticket Center uses HMAC SHA256 authentication. Your server signs the user's email with a secret, the embed sends the signature, and Helpdesky verifies both before rendering. For the underlying concepts, read the Ticket Center Setup Guide. Below is the Bolt.new specific path.

Ticket Center vs Contact Form: the Ticket Center is for signed in users. If you only need anonymous visitors to send a message, use a Contact Form instead.

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 matches

Generate Your HMAC Secret

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

Add the secret to your Bolt.new project's environment variables (the Variables panel in the Bolt project settings). Use these exact names so the AI prompt below works without edits:

• HELPDESKY_HMAC_SECRET — the secret you just copied
• HELPDESKY_HELPDESK_ID — the ID from the embed snippet

Bolt.new generated apps usually run on a Node server (Express or Fastify), so server only env vars stay server only.

The secret must stay server side. Never expose it to the browser, embed it in client side bundles, or commit it to a public repo.

Compute the HMAC on Your Server

Bolt typically scaffolds an Express + Vite project. Add a small server route that returns the email and signature for the signed in user:

import crypto from "node:crypto";

app.get("/api/ticket-center-token", requireAuth, (req, res) => {
  const email = req.user.email;
  const signature = crypto
    .createHmac("sha256", process.env.HELPDESKY_HMAC_SECRET)
    .update(email)
    .digest("hex");
  res.json({
    email,
    signature,
    helpdeskId: process.env.HELPDESKY_HELPDESK_ID,
  });
});

Add the Embed Code

On the support page, fetch the token once on mount and inject the embed script with the returned values:

import { useEffect, useState } from "react";

export default function Support() {
  const [t, setT] = useState(null);
  useEffect(() => {
    fetch("/api/ticket-center-token", { credentials: "include" })
      .then((r) => r.json())
      .then(setT);
  }, []);
  useEffect(() => {
    if (!t) return;
    const s = document.createElement("script");
    s.src = "https://helpdesky.io/ticket-center.js";
    s.setAttribute("data-helpdesk-id", t.helpdeskId);
    s.setAttribute("data-email", t.email);
    s.setAttribute("data-signature", t.signature);
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, [t]);
  return <div id="hdh-ticket-center" />;
}

Copy This Prompt for Your AI Builder

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, plus HELPDESKY_HELPDESK_ID.
read the tutorial first: https://docs.helpdesky.io/ticket-center-setup
the project is a vite + express app generated by bolt.new. add a /api/ticket-center-token route behind the existing auth middleware that returns email + signature + helpdeskId. then add a /support page that fetches the token and injects the helpdesky script.
do not expose the secret to the client. confirm the panel loads for a signed in test user when you are done.

Test It

Sign in to your 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 user's email exactly as Helpdesky stores it.
• Empty panel. Make sure the test user has at least one conversation, or start one from another channel first.
• Secret leaked into client bundle. If your build inlined the secret, the env var name probably had a public prefix (VITE_, PUBLIC_, NEXT_PUBLIC_). Rename it and rebuild.

Next Steps

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.