About Hi5 end-user authentication

Hi5 end-user authentication is a seamless login experience that extends the user login between a publisher's webpage and the chatbot in your Hi5 Help Center. The solution shares secure tokens with user name, email, and Cleeng ID between all systems, allowing Hi5 to identify the user automatically.

This results in a better, more personalized user experience and faster response times, as the user won’t need to provide identity information during the chat conversation.

User flow

1. The user signs in on your website.
2. The user accesses the Help Center via a button on your website.
3. The user opens the chat widget in the Help Center.
4. The user is automatically logged in and greeted by name.
5. The user starts a chat conversation.
6. If a ticket is created, the chat widget shares the user’s details with the Cleeng Hi5 support team.

Integration

Prerequisites

1. A custom domain is configured for your Help Center.
2. Cleeng login tokens are accessible from the front end.
3. The Cleeng helper script is integrated into your website.
4. Help Center links on your website are tagged correctly.

Overview diagram

1. Custom domain setup

By default, the Cleeng Hi5 Help Center is hosted on a Zendesk domain which is managed by Cleeng as part of the Hi5 service. However, many customers set up custom domains to maintain brand consistency.

🚧

Note

If you have already configured a custom domain, you can skip this step. Otherwise, you need to configure a custom domain to enable authentication flows between your main domain and your help center subdomain.

Recommended Configuration

The Zendesk URL should be mapped to a subdomain of your main domain as follows:

• Your website: https://www.domain.com
• Cleeng default Hi5 Help Center domain: https://domain.zendesk.com
• Custom Help Center domain: https://support.domain.com

Steps to Configure

1. Create a custom subdomain for your Help Center with your hosting provider.

2. Set up a CNAME record with your hosting provider:

   Subdomain	CNAME
   support.domain.com	domain.zendesk.com

2. Cleeng login tokens

Cleeng login tokens are essential for secure user authentication in the Help Center and generate another token for the chatbot.

Token Generation

When a user logs into your website, the Cleeng MediaStore API issues a pair of tokens:

• JWT Token (jwt): Primary token for authentication.
• Refresh Token (refreshToken): Used to generate a new JWT token when expired.

Endpoints for Token Retrieval:

• Login API
• SSO Login API

Token Storage

Tokens must be stored in the browser’s local storage using the following naming convention:

The Hi5 helper script retrieves these tokens to authenticate the user when they access the Help Center. If the JWT token has expired, the refresh token generates a new login token automatically.

🚧

Note

If you rely on Cleeng MediaStore tokens for your own integration, then we recommend logging in two separate sessions - one for your website, and another one for Hi5 authentication. This allows you to keep a separate set of tokens for your own integration.

3. Helper script

The helper script provides a convenient way to integrate the feature into your website. It is designed to facilitate the user login journey as your users transition between browser tabs containing your website in one tab, and the Help Center page in another.

Embed the helper script into your website from https://hosted.mediastore.prod.cleeng.com/hi5/cleeng-hi5auth-publisher-v1.0.2.js

4. Link tagging for Help Center access

To ensure smooth redirection and authentication, all links on your homepage (https://www.domain.com) pointing to your Help Center must be tagged correctly.

Required Tagging Format

Each Help Center link on your website should include the following attribute:

• The expected identifier is: [data-cleeng="helpcenter"].
• The element is a link and has an href attribute that links to the help center.

This ensures the helper script can recognize when users open the help center link and then process the user’s login tokens appropriately.