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
- Log in to your Zendesk Admin Center.
- Navigate to Account > Security > End user authentication.
- 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.
- Save both the App ID and Secret Key securely.
Note: Refer to the Zendesk documentation for more details.
The Web Widget Key is needed to configure the Web Widget for your website. It identifies the specific widget instance.
- In the Admin Center sidebar, go to Channels > Messaging.
- Click on the Web Widget you want to configure.
- Scroll down to the Installation section.
- 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>
- Copy the key value (
k338c615-1ccb-...
in this example).
- 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 -->
- Paste the snippet into the HTML of your website before the closing
</body>
tag.
- 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:
- Verify the Web Widget Key is correctly set in the script.
- If using JWT authentication:
- Ensure the Key ID and Secret Key are valid.
- Confirm the JWT token is generated and passed correctly.
- 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