Dynamically Embedding Service Desk Widget

Scott Cazan

Does anyone know why when I insert the widget embed directly into the html file, it works.. but if I do it dynamicaly via JavaScript, it loads the js file but does not display the widget?

Inserting this directly into the <head> works:
<script type="text/javascript" data-jsd-embedded data-key="####" data-base-url="https://jsd-widget.atlassian.com" src="https://jsd-widget.atlassian.com/assets/embed.js"></script>

 

This does not:

const feedbackScript = document.createElement('script');

feedbackScript.type = 'text/javascript';
feedbackScript.setAttribute('data-jsd-embedded', null);
feedbackScript.setAttribute('data-key', '####');
feedbackScript.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');
feedbackScript.src='https://jsd-widget.atlassian.com/assets/embed.js';
document.head.appendChild(feedbackScript);

 

It DOES actually load the embed.js and runs (I get a response if I set an onload callback) but I see no widget.

Adrian Barnes

We're using Google Tag Manager and this was the solution we worked out:

<script>
 function jiraHelpdesk(callback) {
  var jhdScript = document.createElement('script');
  jhdScript.type = 'text/javascript';
  jhdScript.setAttribute('data-jsd-embedded', null);
  jhdScript.setAttribute('data-key', '####');
  jhdScript.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');
  jhdScript.src='https://jsd-widget.atlassian.com/assets/embed.js';
  if(jhdScript.readyState) { // old IE support
   jhdScript.onreadystatechange = function() {
    if ( jhdScript.readyState === 'loaded' || jhdScript.readyState === 'complete' ) {
     jhdScript.onreadystatechange = null;
     callback();
    }
   };
  } else { //modern browsers
   jhdScript.onload = function() {
    callback();
   };
  }
  document.getElementsByTagName('head')[0].appendChild(jhdScript);
 }

 jiraHelpdesk(function() {
  var DOMContentLoaded_event = document.createEvent('Event');
  DOMContentLoaded_event.initEvent('DOMContentLoaded', true, true);
  window.document.dispatchEvent(DOMContentLoaded_event);
 });
</script>