How could this be solved? External JavaScript loads, but doesn't work without an ugly workaround.

[alxndr-w]

I was asked to add an external JS provided by Jira. It was consented and loaded properly, but the button that should show a chat didn't show up. However, the JS provided by Jira itself was correct, the relevant asset is loaded.

I found out (trial and error) that the script waits for DOMContentLoaded. So I set a timeout to fire the DOMContentLoaded-Event. Unfortunately, I have to set a timeout which accidentally solves it - if the JavaScript added to the DOM will be loaded just early enough.

<script type="text/plain" data-category="preferences" data-service="jira_support">
jira = document.createElement('script');
jira.setAttribute('data-jsd-embedded', '');
jira.setAttribute('data-key', 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX');
jira.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');
jira.setAttribute('src', 'https://jsd-widget.atlassian.com/assets/embed.js');

document.getElementsByTagName('head')[0].appendChild(jira);

setTimeout(function() {
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
        bubbles: true,
        cancelable: true
    }));
}, 2000);
</script>

This is the relevant CookieConsent configuration part.

[...]
  | "preferences": {
  | "readOnly": false,
  | "enabled": false,
  | "services": {
  | "jira_support": {
  | "label": "Jira Support",
  | "onAccept":  () => wsm_im.acceptService('jira_support') ,
  | "onReject":  () => wsm_im.rejectService('jira_support')
  | },
[...]

Is there any better way to solve this? As you can see, I understand some basics but my daily business is neither JavaScript nor Browser behaviour and underlying concepts. So yes, can you rewrite it so I can learn from it?

[orestbida]

I'm not sure I understand what the issue is.

Why are you manually firing the DOMContentLoaded after 2 seconds? Is this behaviour something specific to the jira plugin/button?

By default the plugin will load with a low priority, to avoid having a significant impact on page loading speed. This is the behaviour of all scripts with the attribute type="module" or those that have the defer keyword:

<script type="module" src=".."></script> // wait page load
<script defer src=".."></script> // wait page load

You can make the plugin load with a higher priority by using the UMD variant and by setting the lazyHtmlGeneration to false:

<script src="cookieconsent.umd.js"></script>
<script src="cookieconsent-init.js">
CookieConsent.run({
  lazyHtmlGeneration: false,
  ...
}};
</script>