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

[Ramachandra.Kancharapu]

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?

[Corneil du Plessis]

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]

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

[Khizer Rehan]

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

https://jsd-widget.atlassian.com/assets/embed.j

https://jsd-widget.atlassian.com/api/embeddable/${key}/widget

Where in Dynamic only call is made

https://jsd-widget.atlassian.com/assets/embed.js

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?

[Angélica Luz]

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:

• Angular: Load External JavaScript File Dynamically
• How to load external scripts dynamically in 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.

Regards,
Angélica

[Michael Prentice]

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]

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]

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.

Regards,
Angélica