Adding a Ticket Center to your Lovable app gives your signed in users a full support portal inside your product: open conversations, view history, and reply, without leaving the app. This guide is for users building an authenticated app with Lovable's AI builder.
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 Lovable specific path.
Set Up Your Helpdesk
Open the Helpdesky dashboard and go to Ticket Center in the sidebar. You will need two things from this page:
- Your Helpdesk ID, shown in the embed snippet at the top
- The Verification Tool further down, used later to confirm your HMAC matches
Decide which route in your Lovable app will host the support panel. A typical choice is /support or /account/support, gated by your existing auth.
Generate Your HMAC Secret
On the Ticket Center page, click Generate HMAC Secret and copy it immediately. Helpdesky never shows it again.
In Lovable, open your project settings and add the secret as a server side environment variable. Use this exact name so the AI builder prompt below works without edits:
- Key:
HELPDESKY_HMAC_SECRET - Value: the secret you just copied
Also add your helpdesk ID:
- Key:
HELPDESKY_HELPDESK_ID - Value: the ID from the embed snippet
Lovable apps that use Supabase as the backend should store these in the Supabase project's Edge Function secrets so the HMAC can be computed inside an Edge Function rather than in the browser. Never put the secret in a public env var.
Add the Embed Code
The Ticket Center embed is one container div and one script tag. The values that change per request are the signed in user's email and the HMAC signature your server computes for that email.
<div id="hdh-ticket-center"></div>
<script src="https://helpdesky.io/ticket-center.js"
data-helpdesk-id="YOUR_HELPDESK_ID"
data-email="USER_EMAIL"
data-signature="HMAC_SIGNATURE"></script>
For a typical Lovable + Supabase stack, create an Edge Function called ticket-center-token that:
- Reads the signed in user from the Supabase auth context
- Computes
HMAC_SHA256(user.email, HELPDESKY_HMAC_SECRET) - Returns
{ email, signature, helpdeskId }to the client
Then on the support page, fetch from that Edge Function once on mount and inject the script tag with the returned values. Do not call the function from a public route, and do not store the secret in any client visible variable.
Copy This Prompt for Your AI Builder
Paste the prompt below into Lovable's AI chat. It tells Lovable which secret to use, 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
then add a /support route behind our existing auth. create a server side endpoint (supabase edge function if we are on supabase) that computes HMAC SHA256 of the signed in user's email using HELPDESKY_HMAC_SECRET and returns email + signature + helpdeskId. inject those values into the helpdesky embed script on the support page.
do not expose the secret to the client. confirm the panel loads for a signed in test user when you are done.
Lovable will fetch the Ticket Center Setup Guide and follow the canonical steps instead of guessing the embed format or the HMAC algorithm.
Test It
Sign in to your Lovable app as a real user and open the support route. The Ticket Center panel should render with that user's conversations. If you see an authentication error, copy the email and signature your Edge Function produced, then paste them into the Verification Tool in the Helpdesky dashboard. The expected signature shown there must match yours exactly.
Common issues:
- Signature mismatch. Usually trailing whitespace in the secret pasted into Lovable, or signing a different field than the email.
- Secret leaked into the client bundle. If your build inlined the secret, the env var name probably had a public prefix. Rename it and rebuild.
- Empty panel. Make sure the test user has at least one conversation, or start one from another channel.
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.