Hello,
I’m developing a plugin that embeds a piece of JavaScript on the customer support portal in Jira Service Desk. The JS widget is provided by Chatlio which offers a live chat bubble. The JS that my plugin embeds loads more JS resources from Chatlio’s servers. I assume Chatlio does this so they can keep their chat widget updated without redistributing a bunch of JS code. The error “Error: undefined missing”, seems to be thrown by “batch.js” which seems to be native to Jira. This causes the JS required by the Chatlio widget to fail.
Here is the JS that my plugin loads as a web resource within the “customerportal” context:
(function ($) { // this closure helps us keep our variables to ourselves.
console.debug("chatlio-portal-chat-resources loaded!");
// This pattern is known as an "iife" - immediately invoked function expression
// wait for the DOM (i.e., document "skeleton") to load. This likely isn't necessary for the current case,
// but may be helpful for AJAX that provides secondary content.
$(document).ready(function () {
// form the URL
var url = AJS.contextPath() + "/rest/chatlio-portal/1.0/";
var widgetId = false;
// request the config information from the server
$.ajax({
url: url,
dataType: "json"
}).done(function (config) { // when the configuration is returned...
console.debug(config);
if (config.widget_id !== "" && config.widget_id && config.widget_id !== null) {
widgetId = config.widget_id;
}
if (widgetId) {
console.debug("Widget ID is: " + widgetId);
window._chatlio = window._chatlio || [], function () {
var t = document.getElementById("chatlio-widget-embed");
if (t && window.ChatlioReact && _chatlio.init) _chatlio.init(t, ChatlioReact); else {
for (var e = function (t) {
return function () {
_chatlio.push([t].concat(arguments))
}
}, i = ["configure", "identify", "track", "show", "hide", "isShown", "isOnline", "page"], a = 0; a < i.length; a++) _chatlio[i[a]] || (_chatlio[i[a]] = e(i[a]));
var c = document.createElement("script"), o = document.getElementsByTagName("script")[0];
c.id = "chatlio-widget-embed", c.src="https://w.chatlio.com/w.chatlio-widget.js", c.async = !0, c.setAttribute("data-embed-version", "2.3"), c.setAttribute("data-widget-id", widgetId), o.parentNode.insertBefore(c, o)
}
}();
}
});
});
})(AJS.$ || jQuery);
This is what the JS looks like when provided by Chatlio:
window._chatlio = window._chatlio||[];
!function(){ var t=document.getElementById("chatlio-widget-embed");if(t&&window.ChatlioReact&&_chatlio.init)return void _chatlio.init(t,ChatlioReact);for(var e=function(t){return function(){_chatlio.push([t].concat(arguments)) }},i=["configure","identify","track","show","hide","isShown","isOnline", "page"],a=0;a<i.length;a++)_chatlio[i[a]]||(_chatlio[i[a]]=e(i[a]));var n=document.createElement("script"),c=document.getElementsByTagName("script")[0];n.id="chatlio-widget-embed",n.src="https://w.chatlio.com/w.chatlio-widget.js",n.async=!0,n.setAttribute("data-embed-version","2.3");
n.setAttribute('data-widget-id','<Widegt-ID-Here>');
c.parentNode.insertBefore(n,c);
}();
This is what my browser’s console looks like when loading the customer support portal:
You can see that some of the JS provided by Chatlio works, but another script (https://w.chatlio.com/v5/vendor/chatlio.min.7ab10269.js) required by the widget fails to load.
I should note that the JS in the second block of code that I posted, runs perfectly on other websites. Is there something within Jira that prevents JS from loading from external domains? Has anyone run into something like this before? Any help would be greatly appreciated.