Add jodo widget in HTML website with external events

Author: ritika raj 400 views

Step 1
With HTML website select the page to add Jodo widget and paste below Snippet just before the end of the tag of the page

Step 2
Insert your API key and Service key provided at line #4 & #3
Replace the server path at line number #7, #12, #13

Step 3
Check to see if the widget has loaded on your integrated page.

				
					 <script>
        var __acstoolbar = {};
        __acstoolbar.servicekey = "Add Service Key";
        __acstoolbar.apikey = "Add API Key";
        __acstoolbar.tracelevel = '1';
        __acstoolbar.language = 'english';
        __acstoolbar.target = "https://myjodo.jodoworld.com";
        __acstoolbar.visible = 'false';
        __acstoolbar.visibility = 'show';
        __acstoolbar.widgeticon = "show";
        __acstoolbar.theme = 'theme_orange2';
        __acstoolbar.serverpath = "https://myjodo.jodoworld.com";
        __acstoolbar.applicationpath = "https://myjodo.jodoworld.com";

        (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>
				
			

To have custom start to the Widget use the following scripts:

  • To initiate direct digital call from widget. Add the following script in the above main code:
				
					function jodoCall(productobject) {
        var calldata = [];
        var calldataelement = {};
        var jodoInit = new jodoworld.initfunctions();
        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);
            calldataelement = new Object();
            calldataelement.parameterid = 4045;
            calldataelement.value = productobject[3];
            calldata.push(calldataelement);
            jodoInit.SaveCustomerSessionData(calldata);
            jodoInit.showwidgetfromscript();
            jodoInit.showwidget_Voicefromscript();
        }
    }
				
			
  • To initiate direct chat session from widget. Add the following script in the above main code:
				
					function jodoChat(productobject) {
        var calldata = [];
        var calldataelement = {};
        var jodoInit = new jodoworld.initfunctions();
        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);
            calldataelement = new Object();
            calldataelement.parameterid = 4045;
            calldataelement.value = productobject[3];
            calldata.push(calldataelement);
            jodoInit.SaveCustomerSessionData(calldata);
            jodoInit.showwidgetfromscript();
            jodoInit.showwidget_Chatfromscript();
        }
    }
				
			
  • To start direct video call session from widget .
    Add the following script in the above main code:
				
					function jodoVideo(productobject) {
        var calldata = [];
        var calldataelement = {};
        var jodoInit = new jodoworld.initfunctions();
        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);
            calldataelement = new Object();
            calldataelement.parameterid = 4045;
            calldataelement.value = productobject[3];
            calldata.push(calldataelement);
            jodoInit.SaveCustomerSessionData(calldata);
            jodoInit.showwidgetfromscript();
            jodoInit.showwidget_Videofromscript();
        }
    }
				
			
  • To start screenshare session from widget.
    Add the following script in the above main code:
				
					
    function jodoScreenshare(productobject) {
        var calldata = [];
        var calldataelement = {};
        var jodoInit = new jodoworld.initfunctions();
        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);
            calldataelement = new Object();
            calldataelement.parameterid = 4045;
            calldataelement.value = productobject[3];
            calldata.push(calldataelement);
            jodoInit.SaveCustomerSessionData(calldata);
            jodoInit.showwidgetfromscript();
            jodoInit.showwidget_Startscreensharefromscript();
        }
    }
    
    function jodoWidgetInitialized() {
        jodoinitdone = true;
    }
    
    //show button after UA registered
    function waitForJodoInitDone() {
        if (jodoinitdone) {
            setTimeout(function () {
                // Event trigger for auto start: Need to map page controls and function to start voice call from script 'jodoCall()'
            }, 1000);
        }
        else {
            setTimeout(function () {
               waitForJodoInitDone();
            }, 1000);
        }
    }
    
    function bindEvent(element, eventName, eventHandler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, eventHandler);
        }
    }
    
    bindEvent(window, 'message', function (e) {
        //console.log("iframe message from Parent:" + e.data);
        var parentMsg = JSON.parse(e.data);
        var status = parentMsg.id;
        var message = parentMsg.message;
        
        switch (status) {
            case "screenshare":
                if (message === "started") {
                    // To hide page control.
                    // document.getElementById("screensharetxt").innerHTML = "End Screen";
                    screenshareflag = 2;
                }
                if (message === "ended") {
                    // To hide page control.
                    // document.getElementById("screensharetxt").innerHTML = "Share Screen";
                    screenshareflag = 1;
                }
                break;
            
            case "voice":
                if (message === "answered") {
                }
                if (message === "ended") {
                }
                break;
            
            case "UaRegistered":
                break;
        }
    });
    
    waitForJodoInitDone();
				
			

Auto Trigger event :
You  can enable and disable the auto trigger event from here.