Add external widget to Employee center portal

[gkbhandare003]

Hello Everyone, 

hope you all are doing well.

I am new to front-end development and employee center.

I have a requirement of adding a external widget to Employee center page to start the chat .

I have HTML script for it but I am not able to convert it to ServiceNow compatible script.

I have tried possible ways with the knowledge I have but couldn't make it.

this script works fine as an independent HTML page but not in SN EC.

Could someone please help me in converting this script to be compatible with ServiceNow ?

Script:

<script src="https://apps.usw2.pure.cloud/widgets/9.0/cxbus.min.js" onload="javascript&colon;CXBus.configure({debug:false,pluginsPath:'https://apps.usw2.pure.cloud/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script>
<script>
  window._genesys = {
    "widgets": {
      "webchat": {
        "transport": {
          "type": "purecloud-v2-sockets",
          "dataURL": "https://api.usw2.pure.cloud",
          "deploymentKey": "Keyvalue",
          "orgGuid": "otgGuidvalue",
          "interactionData": {
            "routing": {
              "targetType": "QUEUE",
              "targetAddress": "",
              "priority": 2
            }
          }
        },
        "userData": {
		  "skill":"English",
		  "queueId":"00effb45-0876-4db6-b6aa-1a699c030bd0",
		  "email":"test@genesys.com"
          /*"addressStreet": "",
          "addressCity": "",
          "addressPostalCode": "",
          "addressState": "",
          "phoneNumber": "",
          "customField1Label": "",
          "customField1": "",
          "customField2Label": "",
          "customField2": "",
          "customField3Label": "",
          "customField3": ""*/
        }
      }
    }
  };

  const customPlugin = CXBus.registerPlugin('Custom');
</script>

<button type="button" id="chat-button" onclick="customPlugin.command('WebChat.open');">Start Chat</button>

Thank you.

[fauverism]

I would try using an <iframe> approach. What is the error that you are receiving?

[Aditya33]

Hi @gkbhandare003 

I would suggest adding the "csbus" JS library as JS include in the serviceNow and add it to the Widget as dependency.

Also add the script part to the client controller but in chunks as code sample might be in latest version of JS in comparison to older version in ServiceNow.

I think for you it might work if you add the library as dependency.

[Riya Verma]

Hi @gkbhandare003  ,

Hope you are doing great.

in order to use your script in Employee center page , can you please try following below steps:

1. create a new widget and add you script in client script section of widget.

2. Modify the script by removing the HTML script tags and adjusting the code structure to match ServiceNow standards. Here's the modified script:

// Add this code to the client script section of the widget record

function loadExternalScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = callback;
    script.src=url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadExternalScript("https://apps.usw2.pure.cloud/widgets/9.0/cxbus.min.js", function() {
    CXBus.configure({
        debug: false,
        pluginsPath: "https://apps.usw2.pure.cloud/widgets/9.0/plugins/"
    });
    CXBus.loadPlugin("widgets-core");

    window._genesys = {
        widgets: {
            webchat: {
                transport: {
                    type: "purecloud-v2-sockets",
                    dataURL: "https://api.usw2.pure.cloud",
                    deploymentKey: "Keyvalue",
                    orgGuid: "otgGuidvalue",
                    interactionData: {
                        routing: {
                            targetType: "QUEUE",
                            targetAddress: "",
                            priority: 2
                        }
                    }
                },
                userData: {
                    skill: "English",
                    queueId: "00effb45-0876-4db6-b6aa-1a699c030bd0",
                    email: "test@genesys.com"
                }
            }
        }
    };

    const customPlugin = CXBus.registerPlugin("Custom");
});

// Add this code to the HTML template section of the widget record

<button type="button" onclick="javascript&colon;CXBus.command('webchat.open');">Start Chat</button>

• Once you've created the widget record with the modified script, you can then add this widget to the Employee Center page in ServiceNow using the Service Portal configuration options.

[Muheet1]

We tried this but we get this error when inspecting:

observer.nocache.js:2 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Also we have an additional function before this line:

const customPlugin = CXBus.registerPlugin("Custom");

that also needs to be called in the button. The function looks like below:

function getAdvancedConfig() {
return {
"form": {
"autoSubmit": false,
"firstname": "",
"lastname": "",
"email": "",
"language": ""
},
"formJSON": {
"wrapper": "<table></table>",
"inputs": [
{
"id": "cx_webchat_form_firstname",
"name": "firstname",
"maxlength": "100",
"placeholder": "First Name",
"label": "First Name",
"validateWhileTyping": true,

"validate": function(event, form, input, label, $, CXBus, Common){
if (input) {
if ((input.val()).length>0) {
return true;
} else {
return false;
}
}

}
},
{
"id": "cx_webchat_form_lastname",
"name": "lastname",
"maxlength": "100",
"placeholder": "Last Name",
"label": "Last Name",

},
{.....