Livechat Plugin

The livechat plugin will help you integrate the Verloop.io platform with your system, CRM or any other third-party application thereby enabling you to push or fetch data in a pre-configured way.

When a conversation is picked, the enabled live chat plugins will load up in the selected Department’s RHS pane of the Live Chats section of the Verloop.io Dashboard. The livechat plugin can be configured to show the contextual information of the current conversation to the Agent.

Looking for specific information? Click the link below to jump directly to that section 

• How to add a livechat plugin?
• How to edit/delete a Livechat Plugin?
• How to write a script?

How to add a livechat plugin?

1. Go to Settings > Chat > Livechat Plugins

2. Click New Livechat Plugin

3. You will see four fields on the left-hand side. 
   1. Name
   2. Description 
   3. Departments: choose the departments whose agents can access this plugin
   4. Widget size

4. Click Next and enter the Livechat plugin script.

5. Test how the plugin widget would look like 
6. Click Submit

On Submit, the new Livechat plugin will appear in the livechat plugin list. Enable the Status toggle to activate your plugin of choice.

How to edit/delete a Livechat Plugin?

1. Click Edit/Delete option next to each plugin.

2. Make the edits and save changes by clicking the Submit button. 

How to write a script? 

You can write HTML, JS and CSS code in three different tabs provided.

Note: JS section is executed once the HTML is rendered.

Currently, we expose 4 Objects – 

1. VerloopRecipeVariables : This has data for the recipe in the format : [{“name”:”xyz”, “value”:”xyz”}]  here ‘name’ has the variable name and the ‘value’ field has the value associated with that variable.
2. VerloopVisitorInfo :  This contains the information of the user in the format:

 1{ 
 2
 3    "browser": "Chrome 81.0.4044.138",
 4
 5    "city": "Bengaluru",
 6
 7    "country": "India",
 8
 9    "createdAt": "2020-05-21T08:11:50.009Z",
 10
 11    "entityId": "91y4z2va-1dt0-17y1-2442-762e5fb9aa41",
 12
 13    "guestId": "guest-1234",
 14
 15    "identity": "P77YGHJ877o9H",
 16
 17    "ip": "41.27.60.159",
 18
 19    "isDeleted": false,
 20
 21    "kind": 0,
 22
 23    "location": "Bengaluru, India",
 24
 25    "name": "Raghav Rawat",
 26
 27    "os": "Mac OS 10.15.4",
 28
 29    "rooms": 1,
 30
 31    "status": 2,
 32
 33    "_id": "g67gdsfHJGYb9h",
 34
 35    "_tenantId": "hello",
 36
 37    "_updatedAt": "2020-05-21T08:12:00.002Z"
 38
 39}
 

3. VerloopUtmParams: format : [{“name”:”xyz”, “value”:”xyz”}]  here ‘name’ has the variable name and the ‘value’ field has the value associated with that variable. 
4. VerloopCustomFields format : [{“name”:”xyz”, “value”:”xyz”}]  here ‘name’ has the variable name and the ‘value’ field has the value associated with that variable.

Other methods exposed are: 

1. showVerloopLoading() : Shows a loader in the centre of the screen
2. doneVerloopLoading() : Removes the loader
3. VerloopHttp.call: This is the asynchronous method to call any third-party APIs. It takes the following parameters:
   1. method: ‘GET’, ‘PUT’, ‘POST’, ‘DELETE’
   2. url: urlEncoded third party api endpoint
   3. headers(Optional): JSON map of key value pair
   4. body(Optional): request body. Passed as it is.

Example:

 1VerloopHttp.call({
 2
 3    url:’https://example.com’, 
 4
 5    method: 'GET'
 6
 7  }).then((res) => {//do something});