Zendesk block allows you to integrate live chat functionality into your website or mobile app to provide real-time support for your users.

​
Prerequisites

  • Admin access to your Zendesk account.
  • Familiarity with embedding JavaScript snippets in your website or configuring SDKs in mobile apps.

​
1. Obtaining the Zendesk Signing Key (Key ID and Secret Key)

​
What is a Signing Key?

A signing key is required for visitor authentication when using the Web Widget or mobile SDK. It consists of:

  • App ID (kid): Unique identifier for the signing key.
  • Secret Key: A shared secret used to generate JSON Web Tokens (JWTs).

​
Steps to Obtain the Signing Key

  1. Log in to your Zendesk Admin Center.
  2. Navigate to Account > Security > End user authentication.
  3. Under the Messaging tab:
    • View existing signing keys or create a new one by clicking Create key.
    • If creating a new key, ensure you copy the Secret Key immediately, as it will not be fully visible later.
  4. Save both the App ID and Secret Key securely.

Note: Refer to the Zendesk documentation for more details.

​
2. Finding the Web Widget Key

The Web Widget Key is needed to configure the Web Widget for your website. It identifies the specific widget instance.

​
Steps to Locate the Web Widget Key

  1. In the Admin Center sidebar, go to Channels > Messaging.
  2. Click on the Web Widget you want to configure.
  3. Scroll down to the Installation section.
  4. In the provided JavaScript snippet, locate the key parameter: 
    <script id="ze-snippet"
        src="https://static.zdassets.com/ekr/snippet.js?key=k833c615-1ccb-..."></script>
  5. Copy the key value (k338c615-1ccb-... in this example).

​
3. Embedding the Web Widget

​
Web Widget Installation

  1. Copy the JavaScript snippet provided in the Installation section: 
    <!-- Start of Zendesk Widget script -->
<script id="ze-snippet"
        src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WEB_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->
  2. Paste the snippet into the HTML of your website before the closing </body> tag.
  3. Save and publish the changes.

​
Authentication with JWT

If you need to authenticate users:

  • Set the User ID option in the Web Widget configuration.
  • Generate a JWT token using your Key ID and Secret Key.
  • Include the following user data in the JWT payload:
    • name (optional)
    • email (optional)

​
4. Validation and Testing

Before deploying the Web Widget:

  1. Verify the Web Widget Key is correctly set in the script.
  2. If using JWT authentication:
    • Ensure the Key ID and Secret Key are valid.
    • Confirm the JWT token is generated and passed correctly.
  3. Test the chat functionality on the website or mobile app.

​
Example JWT Token Generation

Here is an example of how to generate a JWT token in Node.js:

const jwt = require('jsonwebtoken');

const secretKey = 'YOUR_SECRET_KEY'; // Replace with your Zendesk Secret Key
const payload = {
  name: 'John Doe',         // User's name (optional)
  email: 'john@example.com' // User's email (optional)
};

const token = jwt.sign(payload, secretKey, {
  algorithm: 'HS256',
  expiresIn: '1h', // Token expiration time
  keyid: 'YOUR_KEY_ID' // Replace with your Zendesk Key ID
});

console.log('JWT Token:', token);

Note: Use a secure backend to generate JWT tokens. Avoid generating them on the client-side.

​
References