Hi, Does someone know any idea to embed JSD Widget in angular +2?

Ramachandra.Kancharapu February 20, 2020

I'm just able to embed the JSD Widget into index.html page, But when i am trying to embed same in component  it's not supporting.  Can you please suggest the changes which i need to apply to work JSD script in angular 2+ versions?

3 answers

1 vote
Corneil du Plessis March 3, 2021

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.
There may be a way to ensure is it loaded dynamically, I haven't investigated that yet.

Corneil du Plessis March 3, 2021

I found a way to ensure the script tag doesn't delay the angular.

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>
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.setAttribute('src', 'https://jsd-widget.atlassian.com/assets/embed.js');
console.debug('injected:', tag);
Like Angélica Luz likes this
0 votes
Khizer Rehan March 5, 2024

Hi,  @Angélica Luz 

I am trying to load widget dynamically based env file as data-key is defined there but i see that widget is loaded when setting script in `index.html` directly but doesn't work on dynamic injection. I can see script is injected but  Widget is not loaded.

While comparing static injection vs dynamic injection i saw there are 2 Requests are sent in static but not in dynamic

- Static


Where in Dynamic only call is made



However i tried to do HTTP call once script was injected with specific ID i see CORS issue?

I am not sure how to show widget any help on this side?

Screenshot 2024-03-06 at 1.39.35 AM.png

0 votes
Angélica Luz
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 4, 2020

Hello Ramachandra,

Welcome to Atlassian Community!

Searching using the details you provided, I wasn't able to find a solution for that, but I would like to share some links related to injecting external JS files using Angular:

I don't have expertise using Angular, so I'm afraid I won't be able to help you with this question. 

I'd suggest you post this question on our Developer Community since Angular it's a development framework.

Once you post, feel free to share the link to your question here or when you have a response, post here as a new answer so we can accept and vote to help other community members to find this question.


Michael Prentice March 16, 2020

I have the same question. I don't want the "Contact Us" to show up on every page and cover a part of the page. But I do want to show the widget in a dialog and allow the user to use it there.

How can this be accomplished?

Michael Prentice March 16, 2020

Is there an option to embed just an iframe directly rather than the widget?

Where is the developer documentation for this? I can't seem to find anything other than admin docs.

Angélica Luz
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 16, 2020

Hello @Michael Prentice

As mentioned in my previous response, the best option is to contact our Developer Community since Angular it's a development framework.

I shared some documentation that could help, but there is no solution for this yet.


Suggest an answer

Log in or Sign up to answer