Add a Ticket Center to Your Next.js App

Adding a Ticket Center to Next.js 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 Next.js 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 .env.local (and to your hosting provider's env vars for production):

HELPDESKY_HMAC_SECRET=hdh_secret_xxxxxxxxxxxxxxxx
HELPDESKY_HELPDESK_ID=your_helpdesk_id

Make sure neither name 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

Create 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 library you use (NextAuth, Clerk, Supabase, Lucia, etc).

Add the Embed Code

A clean App Router pattern is a server component that fetches the token, then a client component for the embed. Even simpler: do both inline in a server component since we already have access to the session.

app/support/page.tsx:

import crypto from "node:crypto";
import { auth } from "@/lib/auth";
import TicketCenter from "./ticket-center";
import { redirect } from "next/navigation";

export default async function SupportPage() {
  const session = await auth();
  if (!session?.user?.email) redirect("/login");

  const email = session.user.email;
  const signature = crypto
    .createHmac("sha256", process.env.HELPDESKY_HMAC_SECRET!)
    .update(email)
    .digest("hex");

  return (
    <TicketCenter
      email={email}
      signature={signature}
      helpdeskId={process.env.HELPDESKY_HELPDESK_ID!}
    />
  );
}

app/support/ticket-center.tsx:

"use client";
import Script from "next/script";

export default function TicketCenter({ email, signature, helpdeskId }) {
  return (
    <>
      <div id="hdh-ticket-center" />
      <Script
        src="https://helpdesky.io/ticket-center.js"
        data-helpdesk-id={helpdeskId}
        data-email={email}
        data-signature={signature}
        strategy="afterInteractive"
      />
    </>
  );
}

This pattern computes the HMAC on every server render, so a stolen signature can never be replayed across users.

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.