Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Html
<div class="fb-like" data-href="#" data-layout="button_count" data-action="recommend" data-size="large" data-show-faces="true" data-share="true"></div>

...

Scroll export button
scopecurrent
template-id0fa09813-8b86-460a-aa1d-ef450a80e9ce
quick-starttrue
add-onScroll PDF Exporter

Info

This document explains how to install WebRTC Kite Chatbot

Created: February 2021

Updated: March 2022

Permalink: https://wildix.atlassian.net/wiki/x/lQLOAQ

Min. WMS version: WMS 5.02

Table of Contents

Description

Wildix WebRTC Kite bot SDK is a sample bot. Web developers can work on it to customize it to different scenarios. 

The current implementation can be used out of the box for the following use cases:

  • Provide an automated response to external WebRTC Kite users in case no agent is available during working hours (e.g. "All agents are busy at the moment, please try again later") 
  • Provide an automated response to external WebRTC Kite uses in case they contacted the call group outside of the working hours (e.g. "Our offices are closed, please try again during the working hours: Monday through Friday from 9 AM till 6 PM").

Web developers can extend the behavior of the bot to use it in more complicated scenarios, for example, provide predefined options to the WebRTC Kite users from which they can choose, etc.

Web developers can find all the necessary information here: https://github.com/Wildix/kite-xmpp-bot 

This document explains the expected behavior and use cases of the basic implementation (out of the box) and the information on how to install the SDK.

Video Tutorial


Scroll only inline
https://fast.wistia.com/embed/medias/rvg6pk883k


Easy html macro
<script src="https://confluencefast.wildixwistia.com/downloadembed/attachments/14549012/pdf-button-download-wildix-documentation.png"></a>
		</div>
	</div>
</div>
Info

This document explains how to install WebRTC Kite Chatbot

Created: February 2021

Updated: March 2022

Permalink: https://confluence.wildix.com/x/AIITBQ

Min. WMS version: WMS 5.02

Table of Contents

Description

Wildix WebRTC Kite bot SDK is a sample bot. Web developers can work on it to customize it to different scenarios. 

The current implementation can be used out of the box for the following use cases:

  • Provide an automated response to external WebRTC Kite users in case no agent is available during working hours (e.g. "All agents are busy at the moment, please try again later") 
  • Provide an automated response to external WebRTC Kite uses in case they contacted the call group outside of the working hours (e.g. "Our offices are closed, please try again during the working hours: Monday through Friday from 9 AM till 6 PM").

Web developers can extend the behavior of the bot to use it in more complicated scenarios, for example, provide predefined options to the WebRTC Kite users from which they can choose, etc.

Web developers can find all the necessary information here: https://github.com/Wildix/kite-xmpp-bot 

This document explains the expected behavior and use cases of the basic implementation (out of the box) and the information on how to install the SDK.

Video Tutorial

Html
<script src="https://fast.wistia.com/embed/medias/rvg6pk883k.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><span class="wistia_embed wistia_async_rvg6pk883k popover=true popoverAnimateThumbnail=true" style="display:inline-block;height:315px;position:relative;width:560px"> </span>

Current implementation

The sample bot has the following behavior:

...

The chatbot user can be added to one or more call groups

...

Note: In a call group, Kite chat requests are by default distributed according to Round Robin strategy: the next agent is selected on the list following the individual that received the last chat request. Chat request is sent to an available user and in case it isn’t accepted within 10 seconds, the request is forwarded to the next user and so on until chatbot (which would be the last user on the list) or the global timeout of 60 seconds is reached.

Documentation: Wildix WebRTC Kite - Admin Guide - Distribution of Kite chat requests in Call groups

Warning

Important: In case of a small call group (with 4 or less users), users would have limited time to respond to chat request, before the chatbot sends a reply. For example, in case of 4 available users it is 40 seconds only. 

So, it's recommended to use chatbot in call groups with at least 5 users or more. 

...

In case no agent replies within the specified timeout (1 minute by default) during working hours, the chatbot provides a certain predefined response; in case no agent replies during non-working hours, the chatbot provides a different predefined response

...

Prerequisites

  • WMS version: starting from WMS 5.02.20210127
  • Business license or higher (assigned to the chatbox user)
  • Last stable version of Node.js 

WMS configuration

  1. Create a new user for the chatbot with extension 777999 (the extension is fixed, do not modify it) and assign it a Business license. 
  2. Add this user to one or more call groups used for WebRTC Kite

Installation 

...

Run the following command from the Terminal/ Command Prompt to install all the required libraries in the file: 

Code Block
cd kite-xmpp-bot-master
npm install

...

Edit config parameters in the file wbot/app/config.js:

  • domain: change to the PBX domain
  • xmppService: change service parameter to the PBX domain, e.g. 'xmpp://elenacloud.wildin.com:443' OR 'xmpps://elenacloud.wildin.com'
  • username and password: change to chatbox user's extension 777999 and web password (remember that 777999 is the fixed extension)

Run the bot using the command: 

Code Block
cd app
node index.js

Customize the behavior of the chatbox 

To customize the behavior of the chatbot, you need to work on the following files in the SDK:

  • To change predefined responses, edit the *.txt files located in app/responders/staticfiles
  • To edit the working hours and create interactive responses, edit the file responder.js located in the same directory (basic JS knowledge is required)

Responder public methods (app/responders/responder.js): 

  • hello(id, userdata): if this method returns a string, it is used as bot welcome message for user

    • id: string representation of Kite user JID (e.g. "web60004a63a4b2b@kite.wildix.com)
    • user data: object, represents a new connection from a WebRTC Kite user; has two fields: name and email
  • say(id, message): if this method returns a string, it is used as bot answer

Practical example

Below you can find an example of chatbox behavior customization.

Note

The simple example provided below serves to help you understand better the different customization scenarios. To customize the behavior of the chatbot you need web developer/ JavaScript knowledge.

Expected behavior:

During working hours, the chatbot should propose options: "Dear username, type "events" to learn about our upcoming events, or type "address" to get our physical address". In case the user types "events", the bot should reply with the list of upcoming events. In case the user types "address", the bot should send the physical address. In case the user types something else, the bot should respond "Sorry, I did not understand you".

Realization:

  1. Modify the content of the file workinghours.txt located in app/responders/staticfiles (e.g.: Type "events" for the information about upcoming events. Type "address" to know our physical address.)
  2. Add the needed static *.txt files to app/responders/staticfiles. These files will be used as responses in case user types "events" or "address" (e.g. events.txt: Here are our upcoming events: Summit 2022; address.txt: Our address is...)
  3. Add address and events with the path to these newly created files to the config.js file located in the app directory
  4. Modify the responder.js file located in the same directory. To realize the scenario described above you need to work on the "say(id, message)" method. Here is an example of the modified file:
Code Block
'use strict';

const fs = require('fs');

class Responder {

    constructor(config) {
        this._workinghours = config.workinghours;
        this._nonworkinghours = config.nonworkinghours;
        this._address = config.address;
        this._events = config.events;
    }

    hello(id, userdata)medias/rvg6pk883k.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><span class="wistia_embed wistia_async_rvg6pk883k popover=true popoverAnimateThumbnail=true" style="display:inline-block;height:315px;position:relative;width:560px"> </span>


Current implementation

The sample bot has the following behavior:

  • A new user is created on the PBX (Business license required); this user acts as a chatbot
  • The chatbot user can be added to one or more call groups

    Note

    Note: In a call group, Kite chat requests are by default distributed according to Round Robin strategy: the next agent is selected on the list following the individual that received the last chat request. Chat request is sent to an available user and in case it isn’t accepted within 10 seconds, the request is forwarded to the next user and so on until chatbot (which would be the last user on the list) or the global timeout of 60 seconds is reached.

    Documentation: Wildix WebRTC Kite - Admin Guide - Distribution of Kite chat requests in Call groups

    Warning

    Important: In case of a small call group (with 4 or less users), users would have limited time to respond to chat request, before the chatbot sends a reply. For example, in case of 4 available users it is 40 seconds only. 

    So, it's recommended to use chatbot in call groups with at least 5 users or more. 



  • In case no agent replies within the specified timeout (1 minute by default) during working hours, the chatbot provides a certain predefined response; in case no agent replies during non-working hours, the chatbot provides a different predefined response

  • It's possible to modify the static files in the SDK directory to specify the working hours/ non-working hours and the response messages from the chatbot 

Prerequisites

  • WMS version: starting from WMS 5.02.20210127
  • Business license or higher (assigned to the chatbox user)
  • Last stable version of Node.js 

WMS configuration

  1. Create a new user for the chatbot with extension 777999 (the extension is fixed, do not modify it) and assign it a Business license. 
  2. Add this user to one or more call groups used for WebRTC Kite

Installation 

  1. Download (and unzip) the SDK from https://github.com/Wildix/kite-xmpp-bot 
  2. Run the following command from the Terminal/ Command Prompt to install all the required libraries in the file: 

    Code Block
    cd kite-xmpp-bot-master
    npm install


  3. Edit config parameters in the file wbot/app/config.js:

    • domain: change to the PBX domain
    • xmppService: change service parameter to the PBX domain, e.g. 'xmpp://elenacloud.wildin.com:443' OR 'xmpps://elenacloud.wildin.com'
    • username and password: change to chatbox user's extension 777999 and web password (remember that 777999 is the fixed extension)
  4. Run the bot using the command: 

    Code Block
    cd app
    node index.js


Customize the behavior of the chatbox 

To customize the behavior of the chatbot, you need to work on the following files in the SDK:

  • To change predefined responses, edit the *.txt files located in app/responders/staticfiles
  • To edit the working hours and create interactive responses, edit the file responder.js located in the same directory (basic JS knowledge is required)

Responder public methods (app/responders/responder.js): 

  • hello(id, userdata): if this method returns a string, it is used as bot welcome message for user

    • id: string representation of Kite user JID (e.g. "web60004a63a4b2b@kite.wildix.com)
    • user data: object, represents a new connection from a WebRTC Kite user; has two fields: name and email
  • say(id, message): if this method returns a string, it is used as bot answer

Practical example

Below you can find an example of chatbox behavior customization.

Note

The simple example provided below serves to help you understand better the different customization scenarios. To customize the behavior of the chatbot you need web developer/ JavaScript knowledge.


Expected behavior:

During working hours, the chatbot should propose options: "Dear username, type "events" to learn about our upcoming events, or type "address" to get our physical address". In case the user types "events", the bot should reply with the list of upcoming events. In case the user types "address", the bot should send the physical address. In case the user types something else, the bot should respond "Sorry, I did not understand you".

Image Added

Realization:

  1. Modify the content of the file workinghours.txt located in app/responders/staticfiles (e.g.: Type "events" for the information about upcoming events. Type "address" to know our physical address.)
  2. Add the needed static *.txt files to app/responders/staticfiles. These files will be used as responses in case user types "events" or "address" (e.g. events.txt: Here are our upcoming events: Summit 2022; address.txt: Our address is...)
  3. Add address and events with the path to these newly created files to the config.js file located in the app directory
  4. Modify the responder.js file located in the same directory. To realize the scenario described above you need to work on the "say(id, message)" method. Here is an example of the modified file:
Code Block
'use strict';

const fs = require('fs');

class Responder {

    constructor(config) {
        this._workinghours = config.workinghours;
        this._nonworkinghours = config.nonworkinghours;
        this._address = config.address;
        this._events = config.events;
    }

    hello(id, userdata) {
        return this._processHello(userdata);
    }

    say(id, message) {
        return this._processSay(message);
    }

    bye(id) {
    }

    _processHello(userdata) {
        const filename = this._workingHours() ? this._workinghours : this._nonworkinghours;
        const content = fs.readFileSync(filename).toString();
        return this._processTemplate(userdata, content);
    }
    
    _processSay(message) {
        const address = this._address;
        const events = this._events;
        let content;

        if (message == 'address') {
        content = fs.readFileSync(address).toString();
        }
       
        else if (message == 'events') {
        content = fs.readFileSync(events).toString();
        }

        else {
        return this._processHello(userdata);
    }
content = "sorry, I did not understand you";
    say(id, message) {  }

        return this._processSay(message)content;
        }

    bye(id_processTemplate(userdata, content) {
    }    let  _processHello(userdata) {result = content.replace(/\$username/g, userdata.name);
         const filename = this._workingHours() ? this._workinghours : this._nonworkinghours;
        const content = fs.readFileSync(filename).toString(if(userdata.email) {
        result = result.replace(/\$useremail/g, userdata.email);
        return this._processTemplate(userdata, content);}
      }  return result;
    }

    _processSayworkingHours(message) {
        const addressnow = this._addressnew Date();
        const eventsday = this._eventsnow.getDay();
        let contentconst hour = now.getHours();
         ifreturn (messageday == 'address'< 6) {&& (hour > 8 && hour    content = fs.readFileSync(address).toString(< 19);
     }

 }

module.exports =     
        else if (message == 'events') {
        content = fs.readFileSync(events).toString();
        }

        else {
        content = "sorry, I did not understand you";
        }

        return content;
        }

    _processTemplate(userdata, content) {
        let result = content.replace(/\$username/g, userdata.name);
        if(userdata.email) {
        result = result.replace(/\$useremail/g, userdata.email);
        }
        return result;
    }

    _workingHours() {
        const now = new Date();
        const day = now.getDay();
        const hour = now.getHours();
        return (day < 6) && (hour > 8 && hour < 19);
    }

}

module.exports = Responder;

Responder;


Macrosuite divider macro
dividerTypetext
dividerWidth70
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
textColor#000000
dividerWeight2
labelPositionmiddle
textAlignmentcenter
iconColor#0052CC
fontSizemedium
textNot finding the help you need? Join the Facebook group to ask a question!
emojiEnabledfalse
dividerColor#DFE1E6
dividerIconbootstrap/CloudsFill

Button macro
buttonTextFacebook
isButtonShadowOntrue
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonBorderColor#4267b2ff
buttonColor#4267b2ff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection46
buttonHoverColor#ffffff
buttonIconfont-awesome/FacebookSquare
buttonTypeicon_left
buttonLink{"link":"https://www.facebook.com/groups/wildixtechwizards","source":"direct"}
buttonNewLink
buttonRadius3
buttonShadow0
id228
emojiEnabledfalse
buttonWidth20