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?
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.
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>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
Regards,
Angélica
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Online forums and learning are now in one easy-to-use experience.
By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.