Add a Ticket Center to Your Shopify App

Adding a Ticket Center to your Shopify app gives merchants and their customers a built in support portal without leaving the Shopify surface. This guide covers both contexts where Shopify apps live: an embedded admin app loaded inside the Shopify Admin, and a customer account UI extension that appears on the storefront.

The Ticket Center requires HMAC SHA256 authentication, which means your Shopify app server signs each user's email before the embed loads. If you have not already, read the Ticket Center Setup Guide for the underlying concepts. Below is the Shopify specific path.

Set Up Your Helpdesk

Sign in to Helpdesky and open the Ticket Center page in the dashboard sidebar. You will need two things from this page later:

• Your Helpdesk ID, found in the embed snippet at the top of the page
• The dashboard's Verification Tool, used to confirm your HMAC matches what Helpdesky expects

If your Shopify app does not yet have a support page, plan one route in your Remix or Node app. A common pattern is /app/support for embedded admin apps, or a SupportPage block inside a customer account UI extension.

Generate Your HMAC Secret

On the Ticket Center page, click Generate HMAC Secret. Copy the secret immediately. Helpdesky never shows it again.

Store the secret in your Shopify app's environment. For Shopify CLI based projects, add it to the local .env file and to your hosting provider's secrets:

HELPDESKY_HMAC_SECRET=hdh_secret_xxxxxxxxxxxxxxxx
HELPDESKY_HELPDESK_ID=your_helpdesk_id

The secret must stay on the server. Never expose it through a Remix loader response, a customer account API response, or any client side bundle.

Compute the HMAC on Your Server

Compute the HMAC SHA256 of the user's email on every page load. The user identity comes from Shopify itself, so you do not need a separate login.

For an embedded admin app the merchant is the user. Get their email from the session token or the Shopify Admin GraphQL API:

import crypto from "node:crypto";
import { authenticate } from "~/shopify.server";

export async function loader({ request }) {
  const { admin, session } = await authenticate.admin(request);
  const shopRes = await admin.graphql(`{ shop { email } }`);
  const { data } = await shopRes.json();
  const email = data.shop.email;

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

  return { email, signature, helpdeskId: process.env.HELPDESKY_HELPDESK_ID };
}

For a customer account UI extension the buyer is the user. Compute the HMAC inside your extension's backend (a serverless function or your existing app server) using the verified customer email from Shopify's customer account API. Pass the signature to the extension over a signed request, never directly to the storefront.

Add the Embed Code

In your Remix route's component, render the Ticket Center container and load the script with the values from your loader:

import { useLoaderData } from "@remix-run/react";

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

For embedded admin apps, this page can sit inside an App Bridge Page component. App Bridge runs the Ticket Center inside the same iframe as the rest of your app, so no extra configuration is required.

For customer account extensions, render the Ticket Center inside an <iframe> that points at a route on your app server. Customer account extensions cannot execute arbitrary third party scripts directly, but they can embed an iframe pointing at a page you control where the script lives.

Test It

Open your Shopify app, navigate to the support page, and confirm the Ticket Center loads with the user's conversations. If the panel shows an authentication error, copy the email and the signature your server generated, 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 a stray newline in the secret, or signing a different value than the email (for example signing email + shopId).
• Empty Ticket Center. Confirm the email matches one that has at least one conversation, or open a fresh conversation as a test.
• Script blocked. Check your app's Content Security Policy. Add helpdesky.io to script-src and connect-src.

Next Steps

Once the Ticket Center is live, route your support emails into the same helpdesk by following the Email Forwarding Setup Guide. For public marketing pages where visitors are not signed in, see the Contact Form Setup Guide instead.