Embedding JSD Widget in Angular 2+ application

JSM Development JSM Cloud
, ,
1

I was trying to embed the script tag provided by JIRA Service Management Portal for the Widget.
Angular wouldn’t serve the content if when using the DomSanitizer.

The only way I found that works for Angular 2+ applications is to add the <script> tag at the bottom of index.html before the close of </body>

It will be visible in all pages and I have found it can slow the loading the angular application.

I also found a way to ensure the script tag doesn’t delay loading the angular application.

The part of the code fragment <<your-key-from-jsd-widget>> will have to come from the JSD widget code.
This all still goes in the bottom of your index.html
You should see the JSD button appear after a small delay and the log should print the tag pretty much as you have it from the portal configuration apart from the additional id

<script id="jsd"></script>
<script>
let tag = document.getElementById('jsd');
let jsdEmbedded = document.createAttribute('data-jsd-embedded');
let dataKey = document.createAttribute('data-key');
dataKey.value = '<<your-key-from-jsd-widget>>';
let dataBaseUrl = document.createAttribute('data-base-url');
dataBaseUrl.value = 'https://jsd-widget.atlassian.com';
tag.setAttributeNode(jsdEmbedded);
tag.setAttributeNode(dataKey);
tag.setAttributeNode(dataBaseUrl);
tag.setAttribute('src', 'https://jsd-widget.atlassian.com/assets/embed.js');
console.debug('injected:', tag);
</script>
1 Like