> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# How to setup the Ticket Center plugin
*Learn how to embed the Crisp Ticket Center in an authenticated customer area.*
**Ticket Center** lets customers view, open, and reply to support requests from your own website. It is designed for logged-in areas where your application already knows and verifies the customer email address.
---
# ${color}[#0080dd](Before you start)
Ticket Center should be embedded inside an authenticated area, such as a dashboard or account portal. Your backend must generate the iframe URL with the customer email and a secure HMAC signature. To configure it, open [**Crisp**](https://app.crisp.chat), then go to **Plugins → Ticket Center → Settings**.
__You will need:__
* Access to [**Crisp**](https://app.crisp.chat) and the **Ticket Center** plugin settings
* Your Crisp **Website ID**
* The authenticated customer email
* The Ticket Center **HMAC secret key**
* A backend able to generate **HMAC-SHA256** signatures
|| The Ticket Center plugin is available on the **Plus** plan.
---
# ${color}[#0080dd](Watch the video tutorial)
${youtube}[Video tutorial on how to setup Ticket Center](xF6N9J2uJRE)
---
# ${color}[#0080dd](What Ticket Center does)
Ticket Center adds a support area inside your own dashboard. Customers can create tickets, browse current and past requests, select a category, and reply directly from your website. In Crisp, those tickets appear as regular conversations your team can handle from the inbox.
---
# ${color}[#0080dd](Embed Ticket Center)
Add the following iframe to the authenticated page where Ticket Center should appear.
```html
```
__Replace these placeholders from your backend:__
* **[WEBSITE_ID]** → your Crisp website identifier, available from **Settings → Workspace Settings → Setup & Integrations**
* **email=[EMAIL]** → the authenticated customer email
* **hmac=[HMAC(EMAIL, SECRET)]** → a lowercase hexadecimal **HMAC-SHA256** signature of the email, generated with your Ticket Center secret
__Optional URL arguments are also available:__
* **nickname** → the customer full name, for example `nickname=John%20Doe`
* **locale** → the display language, for example `locale=en`
* **participants** → comma-separated URL-encoded CC participant emails, when supported by your Crisp plan
|| The `referrerpolicy` and `sandbox` attributes reduce data leakage and limit what the embedded Ticket Center can access from your dashboard.
---
# ${color}[#0080dd](Configure Ticket Center)
#### ${color}[#445055](Add categories)
Categories let customers classify their request from the submission form. In Crisp, the selected category is added as conversation data, which can help your team route tickets internally.
#### ${color}[#445055](Add FAQs)
You can add up to five frequently asked questions next to the ticket form. This can reduce low-value tickets by answering common questions before the customer submits a request.
#### ${color}[#445055](Add allowed domains)
Allowed domains protect Ticket Center against malicious embeds. Add the domains where Ticket Center is allowed to appear from the **Security** section of the plugin settings.
---
# ${color}[#0080dd](Generate the email HMAC)
The HMAC proves that your backend authenticated the email address. Without it, a visitor could try to spoof another customer email and access their tickets.
All you need is the customer email and the **HMAC secret key** from the **Security** section of your Ticket Center settings.
||| Never expose the HMAC secret in frontend code. Store it in a secure backend configuration file or secret manager. If it is exposed, revoke it and generate a new one from the Ticket Center settings.
#### ${color}[#445055](Node.js example)
```js
var crypto = require("crypto");
var secret = "YOUR_SECRET";
var email = "USER_EMAIL";
var hmac = crypto.createHmac("sha256", secret).update(email).digest("hex");
```
#### ${color}[#445055](PHP example)
```php
$secret = "YOUR_SECRET";
$email = "USER_EMAIL";
$hmac = hash_hmac("sha256", $email, $secret, false);
```
#### ${color}[#445055](Go example)
```go
import (
"crypto/hmac"
"crypto/sha256"
"encoding/hex"
)
func generateHMACSHA256Hex(message string, secret string) string {
hash := hmac.New(sha256.New, []byte(secret))
hash.Write([]byte(message))
return hex.EncodeToString(hash.Sum(nil))
}
secret := "YOUR_SECRET"
email := "USER_EMAIL"
hmac := generateHMACSHA256Hex(email, secret)
```
---
# ${color}[#0080dd](Customize the Ticket Center style)
You can customize Ticket Center with a CSS file served from your own domain. Inspect the Ticket Center HTML with your browser developer tools, then add your stylesheet from the **Customization** section of the plugin settings.
```html
```
Replace the stylesheet URL with your own file before publishing.
| Crisp keeps Ticket Center CSS classes stable so you can customize the interface without having to rewrite your stylesheet after minor updates.
---
# ${color}[#0080dd](Frequently Asked Questions)
*Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.*
###### ${color}[#F08820](Can Ticket Center be used on a public page?)
No. Ticket Center is designed for authenticated areas. Your backend must know the customer email and generate a valid HMAC signature before rendering the iframe URL.
###### ${color}[#F08820](What happens if the HMAC secret is exposed?)
Anyone with the secret could generate signatures for other email addresses. Revoke the exposed secret from the Ticket Center settings, generate a new one, and update your backend configuration.
###### ${color}[#F08820](Can customers reply from Ticket Center?)
Yes. Customers can open tickets, reply from Ticket Center, and receive notification emails when your team answers from Crisp.