Chat Widget

Adding a chatbot to your webpage or self-help portal as a widget can help your end-users self-resolve workplace issues quickly.

Adding a widget to your webpage is simple and easy. Just add the html code snippet (available from the widget configuration page) to any of your web pages. No more code required.

Let us see how you can add a Chat Widget:

1. Select the Omni-Channel tab from the left navigation and then click on Chat Channel.

2. Click on Widget. 

3. Click on the Add Widget button on the Widget Integrations page to start configuring the web chatbot.

4. In the widget configuration page, select the chatbot from the Select Chatbot drop-down menu as a web chatbot.

5. Widget branding will be pre-filled with data like: 

• Widget Name 
• Description
• Logo
• Colors
  You can update the branding details. The widget preview will give you a preview of how your chatbot will be displayed on your web page on the right.

6. Make the changes and click on Save. 

7. You can enable Secure your web chat if you want the widget to verify the messages sent to the bot are coming from authorized users only.
   
   NOTE: You can still deploy the widget in your webpage without enabling this option. Continue to the next step on how to deploy the bot without the security.

8. Get code snippet button will be enabled once you click on the Save button.  

9. Click the Get code snippet button and copy the HTML code.
10. Paste code on your HTML webpage to start using the Web chatbot. 

11. Refresh and check your HTML page after adding the snippet code. 
12. You will see the chatbot displayed on the page in the bottom right corner. All your end-users who have access to the webpage, will be able to communicate with the chatbot now.

Secure web chat function

You can implement the following security measures for the chatbot widget to verify the messages sent to the bot are coming from authorized users only. You will need some developer assistance to help you with the function.  

Pre Requisites: 

• Create an RS256 private/public key pair. You can use a tool such as the OpenSSL command line or PuTTYgen. For example, to create the key pair: openssl genrsa -out key.pem 2048  
• Use your private key to sign a JSON Web Token (JWT). You will have to pass the token with the messages that are sent from your website widget (webchat) as a proof of their origin.
• The JWT payload must provide details like  
  • SYS_FirstName – User’s first name  
  • SYS_LastName - User’s last name  
  • SYS_UserEmail – User’s email id  

For more information about JSON Web Tokens, see the RFC7519 and OpenID Connect 1.0 specifications.

Most programming languages offer JWT libraries that you can use to generate a token.  

In this scenario, you can use this NodeJS code sample to generate a JWT token: 

// Sample NodeJS code on your server.  

const jwt = require(‘jsonwebtoken’); 
 /**
* Returns a signed JWT generated by RS256 algorithm.
*/ 
function mockLogin() {  
const payload = { 
/*
*Even if this is an unauthenticated user, add a “userID” in the sub claim that can be used to track unique users interacted with a chatbot to show in the analytics. This ID will help us keep track of “unique users”. For unauthenticated users, drop a cookie in the browser so you can make sure the user is counted uniquely across visits.  
*/
sub: ‘some-user-id’, // Required
iss: ‘yourdomain.com’ // Required
};  
// The “expiresIn” option adds an “exp” claim to the payload.  
return jwt.sign(payload, process.env.YOUR_PRIVATE_RSA_KEY, { algorithm: ‘RS256’, expiresIn: ‘10000ms’ });  
} 

Implementation:

1. Enable the Secure your web chat feature in the Workativ Assistant Widget configuration page.

2. Provide a public key in the Public Key field. The Public key is used to verify the incoming data from your web chat instance.
3. Click Save.

4. Click on Get code snippet and copy the snippet code to add it to your webpage. 

5. Include the Client library https://unpkg.com/assistant-widget@1.1.16/dist/lib.js inside the HTML file (your web page).
6. Whenever the web page loads, fetch the JWT token before initializing the webchat and send the JWT web token with each message from the webchat that you created earlier.
7. Add the JWT token to the webchat code snippet that you embed on your website page. Specify the token in the authToken property.  
8. JWT token should have a minimal expiry time, ideally less than 5 minutes to avoid misuse.
9. Add an event to detect expiration on the JWT token. You can give a callback function in “newToken” field, which will be invoked whenever the token is expired.  
10. When the promise is resolved with a string then it is considered as a new token. Then the original message will be resent with the “newToken”.  
    
    You can use this sample script in your webpage to use this secure webchat function 

<script src="https://unpkg.com/assistant-widget@1.1.16/dist/lib.js"></script> 
 <script> 
const getToken = () => 
fetch('https://sou58a0q50.execute-api.us-east-1.amazonaws.com/dev/users/token').then((data) => {
return data.text()
})
getToken().then(authToken => {
console.log("authToken ::: ", authToken) 
WAWidget.init({
el: document.querySelector("#assistant-widget-822f6a55-cd25-4a65-a407-bd234f608bb7"), 
endpoint: "https://assistant.workativ.ai/widget",  
widget_id: "822f6a55-cd25-4a65-a407-bd234f608bb7", 
authToken,
newToken: getToken   
});
})