Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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.

2 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.

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Jira Service Management

Security Advisory for Jira Service Management

On October 20, 2021, Atlassian published a security advisory for Jira Service Management. The full advisory is available at this link.  We've seen a number of questions already asking for...

165 views 0 2
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you