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

Next challenges

Recent achievements

Recognition

  • Give kudos
  • My kudos

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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>

Thanks a lot. It helped me as well

Thank you, this helped me a lot.

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
Asked in Jira Service Desk

Calling all Insight users, we need your help!

Hello Insight users,  As part of our (Mindville's) acquisition by Atlassian, our training team is looking to build some new Insight training materials. It would really helpful if you can ...

266 views 4 6
View question

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