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.

Get started Tell me more

4,365,548

Community Members

Community Events

168

Community Groups

Community
Products
Jira Service Management
Questions
Dynamically Embedding Service Desk Widget

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

4 votes

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

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

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

0 votes

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.

Products

Community resources

Support

Interests

Community resources

Support

Top groups

Community resources

Support

Come for the products,
stay for the community

Dynamically Embedding Service Desk Widget

4 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Interests

Community resources

Support

Top groups

Community resources

Support

Come for the products,stay for the community

Dynamically Embedding Service Desk Widget

4 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Come for the products,
stay for the community