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

1 accepted

8 votes

Answer accepted

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>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thanks a lot. It helped me as well

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thank you, this helped me a lot.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

This is a lifesaver. Thanks a lot!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thanks for sharing. This was helpful.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thanks a lot! Works quite well.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

//Thank you very much!) It helped!
//Only better to replace .initEvent with new Event


jiraHelpdesk(function () {

  const DOMContentLoaded_event = new Event('DOMContentLoaded', {

    bubbles: true,

    cancelable: true

  );

  window.document.dispatchEvent(DOMContentLoaded_event);

});

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Any Help on this?

https://community.atlassian.com/t5/Jira-Software-questions/Hi-Does-someone-know-any-idea-to-embed-JSD-Widget-in-angular-2/qaq-p/1307126#M928265

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

3 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

1 vote

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

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

@Glenn Sampson I would say THANK YOU SO MUCH

I asked the question here and discussed the problem which i was able to identified it was somthing i wasn't able to LOAD widget and i tried to do another API call but resulted into CORS issue.

But i just saw your example saw

script.addEventListener('load', (event) => {
  window.document.dispatchEvent(new Event('DOMContentLoaded', {
      bubbles: true,
      cancelable: true
    }));
  }
);

I tried my luck and GUESS what after 3hrs of struggle this worked for me. Doing this did an API call
https://jsd-widget.atlassian.com/api/embeddable/<KEY>/widget i am not sure what trick it did but ONLY my guess is

- once DOMContent is loaded
- Event is dispatched which MAY notifies "embed.js" that DOM is loaded NOW just fetch the widget which it internally DOES api call for widget and loads in UI.

I am not sure exact explanation. But it will great to know if you have some more knowledge.

But thanks for sharing example

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Dynamically Embedding Service Desk Widget

4 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Dynamically Embedding Service Desk Widget

4 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events