LiveChat Inc

This document describes how to integrate the chat service of LiveChat Inc with a Virtual Assistant using Teneo Web Chat (TWC) and Teneo Engine. With this integration, TWC serves as a frontend to both Teneo Engine and the chat service of LiveChat Inc so the user can start a conversation with the Virtual Assistant and get connected to a live chat agent later if needed. This document covers version 3 of the LiveChat Inc Customer SDK.

Prerequisites

These instructions assume your Teneo solution is published and that you know the Engine URL.

Setup instructions

LiveChat account and app

1. If you don't already have an account with with LiveChat Inc, you will need to create a new one. To do that, go to the LiveChat Inc web site, click on 'Sign up free' and go through the required registration steps.
2. Once you've registered, log in and go to the Developers Console.
3. Create a new application by going to the 'Apps' section and click 'Create new app'.

4. Give your app a name and select Web app (frontend/JavaScript)
   in Client type.
5. Save both the licenseId
   (from the profile area) and clientId
   (from Client Id) values - you will later need them to configure the TWC connector:

6. Enter the URLs of the pages your LiveChat-integrated TWC will be installed on in Redirect URI whitelist and add the mandatory customers:own
   access scope in Access scopes:

7. Install the app.

Frontend

1. In the file extensions.js, locate the definition/assignment of the variable customerSDK
   in line 71 and configure the properties clientId
   and licenseId
   using the corresponding values from your LiveChat app in the call to CustomerSDK.init()
   , for instance:

1const customerSDK = CustomerSDK.init({
2    clientId: '1d6671410dabb3d434f0de34e53b3bd6',
3    licenseId: 12345,
4    autoConnect: false
5});
6

2. Deploy TWC as per these instructions.
3. Add (the content of) the Customer SDK customer-sdk.js somewhere between the file "teneo-web-chat.js" (the TWC core code) and the TWC initialization code, i.e., after the link to "teneo-web-chat.js" and before the code block where window.TeneoWebChat.initialize(...)
   is called (both are explicitly mentioned in the TWC deployment instructions):

1<script src="/path/to/teneo-web-chat.js"></script>
2...
3<script src="/path/to/customer-sdk.js"></script>
4<script src="/path/to/lc-extensions.js"></script>
5...
6<script>
7// The TWC initialization code
8...
9window.TeneoWebChat.initialize(...);
10...
11</script>
12

You might want to look for the latest version of a customer-sdk.js on the official LiveChat Inc page.

Teneo Engine

In order to transfer the user to the LiveChat, your Teneo Engine needs to return an output parameter to TWC.

1. First, you have to decide which Teneo output (answer) should trigger the transfer. Set the answer text to something like I will now transfer you to a live chat agent.
   .
2. In that same output, add the output parameter livechat_handover
   with the value true
   . When this output is sent, the transfer process will automatically start in the TWC frontend. !!! Note that in this version of the connecter, no backend-level communication is possible between the Teneo engine and LiveChat service. This means information like status of chat availability, estimated waiting time, etc. cannot be accessed from the solution itself and it becomes clear if the chat is available first after the handover process has been triggered. If it is not available, the corresponding message will just be displayed in the frontend. Make sure to take this into account when developing the business logic of your live chat handover!

Testing

Log into your LiveChat Inc account, start the virtual assistant and ask it to redirect you to the live chat so the answer with the output parameter livechat_handover

with the value true

is given. Then pick up the chat as a chat operator and verify the TWC frontend works as a LiveChat user interface to talk with the live chat agent.