Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,365,548
Community Members
 
Community Events
168
Community Groups

Dynamically Embedding Service Desk Widget

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.

4 answers

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>
Deleted user Mar 27, 2020

Thanks a lot. It helped me as well

Thank you, this helped me a lot.

This is a lifesaver. Thanks a lot!

Atlassian needs to put this on their main support page! Thanks!

Thanks for sharing. This was helpful.

Thanks a lot! Works quite well.

if you read the received code, it expects an event

Run this after it has loaded

var DOMContentLoaded_event = document.createEvent("Event")
DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true)
window.document.dispatchEvent(DOMContentLoaded_event)

 

this might be helpful 

https://stackoverflow.com/questions/8578617/inject-a-script-tag-with-remote-src-and-wait-for-it-to-execute

for what is worth this is my react solution currently working for me.

Note I load the script/widget conditionally only if its internal staff 



useScript.js

 

import { useEffect } from 'react';

const useScript = (url, user) => {

  useEffect(() => {

    if (user !== null) {
      if (user.is_internal_staff) {

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

        script.src = url;
        script.id = 'jiraWidget';
        script.setAttribute('async', true);
        script.setAttribute('data-jsd-embedded', '');
        script.setAttribute('data-key', "XXXXXXXX");
        script.setAttribute('data-base-url', "https://jsd-widget.atlassian.com");

        document.body.appendChild(script);

        script.addEventListener('load', (event)=>{
          window.document.dispatchEvent(new Event("DOMContentLoaded", {
            bubbles: true,
            cancelable: true
            }));
          }
        )
        return () => {
          document.body.removeChild(script);
        }
      }
    }
    else {
      // do nothing
    }
  }, [url, user]);
};

export default useScript;

Then to use it 

import useScript from '../hooks/useScript';
useScript('https://jsd-widget.atlassian.com/assets/embed.js', user); //pasing the url and the user


Since initEvent is deprecated it's better to use the Event constructor like this:

window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));

Suggest an answer

Log in or Sign up to answer
TAGS

Atlassian Community Events