Jodo API Reference Guide
Jodo Widget Integration
This document explains different methods of integrating Jodo Digital Channel communications in Websites / Ecommerce sites and Mobile apps via Jodo widget API using script and steps to do the same.
What is Jodo Widget API?
Jodo widget offers Jodo LIVE Chat and Call services for any WordPress / HTML website. A Jodo widget API is built on collaborative technology, it’s a communication platform for voice, video, Screenshare and chat media based on available customer’s bandwidth and sharing data, location, documents, and images while on chat/call.
Features:
Easy to Install:
Jodo offers ready scripts for developers to use with HTML / PHP / WordPress / CMS platforms. The Jodo live chat/call button will appear at the right bottom of your website’s page upon integration of this script.
Multi-lingual:
Jodo Widget supports many Indian as well global languages and allows customers to communicate with predefined language selections. It is easy to add new languages.
Multi-device support:
Jodo Widget supports different UI form-factors like Mobile/Desktop /Full screen views options.
Sharing data while on-call: Using Jodo “Document Push” to share images, Audio, or Video files and documents while on call. You and your customers could even annotate on the same data and save it for references.
Communication Transcript:
The customer can request a transcript of the communication to be shared on email after the completion of the conversation with the business user. If the communication includes a voice call, a link to the call recording will also be embedded in the transcript mail.
Call-back Functionality:
Website visitors (customers) can request a callback in case of non-working hours or if business users are busy on another call or no agent is available. A message will be displayed on the customer’s screen in such scenarios with configurable form fields to set callback.
Reconnect Functionality:
If media connectivity fluctuates or drops during Jodo Voice or Video due to inconsistent network strength or other network issues, the reconnect feature is in-built to reconnect the communication session between the customer and the same business user.
Bandwidth fluctuation fallback mechanism:
If there is a network issue while video call or there is poor bandwidth for the video session to continue, the video session will end and the voice session will continue.
If there is a network issue while voice call or there is poor bandwidth for the voice session to continue, the voice session will end, and the chat session will continue. Users can reconnect the voice/video media after having enough bandwidth for voice/video and it is indicated by the bandwidth indicator.
Add Jodowidget in HTML website
Step1 –
In the HTML website select the page to add Jodo Widget and Paste below Snippet just before the end tag of the page:
<script>
var product_p = "NewProduct";
var function_p = "Sales";
var __acstoolbar = {};
__acstoolbar.apikey = "<INSERT_YOUR_API_KEY>";
__acstoolbar.servicekey = "<INSERT_YOUR_SERVICE_KEY>";
__acstoolbar.tracelevel = '1';
__acstoolbar.language = 'english';
__acstoolbar.product = product_p;
__acstoolbar.functionparam = function_p;
__acstoolbar.theme ='theme_orange';
__acstoolbar.target = "https://demo2.avhan.com:4443";
(function ()
{
var joinSC = document.createElement('script');
joinSC.type = 'text/javascript';
joinSC.src = __acstoolbar.target + '/jodowidgetapi/js/initfunctions.js';
joinSC.onload = validateKey;
var joinScript = document.getElementsByTagName('script')[0];
joinScript.parentNode.insertBefore(joinSC, joinScript);
})();
function validateKey() {
var jodoInit = new jodoworld.initfunctions();
jodoInit.initService();
}
</script>
Step2 –
Insert your API key and Service Key provided in Line #4 & #5
Step3
– Verify widget has loaded on your target page.
Note :
Following URL will be change as per deployment of ‘Jodowidget’
__acstoolbar.target = “https://demo2.avhan.com:4443”;
Add Jodo Widget in an IFRAME
Step1 –
Identify widget space in your website layout, preferably a right sidebar
Step2 –
Link the iframe source to – https://demo2.jodoworld.com:4443/jodowidgetapi/customerwidget.jsp where the widget will appear.
Step3 –
Add the below script inside your website’stag, preferably just before closing of the tag
<script type="text/javascript"src="https://demo2.jodoworld.com:4443/jodowidgetapi/js/initfunctions.js"></script>
Step4 –
Add the following script just before the end of body tag
<script>
var jodoInit;
var responsedata;
var __acstoolbar = {};
__acstoolbar.theme ='theme5';
__acstoolbar.tracelevel = '1';
__acstoolbar.language = 'english';
__acstoolbar.target = "https://demo2.avhan.com:4443";
__acstoolbar.apikey = "<INSERT_YOUR_API_KEY>";
__acstoolbar.servicekey = "<INSERT_YOUR_SERVICE_KEY>";
__acstoolbar.visibility = "hide";
__acstoolbar.widgeticon = "hide";
function validateKey() {
jodoInit = new jodoworld.initfunctions();
jodoInit.initService();
}
</script>
Iframe communication : Send Message
<script>
//send message to child frame called from initfunctions.js no need to include the iframe communication script separately
iframeObj = document.getElementById("widgetIframe");
var sendMsg = function (msg) {
iframeObj.contentWindow.postMessage(msg, '*');
};
//listen to msg from child window.
bindEvent(window, 'message', function (e) {
// console.log("iframe message from child:" + e.data);
handleIframeMessagesFromChild(e.data);
});
</script>
Iframe Communication : Listener Function :
//send message to child frame called from initfunctions.js no need to include the iframe communication script separately
function handleIframeMessagesFromChild(data) {
var childMsg = JSON.parse(data);
var status = childMsg.id;
var message = childMsg.message;
switch (status) {
case "done":
var mainreponse = reponsedata;
var obj = {id: "mainresponse", message: mainreponse};
sendMsg(JSON.stringify(obj));
break;
case "end":
var jodoInit = new jodoworld.initfunctions();
jodoInit.initService();
var mainreponse = reponsedata;
var obj = {id: "reload_mainresponse", message: mainreponse};
sendMsg(JSON.stringify(obj));
setTimeout(function () {
closeall = 0;
location.reload(true);
}, 2000);
break;
case "agentdata":
setAgentDataOnNotification(message);
break;
case "chatmsg":
increamentChatNotificationCounter(message);
break;
case "UaRegistered":
try {
jodoWidgetInitialized();
} catch (e) {
console.log("jodoWidgetInitialized() : " + e);
}
break;
default:
}
}
Step5
Call the validate function from the page where you want to use the widget
Note :
Following URL will be change as per deployment of ‘jodowidget’
__acstoolbar.target = “https://demo2.avhan.com:4443”;setAgentDataOnNotification(message);
break;
case "chatmsg":
increamentChatNotificationCounter(message);
break;
case "UaRegistered":
try {
jodoWidgetInitialized();
} catch (e) {
console.log("jodoWidgetInitialized() : " + e);
}
break;
default:
}
}
#3 How to add jodowidget in WordPress (Woo-Commerce) ?
Step1 – Paste below Snippet just before end of body tag at wordpress page:
//Close Widget after Jodo Session (Call/Chat/Video)
function closeWidget(){
document.getElementsByTagName('body')[0].style.width="100%";
document.getElementsByClassName('nav-wrapper')[0].style.width="100%";
jQuery('.container').removeClass('w-70');
document.getElementsByClassName('widget_close_icon')[0].click();
document.getElementsByClassName('widget_chat_icon').style.display="none";
}
//Save Customer Session Data (Product Info & Customer Details)
function saveJodoCustomerData (productobject){
var calldata = [];
var calldataelement = {};
if (jodoinitdone === true) {
calldataelement = new Object();
calldataelement.parameterid = 4031;
calldataelement.value = productobject.getAttribute("data-product_name");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4034;
calldataelement.value = productobject.getAttribute("data-product_price");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4033;
calldataelement.value = productobject.getAttribute("data-product_id");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4035;
calldataelement.value = productobject.getAttribute("data-product_categories");
calldata.push(calldataelement);
calldataelement.parameterid = 4041;
calldataelement.value = productobject.getAttribute("data-email");
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
}
}
//Push Customer Session Language & Set Jodo language
function SetJodoLanguage (objLang) {
var calldata = [];
var calldataelement = {};
var languge = objLang;
var selectlang;
switch(language){
case "en|en": selectlang = "English";break;
case "en|hi": selectlang = "Hindi";break;
case "en|mr": selectlang = "Marathi";break;
case "en|ar": selectlang = "Arabic";break;
case "en|zh-TW":selectlang = "Chinese";break;
case "en|es": selectlang = "Spanish";break;
case "en|fr": selectlang = "French";break;
default: selectlang = "English";break;
}
jodoInit.setLanguage(selectlang);
calldataelement = new Object();
calldataelement.parameterid = 4011;
calldataelement.value = selectlang;
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
}
//Push Webpage, Customer Data & Start Chat
function onJodoChatClicked (productobject) {
saveJodoCustomerData(productobject);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Chatfromscript();
waitForElementThenCallById('widget_main_div',openWidget);
}
//Push Webpage, Customer Data & Start Jodo Call
function onJodoCallClicked (productobject) {
saveJodoCustomerData(productobject);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Voicefromscript();
waitForElementThenCallById('widget_main_div',openWidget);
}
//Push Webpage, Customer Data & Start Video Call
function onJodoVideoClicked (productobject) {
saveJodoCustomerData(productobject);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Videofromscript();
waitForElementThenCallById('widget_main_div',openWidget);
}
//show button after UA registered
function waitForJodoInitDone() {
if (jodoinitdone) {
jQuery('.jodo-buttons-hide').removeClass('jodo-buttons-hide');
} else {
setTimeout(function() {
waitForJodoInitDone();
}, 1000);
}
}
waitForJodoInitDone();
//Function to synchronize event & their function calls
function waitForElementThenCallById(id, callback) {
if (jQuery('#'+id).length != 0) {
callback();
} else {
setTimeout(function() {
waitForElementThenCallById(jQuery("#" + id).is(":visible"), callback);
}, 1000);
}
};
</script>
Step2 – Insert your apikey and servicekey provided on Line #4 & #5
Step3 – Check to see if the widget has loaded on your homepage
Step4 – To enable jodo button for products you will need to override a file from woocomerce plugin as follows
we will place jodo buttons just below the product price hence, we will override price.php
a) Using FTP open your plugins folder
b) Copy the file price.php at wp-content/plugins/woocommerce/templates/loop/price.php
a) Open you theme folder at wp-content/themes
b) Create a folder name woocommerce
c) Inside this folder create another folder named templates
d) Inside this folder create another folder named loop
e) Inside this folder paste the file price.php
Step5 – This file will now override the woocomerce price.php and we can safely add Jodo Buttons here,
the following snippet can be used as a reference to add Jodo buttons into this file,
you may replace the file contents with the code below and add styling to your liking
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $product;
?>
<?php $current_user = wp_get_current_user(); $user_email = $current_user->user_email;
if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<div >
<a class=" btn btn-default quick-view ion-android-call jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Call" href="#" onclick="onJodoCallClicked(this)" data-product_name="<?php echo esc_attr__($product->get_name());?>" data-product_price="<?php echo esc_attr__($product->get_price());?>" data-product_id="<?php echo esc_attr($product->get_id()); ?>" data-product_categories="<?php echo esc_attr__(wp_strip_all_tags(wc_get_product_category_list($product->get_id()))) ?>" data-user_id="<?php echo $user_email;?>"></a>
<a class=" btn btn-default quick-view ion-ios-videocam jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Video Call" href="#" onclick="onJodoVideoClicked(this)" data-product_name="<?php echo esc_attr__($product->get_name());?>" data-product_price="<?php echo esc_attr__($product->get_price());?>" data-product_id="<?php echo esc_attr($product->get_id()); ?>" data-product_categories="<?php echo esc_attr__(wp_strip_all_tags(wc_get_product_category_list($product->get_id()))) ?>" data-user_id="<?php echo $user_email;?>"></a>
<a class=" btn btn-default quick-view ion-android-chat jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Chat" href="#" onclick="onJodoChatClicked(this)" data-product_name="<?php echo esc_attr__($product->get_name());?>" data-product_price="<?php echo esc_attr__($product->get_price());?>" data-product_id="<?php echo esc_attr($product->get_id()); ?>" data-product_categories="<?php echo esc_attr__(wp_strip_all_tags(wc_get_product_category_list($product->get_id()))) ?>" data-user_id="<?php echo $user_email;?>"></a>
</div>
<?php endif; ?>
Step6 – Check if Jodo buttons are visible below product price,
Jodo Buttons will load once the widget is loaded in the background.
Note :
Following URL will be change as per deployment of ‘jodowidget’
__acstoolbar.target = “https://demo2.jodoworld.com:4443”;
Are there any extra methods to push website data to Jodowidget while initiating session from simple Javascript ?
- Push parameters while initiating session from HTML page:
<div class="title">JCall</div>
<i class="j-btn fa fa-phone" onclick="jodoCall(['english','vikrant','business'])"></i>
</div>
Sample Javascript Code Function to Pass array of parameters :
function jodoCall(productobject) {
var calldata = [];
var calldataelement = {};
if (jodoinitdone === true) {
jodoInit.setLanguage(productobject[0]);
calldataelement = new Object();
calldataelement.parameterid = 4011;
calldataelement.value = productobject[0];
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4031;
calldataelement.value = productobject[1];
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4035;
calldataelement.value = productobject[2];
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Voicefromscript();
}
}
- Sample methods to push data to jodowidget from javascript function:
jodoInit.SaveCustomerSessionData(calldata);
- Sample method to display widget on screen:
jodoInit.showwidgetfromscript();
- Sample method to call jodowidget’s Voice call functionality:
jodoInit.showwidget_Voicefromscript();
- Sample method to call jodowidget’s Video call functionality:
jodoInit.showwidget_Videofromscript();
- Sample method to call jodowidget’s chat call functionality:
jodoInit.showwidget_Chatfromscript();
# What are the Script Parameters / Terminology ?
Jodo widget API script parameters while configuration with website :
| Parameter | Default Value | Details |
|---|---|---|
| apikey | API key for process | Organization unique identifier for configured service |
| servicekey | Service key for Process | Process unique identifier for configured service |
| tracelevel | 1 | Console logging tracelevel 1- 5 |
| language | English | Widget / page default language parameter |
| product | none | Widget / page default product parameter |
| functionparam | none | Widget / page default function parameter |
| theme | theme_orange | Theme parameter for UI experiance change 1. theme_orange (Orange Theme : Default Theme) 2. theme_blue1 (Blue Theme) |
| visible | true | Widget icon visibility parameters |
| visibility | hide | Widget appearance on loadtime parameter hide / show |
| target | https://demo2.avhan.com:4443/ | Hosted URL of widget API path |
Integrate JodoChat with ChatBOT
This approach keep entire control of conversation within 3rd party Chat BOT. Jodo Chat APIs are called to initialize Jodo Live Session and listen to Jodo events / messages.
3rd Party Chat BOT developer has to initialize Jodo event handler to receive events from Jodo Chat server. All Jodo chat messages need to be rendered in 3rd Party Chat BOT messages box. Additional controls have to be created in 3rd Party Chat BOT to handle Jodo voice, video, screen share etc features.
Advantages
- Retain full control of conversation within the 3rd party Chat Bot
- Control can be returned from Jodo to Chat BOT
- Developer has full control on rendering of messages in Customer view of Messages Box
- Once session is terminated, Jodo can provide additional details such as Voice Call Recording Link, Chat Transcript, Agent Details, Live Session Duration
Disadvantages
- Chat Bot window is replaced and this impacts branding of Chat Bot
- Additional efforts are required to implement features like Voice Call, Video Call, Screen Share, Location Share, File Upload
- Developer needs to know multiple Jodo Chat APIs & Events handling methods
- InitializeJodoChat
- SaveCustomerSessionData
- SendMssage
- EndChat
- Start Voice Call
- End Voice Call
- Mute voice
- Unmute voice
- Capture Image Request
- Start Video Call
- End Video Call
- Start Screen Share
- End Screen Share
- Send File (Image, Video, Document etc)
- Send Location
Initialize Jodo Chat
This method should be called to initialize Jodo Chat. ChatBOT data can be passed in this method, which will be presented to user handling chat.
jodoInitializeChat (JSON inputObject)
inputObject Parameters
chatbotsessionid : This is Chat BOT session id
language: Language to be used to start Live Chat
visitordetails: Visitor information
chatbot: Chat BOT communication history with all selected options, which will be presented to Jodo User
customcss: This is path to custom CSS. This CSS will be used to override Jodo Chat CSS
Sample Input Data
{
"chatbotsessionid": "jdfh938dsjd",
"language": "en-IN",
"visitordetails": {
"name": "john",
"email": "johon@noman.com",
"phone": "919988776655"
},
"chatbot": {
"name": "RIA",
"conversation": [
{
"type": "chatbot",
"message": "Hi",
"timestamp": "10-jan-2023 10:00:00"
},
{
"type": "chatbot",
"message": "Choose Language – English, Hindi",
"timestamp": "10-jan-2023 10:00:01"
},
{
"type": "visitor",
"message": "English",
"timestamp": "10-jan-2023 10:00:05"
}
]
},
"customstyles": "https://chatbot.com/customercss.css"
}
Success Response
{
"eventtype": "CHATSTARTSESSION",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success",
"messages": [
{
"message": "Chat Session Started",
"livechaturl": "https://jodo.com/livechat/",
"userimage": "https://abc.com/userimages/abc123.jpg",
"userid": "abc_jodo@avhan.com",
"agentname": "ABC PQR",
"sessionid": "ABCD123456"
}
]
}
Failure Respose
{
"eventtype": "CHATSTARTSESSION",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Failure",
"message": "No Agent Available"
}
Save Customer Data
This method is used to pass additional data to Jodo which can be used for user selection. This data is also shown to user when session is connected. This can be Product Name, Product Price etc. Multiple parameters can be passed. This method can be called multiple times. If same parameter is passed more than once, previous value is overwritten.
jodoSaveCustomerData (JSON inputObject)
inputObject Parameters
pid: Parameter ID
pvalue: Parameter Value
Sample Input Data
[
{
"pid": "product",
"pvalue": "Insurance"
},
{
"pid": "productcategory",
"pvalue": "Health Insurance"
},
{
"pid": "price",
"pvalue": "12000"
}
]
Success Response
{
"eventtype": "CUSTOMERSESSIONDATA",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success"
}
Failure Response
{
"eventtype": "CUSTOMERSESSIONDATA",
"result": "Failure",
"responsedatetime": "2023-02-03 15:01:10",
"message": "Incorrect parameter"
}
Send Message
This method is used to send messages to Jodo user
jodoSendMessage ( JSON inputObject)
inputObject Parmeters
Message Type: Type of message to be sent
Message : Actual message content.
Sample Input Data
{
"messageType": "Text",
"message": "Hello I am ABCD"
}
Success Response
{
"eventtype": "CHATMESSAGESEND",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success"
}
Failure Response
{
"eventtype": " CHATMESSAGESEND",
"result": "Failure",
"responsedatetime": "2023-02-03 15:01:10",
"message": "Incorrect message type"
}
End Chat Session
This method is used to end active chat session
jodoSessionEnd()
Success Response
{
"eventtype": "JODOSESSIONEND",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success"
}
Failure Response
{
"eventtype": " JODOSESSIONEND",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Failure",
"message": "Session is not active"
}
Send File
This method is used to share Image, Video, Document etc with Jodo user
JodosendFile(JSON inputObject)
inputObject Parameters
FileName: Name of file
FileData: Content of File
Sample Input Data
{
"filename": "PromptRecordingList.xls",
"filedata": <DATAOBJECT>
}
Success Response
{
"eventtype": "JODOFILEUPLOAD",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success",
"FilePath": "https://jodo.com/upload/PromptRecordingList.xls",
"FileSize": "6777868"
}
Failure Response
{
"eventtype": "JODOFILEUPLOAD",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Failure",
"message": "Request processing error"
}
Send Location
This method is used to share location with Jodo user
jodoSendLocation(JSON inputObject)
inputObject Parameters
latitude: Latitude of Location
longitude: Longitude of Location
Sample Input Data
{
"latitude": "72.00",
"longitude": "19.1234"
}
Success Response
{
"eventtype": "JODOLOCATIONSEND",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Success",
"maplocationurl": "URL For Embedded Google Maps Location",
"mapimageurl": "URL of Map Image"
}
Failure Response
{
"eventtype": " JODOLOCATIONSEND ",
"responsedatetime": "2023-02-03 15:01:10",
"result": "Failure",
"message": "Incorrct location"
}
Steps for WordPress Widget Configuration
Plugin Configuration Steps:
Assuming the WordPress website is already configured and Admin credentials are available with the user. Following are the steps to configure the Jodo Widget Plugin with the WordPress website.
1. Open WordPress Admin Control Panel:
2. Navigate to the Plugins section: and Select the ‘Add New’ Option:
3. Select option: Upload plugin:
4. Select the plugin from the local folder and install the plugin :
5. Activate the plugin from the plugins screen:
6. After activation enter valid “API Key” and “Service Key” configured for the domain using Service UI WordPress process configuration screen to start using the widget on the website.
Select: Configure > WordPress Settings >
7. Input a valid Domain Name and copy the API Key and Service Key from the page.
8. Configure plugin credentials and save the setting :
9. Check the website with the widget:
Script to pass the website Product Parameters (Woo Commerce Specific): Sample Script:
<script>
var jodoinitdone = false;
var __acstoolbar = { };
__acstoolbar.apikey = 'test_org';
__acstoolbar.servicekey = 'E-commerce';
__acstoolbar.tracelevel = '1';
__acstoolbar.language = 'english';
__acstoolbar.target = "https://demo2.avhan.com:9443";
__acstoolbar.visibility = "hide";
__acstoolbar.theme="theme_orange2";
__acstoolbar.serverpath = "https://demo2.avhan.com:9443";
__acstoolbar.applicationpath = "https://demo2.avhan.com:9443";
(function ()
{
var joinSC = document.createElement('script');
joinSC.type = 'text/javascript';
joinSC.src = __acstoolbar.target + '/jodowidgetapi/js/initfunctions.js';
joinSC.onload = validateKey;
var joinScript = document.getElementsByTagName('script')[0];
joinScript.parentNode.insertBefore(joinSC, joinScript);
})();
function validateKey() {
jodoInit = new jodoworld.initfunctions();
jodoInit.initService();
}
function onJodoCallClicked (productobject) {
var calldata = [];
var calldataelement = { };
if (jodoinitdone === true) {
calldataelement = new Object();
calldataelement.parameterid = 4030;
calldataelement.value = productobject.getAttribute("data-product_url");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4031;
calldataelement.value = productobject.getAttribute("data-product_name");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4034;
calldataelement.value = productobject.getAttribute("data-product_price");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4033;
calldataelement.value = productobject.getAttribute("data-product_id");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4035;
calldataelement.value = productobject.getAttribute("data-product_categories");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4041;
calldataelement.value = productobject.getAttribute("data-email");
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Voicefromscript();
}
resizeDownForJodo();//15-May-2019
}
function SetJodoLanguage (objLang) {
var calldata = [];
var calldataelement = { };
console.log("WooLanguage: " + objLang);
var languge = objLang;
var selectlang;
if(languge === "en|en"){ //english
selectlang = "English" ;
} else if(languge === "en|hi"){ //hindi
selectlang = "Hindi" ;
} else if(languge === "en|mr"){ //marathi
selectlang = "Marathi";
} else if(languge === "en|ar"){ //arabic
selectlang = "Arabic" ;
} else if(languge === "en|zh-TW"){ // chinese
selectlang = "Chinese";
} else if(languge === "en|es"){ //spanish
selectlang = "Spanish";
} else if(languge === "en|fr"){ //french
selectlang = "French";
}
jodoInit.setLanguage(selectlang);
calldataelement = new Object();
calldataelement.parameterid = 4011;
calldataelement.value = selectlang;
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
}
function onJodoChatClicked (productobject) {
var calldata = [];
var calldataelement = { };
if (jodoinitdone === true) {
calldataelement = new Object();
calldataelement.parameterid = 4030;
calldataelement.value = productobject.getAttribute("data-product_url");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4031;
calldataelement.value = productobject.getAttribute("data-product_name");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4034;
calldataelement.value = productobject.getAttribute("data-product_price");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4033;
calldataelement.value = productobject.getAttribute("data-product_id");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4035;
calldataelement.value = productobject.getAttribute("data-product_categories");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4041;
calldataelement.value = productobject.getAttribute("data-email");
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Chatfromscript();
}
resizeDownForJodo();//15-May-2019
}
function onJodoVideoClicked (productobject) {
var calldata = [];
var calldataelement = { };
if (jodoinitdone === true) {
calldataelement = new Object();
calldataelement.parameterid = 4030;
calldataelement.value = productobject.getAttribute("data-product_url");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4031;
calldataelement.value = productobject.getAttribute("data-product_name");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4034;
calldataelement.value = productobject.getAttribute("data-product_price");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4033;
calldataelement.value = productobject.getAttribute("data-product_id");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4035;
calldataelement.value = productobject.getAttribute("data-product_categories");
calldata.push(calldataelement);
calldataelement = new Object();
calldataelement.parameterid = 4041;
calldataelement.value = productobject.getAttribute("data-email");
calldata.push(calldataelement);
jodoInit.SaveCustomerSessionData(calldata);
jodoInit.showwidgetfromscript();
jodoInit.showwidget_Videofromscript();
}
resizeDownForJodo();//15-May-2019
}
function jodoWidgetInitialized() {
jodoinitdone = true;
}
/*15-May-2019*/
var jodo_browser_size = window.matchMedia("(min-width: 900px)");
function resizeDownForJodo() {
if(jodo_browser_size.matches){
document.getElementById("widget_main_div").style.width = "28%";
document.getElementById("widget_main_div").style.display="block";
document.getElementById("widget_close_icon").style.display="block";
document.getElementById("widget_chat_icon").style.display="none";
document.body.classList.add("resize-for-jodo");
document.getElementById("primary-nav").classList.add("container-new-jodo-nav");
var el = document.querySelectorAll(".container");
for (var i=0;i<el.length; i++) {
el[i].className = "container-new-jodo";
}
}
document.getElementById("widget_close_icon").addEventListener("click", resizeUpForJodo);
document.getElementById("widget_chat_icon").addEventListener("click", resizeDownForJodo);
document.getElementById("widget_close_icon").style.display="block";
document.getElementById("widget_chat_icon").style.display="none";
document.getElementById("widget_main_div").style.display="block";
}
function resizeUpForJodo(){
if(jodo_browser_size.matches){
document.body.classList.remove("resize-for-jodo");
document.getElementById("primary-nav").className="navbar navbar-default";
document.getElementById("primary-nav").classList.remove("container-new-jodo-nav");
var el = document.querySelectorAll(".container");
for (var i=0;i<el.length; i++) {
el[i].className = "container-new-jodo";
}
}
document.getElementById("widget_chat_icon").style.display="none";
}
/*15-May-2019*/
</script>
Script function usage to pass the widget parameters:
onclick=”onJodoVideoClicked(this)”
Sample Button click events code and mapping to function: Chat/ Voice/ Video calls:
<a class=" btn btn-default quick-view ion-android-call jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Call" href="#" onclick="onJodoCallClicked(this)" data-product_name="Pigeon Pressure Cooker (Aluminium)" data-product_price="1649" data-product_id="371" data-product_categories="Electronics, Kitchen appliance" data-user_id=""></a>
<a class=" btn btn-default quick-view ion-ios-videocam jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Video Call" href="#" onclick="onJodoVideoClicked(this)" data-product_name="Pigeon Pressure Cooker (Aluminium)" data-product_price="1649" data-product_id="371" data-product_categories="Electronics, Kitchen appliance" data-user_id=""></a>
<a class=" btn btn-default quick-view ion-android-chat jodo-buttons-hide" data-toggle="tooltip" title="Click to Jodo Chat" href="#" onclick="onJodoChatClicked(this)" data-product_name="Pigeon Pressure Cooker (Aluminium)" data-product_price="1649" data-product_id="371" data-product_categories="Electronics, Kitchen appliance" data-user_id=""></a>
Frequently Asked Questions
You could download the app from jodoworld.com web site. The app is avaiable for iOS, android and PC.
Make sure that your browser javascript is enabled and Jodo widget is configured for the domain name.
Check the spam mailbox for the activation link. After successful activation procees with creation of default service and users.
We use ChatBox/CallBox code for WordPress where the menu will be displayed in the bottom right corner for every page on the site. The "Button Code" is used to have a chat/call button on a single page. You need to cut and paste the code into your html file manually.
If your jodo app in your mobile is not started, customer will receive callback option to submit so that after loggin agent can contact back on voice or email as the details shared in callback form.
You could install into multiple devices (android mobile, android tablet, PC) but you can login on single device at a time or you can use different user account for each individual device.
You could send individual image or photo by clicking on upload sign during the chat. You could also combine multiple photos/images by clicking the upload and select icon and add images/photo into the active chat session to send.
With same session if the voice call is dropped due to network failure and customer is still active on chat, in this scenario agent can send call / video request to restart the session.
Screenshots
1. Chat/Call menu displayed in bottom, right corner. Creating notepad with rich contents and sharing with visitors/customers during chat session.
2. Co-browsing web, making annotation directly on the screen to express your intention clearly during voice call.
3. Co-viewing documents, making annotation, highlighting important sections, words… during call session.
4. Translate words into different languages to your international partners, customers.
5. Receive chat/call from customers with multiple devices: ipad, iphone, android or PC…and bring customer service with you wherever you go.