Add a Ticket Center to Your v0 App

Adding a Ticket Center to v0 by Vercel 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 v0 by Vercel 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 Vercel project's environment variables (Project Settings → Environment Variables). Use these exact names:

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

Make sure neither variable has the NEXT_PUBLIC_ prefix. Anything with that prefix is bundled into the client.

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 in a Route Handler

v0 generates Next.js App Router projects. Create a route handler at app/api/ticket-center-token/route.ts:

import crypto from "node:crypto";
import { NextResponse } from "next/server";
import { auth } from "@/lib/auth";

export async function GET() {
  const session = await auth();
  if (!session?.user?.email) {
    return new NextResponse("Unauthorized", { status: 401 });
  }
  const signature = crypto
    .createHmac("sha256", process.env.HELPDESKY_HMAC_SECRET!)
    .update(session.user.email)
    .digest("hex");
  return NextResponse.json({
    email: session.user.email,
    signature,
    helpdeskId: process.env.HELPDESKY_HELPDESK_ID,
  });
}

Replace @/lib/auth with whatever auth helper your v0 app uses (NextAuth, Clerk, Supabase, etc).

Add the Embed Code

Create a client component that fetches the token and renders the embed:

"use client";
import Script from "next/script";
import { useEffect, useState } from "react";

export default function TicketCenter() {
  const [t, setT] = useState<any>(null);
  useEffect(() => {
    fetch("/api/ticket-center-token").then((r) => r.json()).then(setT);
  }, []);
  if (!t) return null;
  return (
    <>
      <div id="hdh-ticket-center" />
      <Script
        src="https://helpdesky.io/ticket-center.js"
        data-helpdesk-id={t.helpdeskId}
        data-email={t.email}
        data-signature={t.signature}
        strategy="afterInteractive"
      />
    </>
  );
}

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 next.js app generated by v0. add a route handler at app/api/ticket-center-token that uses the existing auth helper to get the signed in user, computes the HMAC SHA256 of the user's email with HELPDESKY_HMAC_SECRET, and returns email + signature + helpdeskId. then create a client component on /support that fetches the token and injects the helpdesky script using next/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.