The Ticket Center plugin lets you create a ticket dashboard linked to your Crisp, which you can include in your website.

This guide goes through how to setup the Ticket Center on your website. It is designed to be included in authenticated areas of websites, eg. dashboards, where users are authenticated. Their email address must be known and verified.

The Ticket Center plugin is available as a separate checkout item; $195 paid monthly. Note that you can subscribe to the Free plan (or any other plan) and add a ticket center to your inbox.

Video tutorial

What does the Ticket Center do?

The Ticket Center should be included in your own dashboard. It authenticates your users securely. Your users can access all their current and past tickets from a single place. The Ticket Center is perfect for those willing to add a "Support" section in their dashboard.

Your users can open tickets and select a category. Tickets are seen as regular conversations in your Crisp apps, from which your agents can answer. Users reply from the Ticket Center right away, and receive notification emails whenever you reply.

How to include the Ticket Center in my HTML code?

The Ticket Center plugin can be included in your dashboard with a single line of HTML code, which we recommend to include in a dedicated "Support" page on your dashboard, where it would take up all the vertical and horizontal space available.

For instance, you can keep your top navigation bar and logo, as well as a small sidebar, and the Ticket Center would take up all the remaining space.

Use the following iframe code:

<iframe
    title="Ticket Center"
    src="https://plugins.crisp.chat/urn:crisp.im:ticket-center:0/tickets/[WEBSITE_ID]?email=[EMAIL]&hmac=[HMAC(EMAIL, SECRET)]"
    referrerpolicy="origin"
    sandbox="allow-forms allow-popups allow-modals allow-scripts allow-same-origin"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>

Make sure to replace the following parameters in the code provided:

[WEBSITE_ID] : your Crisp website identifier, which you can copy from your website settings ( read how );
email=[EMAIL] : the authenticated user email (this is injected by your backend);
hmac=[HMAC(EMAIL, SECRET)] : an HMAC signature of the authenticated user email, which secures the provided user email address (this is injected by your backend, and should be an HMAC-SHA256, it should be hexadecimal lowercase and 64 characters long);

Those optional URL arguments are also available:

nickname : your user full name, eg. "John Doe" or "John" (for instance: nickname=John );
locale : display language to use (ISO format, ie. en for English, for instance: locale=en );
participants : emails to add to the conversation as CC participants (comma-separated URL-encoded list of emails — if your Crisp plan allows it, otherwise emails being passed are ignored );

Note that the iframe code provided here was optimized for your website security. The referrerpolicy attribute makes sure that your full page URLs do not leak, only the referrer domain (which is required by Ticket Center). The sandbox attribute makes sure that the Ticket Center cannot access the parent page (your dashboard), and has only access to the features it requires.

Common questions

How to add categories to my online ticketing system?

You may want to categorize tickets send by your customers. That's why, you have the ability to create categories inside the ticket center plugin. It's very easy to do and doesn't require any coding skills.

Doing so will allow you to display a new field in the ticket submission form available to all your customers.



Using categories will be added as custom data in customers' conversation, helping you to route conversations to the right group of people internally.

How to add FAQs to my ticketing center?

Adding FAQs to your ticketing center might reduce the total amount of questions you receive every day. That's why adding FAQs next to your ticketing form might be a good idea.

Create up to 5 frequently asked questions next to your online form to prevent users to create tickets for low-value questions.

How can I generate the email HMAC?

The HMAC parameter is used so that the Ticket Center knows the passed email address is authenticated by someone knowing the secret authentication key (ie. you, your backend server). This prevents attackers from spoofing someone else email address, and thus accessing their tickets.

All you need to generate an HMAC from your code is the email address (which changes per logged-in user), and the authentication secret (which you can copy from your Ticket Center plugin settings, in the Security section).

Then, whenever your backend generate your "Support" page with the iframe code, it should compute the hexadecimal HMAC value using the email address and secret key (64 characters long).

As an example, given email address john.doe@acme.com and secret 713ecca8a85c864ed4a66642ec04f18e2dc06d042a72a1a3ddc09d87a533c154, the resulting valid HMAC would be: e2e1a7990b002d72db912d1d14d600cf5d79d2b1915d9d009bb0cbb13357ae5f. You can pass those parameters to your HMAC function and check if the result matches with ours.

You can always verify your generated HMAC using this online HMAC generator . Make sure to select the SHA-256 hash function, and output the HMAC in plain text (hexadecimal).

Never, ever, reveal or share your secret key. If it is exposed, anyone could authenticate as any email address. If you believe it was compromised, you always roll it from your Ticket Center plugin settings.

Where do I find my HMAC secret key?

Your secret key is used to generate HMAC signatures and authenticate user email addresses.

You can copy your secret key from your Ticket Center plugin settings, within the "Security" section:



Never share your HMAC secret key. Also, make sure it is stored security in a non-public configuration file in your backend code. If you believe your secret was compromised, you can revoke it and get a new one anytime, from your Ticket Center settings. Note that if you do so, your Ticket Center will be unreachable for a few moments while you update your secret to the new one, since you revoked the current one.

How can I add allowed domains?

Allowed domains are essential to the security of your Ticket Center. Your Ticket Center will only allow includes from whitelisted domains. This protects your Ticket Center against malicious includes and spam.

You can add allowed domains from your Ticket Center plugin settings, within the "Security" section:

How can I customize my Ticket Center style with CSS?

Your Ticket Center can be customized to match your brand identity . You can change anything, from button colors, to page backgrounds, to font sizes, and more.

Customization can easily be done by including a custom CSS file, served from your own server domain. You can inspect the Ticket Center HTML code using your Web browser Dev Tools, and find out which of our CSS classes you need to customize.

Injecting your custom CSS stylesheet is as easy as going to your Ticket Center settings, then clicking on the "Customization" section, then adding the HTML code that will be included in the Ticket Center <head /> section.

Here is an example HTML code that can include your custom stylesheet:

<link rel="stylesheet" href="https://assets.acme.com/ticket-center-custom.css" type="text/css" />

⚠️ Make sure to replace the stylesheet URL with yours.

Note that we guarantee that the CSS classes we use today for all Ticket Center elements will stay stable over time. You can use those classes with confidence in your custom CSS stylesheets, knowing it will not break.

Integration examples

HMAC generation in NodeJS

var crypto = require("crypto");

var secret = "YOUR_SECRET";
var email = "USER_EMAIL";

var hmac = crypto.createHmac("sha256", secret).update(email).digest("hex");

HMAC generation in PHP

$secret = 'YOUR_SECRET';
$email = 'USER_EMAIL';

$hmac = hash_hmac('sha256', $email, $secret, false);

HMAC generation in 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)

Updated on: 04/11/2024