Smartify

Widget Authentication

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, follow these steps:

1

Construct the server-side payload

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 autoStart to false

Set the Tiledesk widget property autoStart to false.

3

Provide the JWT to the widget

Use the window.Tiledesk("signInWithCustomToken", JWT) Javascript API to provide a function which supplies a fresh JWT every time it is invoked.

Example:

Example
window.Tiledesk("signInWithCustomToken", "<JWT JWT_TOKEN_HERE_GENERATED_SERVER_SIDE>");

ATTENTION: the token passed with signInWithCustomToken must start with the string JWT .

Example:

Example
window.Tiledesk("signInWithCustomToken","JWT 12345678...");
4

Use onAuthStateChanged to show the widget when logged in

Use the onAuthStateChanged event to check if the user is logged in and then show the widget.

Example:

Example
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.

Last updated 2 years ago

For related topics:

PreviousHide widgetNextConversation Embedded Apps