Occasional issues uploading our minified Web-SDK to the ServiceNow/SNOW portal

XO Platform APIs and SDKs
1

Hello all,

This is to keep everyone updated that some users may face issues with uploading our minified web-SDK on ServiceNow (SNOW) portal. Their portal tries to sanitize some data (as per our observation they try to sanitize any code within the pattern ${} ) and changes the minified web-SDK.

This has been reported to SNOW over their community. Please note that this is an issue with ServiceNow and not Kore.ai. The usage of ${} is valid code and is used globally.
https://community.servicenow.com/community?id=view_idea&sysparm_idea_id=6870035edbd72410aa66a9fb139619f9&sysparm_idea_table=x_snc_com_ideation_idea&sysparm_module_id=enhancement_requests

Symptoms:
The confirmation node may not show options/User may see issues in rendering button templates.

Possible workarounds

  1. Suggested by SNOW over a work session: Remove all old uploaded SDKs and have ONLY one JS. We are not sure how this helps and how internally SNOW works but it helped in some cases.
  2. Try to change certain parts of code that use ${}, re-minify, and re-upload on the SNOW portal. Below was the comment shared by SNOW

I have checked why the ${} is getting sanitized with our dev team. Below are the comments provided by our dev team.
The variables inside ${} are swapped with Glide property variables. The platform does not support turning this off.
You can set variables using the method GlideProperties.set as described below.

  1. Navigate to sys_ui_script table and create a new record:
    1a. Name: TestScriptFile
    1b. UI Type: All
    1c. Script:
var foo = '${testing_variable}';
  1. Save the record and navigate to /TestScriptFile.jsdbx
  2. Observe that foo is being set to an empty string
  3. Navigate to background scripts and execute the following piece of code:
GlideProperties.set("testing_variable", "123");
gs.print(GlideProperties.get("testing_variable")); // 123 will print
  1. Repeat step 2 and observe that ${testing_variable} was substituted with the glide property

-You can repeat the script execution and replace testing_variable with cellVal and you’ll see that the variable is substituted when serving the kore-ai-sdk.min js file.
-This is a platform behavior and not specific to the service portal.

Just as an example of how some part of Kore.ai’s public Web-SDK may be handled for any occurances of ${} see the below snippet:
Note the usage of uniqueString and chatFooterTemplate=chatFooterTemplate.replaceAll(uniqueString,"$"); in the end to handle something which would otherwise have been ${botMessages.message}

var chatFooterTemplate =
                    '<div class="footerContainer pos-relative"> \
                        {{if userAgentIE}} \
                        <div role="textbox" class="chatInputBox inputCursor" aria-label="Message" aria-label="Message" contenteditable="true" placeholder="'+uniqueString+'{botMessages.message}"></div> \
                        {{else}} \
                        <div role="textbox" class="chatInputBox" contenteditable="true" placeholder="'+uniqueString+'{botMessages.message}"></div> \
                        {{/if}} \
                    <div class="attachment"></div> \
                    {{if isTTSEnabled}} \
                        <div class="sdkFooterIcon ttspeakerDiv ttsOff"> \
                            <button class="ttspeaker" title="Talk to speak"> \
                                <span class="ttsSpeakerEnable"></span> \
                                <span class="ttsSpeakerDisable"></span> \
                                <span style="display:none;"><audio id="ttspeaker" controls="" autoplay="" name="media"><source src="" type="audio/wav"></audio></span>\
                            </button> \
                        </div> \
                    {{/if}} \
                    {{if isSpeechEnabled}}\
                    <div class="sdkFooterIcon microphoneBtn"> \
                        <button class="notRecordingMicrophone" title="Microphone On"> \
                            <i class="microphone"></i> \
                        </button> \
                        <button class="recordingMicrophone" title="Microphone Off" > \
                            <i class="microphone"></i> \
                            <span class="recordingGif"></span> \
                        </button> \
                        <div id="textFromServer"></div> \
                    </div> \
                    {{/if}}\
                    <div class="sdkFooterIcon"> \
                        <button class="sdkAttachment attachmentBtn" title="Attachment"> \
                            <i class="paperclip"></i> \
                        </button> \
                        <input type="file" name="Attachment" class="filety" id="captureAttachmnts"> \
                    </div> \
                    {{if !(isSendButton)}}<div class="chatSendMsg">Press enter to send</div>{{/if}} \
                </div>';
                chatFooterTemplate=chatFooterTemplate.replaceAll(uniqueString,"$");
  1. Suggested by Kore: If possible, avoid uploading the minified SDK on SNOW and let your web page reference/access it from another third-party host. This has worked best with most of the end customer implementations who faced the above-mentioned issue(s).

Thanks to @rajasekhar.balla and Rukmini for the work-arounds.