Widget Authentication

Enabling authenticated visitors
Require Widget Javascript API v4
Overview
You can configure your widget to authenticate visitors using the Javascript API and JWT token.
When you configure the Chat widget to use authenticated visitors, you get the following benefits:
Ability to have higher confidence and security that the visitor/customer you or your agents are talking to is the real deal
Support for cross device/browser identification. The visitor can be viewed as the same person if or when they choose to use a different device or browser when the custom ID is specified in the authentication call.
To configure your widget for visitor authentication, you need to Generate a Project Shared Secret. Only Chat administrators can configure visitor authentication settings. Once you have generated the shared secret, use it to create a JWT token that you'll add to your Web Widget snippet.
Creating a JWT token
To create a JWT token:
1) Construct a server-side payload of data for the JWT token. Your token needs to be dynamically generated from the server-side on page load. Please follow this guide to Create a JWT Token.
2) Set the Tiledesk widget property autoStart to false.
3) Use the window.Tiledesk('signInWithCustomToken', JWT) Javascript API to provide a function which supplies a fresh JWT every time it is invoked. Below is a code example:
window.Tiledesk("signInWithCustomToken", "<JWT JWT_TOKEN_HERE_GENERATED_SERVER_SIDE>");
ATTENTION: the token passed with signInWithCustomToken must starts with the string "JWT ".
Example:
window.Tiledesk("signInWithCustomToken","JWT 12345678...");
4) Use the onAuthStateChanged event to check if user is logged in and then show widget
window.Tiledesk('onAuthStateChanged', function(event_data) {
    console.log("onAuthStateChanged FIRED-->", event_data);
    if(event_data.detail.isLogged){
        window.Tiledesk('show')
    }
});
See a complete example here.
About the agent experience with authenticated visitors
A few things are updated in the Chat dashboard when an agent starts chatting with an authenticated visitor.
First, the agent will be able to tell the visitor is authenticated by the authenticated checkmark overlay on the visitor's avatar.
image

Widget - Previous

Javascript API: Listeners/Events

Next - Widget

Widget for Android with WebView

Last modified 4mo ago

Copy link

On this page

Enabling authenticated visitors

Overview

Creating a JWT token

About the agent experience with authenticated visitors