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?

[Deleted user]

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.

[Deleted user]

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?

[Román Yllescas Carrillo]

Based on the community link  create widgetService service in angular 2+...

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root',

})

export class WidgetService {

private scriptId = 'jsd-widget-script';

private isWidgetLoaded = false;

constructor() {}

loadScriptForLanguage(language: string) {

if (this.isWidgetLoaded) {

console.info('Widget ya cargado, evitando duplicados.');

return;

}

this.jiraHelpDesk(this.getDataKeyForLanguage(language));

}

private jiraHelpDesk = (key: string) => {

const jhdScript = document.createElement('script');

jhdScript.id = this.scriptId;

jhdScript.type = 'text/javascript';

jhdScript.setAttribute('data-jsd-embedded', 'null');

jhdScript.setAttribute('data-key', key);

jhdScript.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');

jhdScript.src = 'https://jsd-widget.atlassian.com/assets/embed.js';

jhdScript.onload = () => {

console.info('Script del widget cargado exitosamente.');

this.isWidgetLoaded = true;

const domContentLoadedEvent = new Event('DOMContentLoaded', {

bubbles: true,

cancelable: true,

});

window.document.dispatchEvent(domContentLoadedEvent);

};

jhdScript.onerror = () => {

console.error('Error al cargar el script del widget.');

};

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

};

removeWidget() {

const existingScript = document.getElementById(this.scriptId);

if (existingScript) {

existingScript.remove();

console.info('Script del widget eliminado.');

} else {

console.info('No se encontró el script del widget para eliminar.');

}

}

getDataKeyForLanguage(language: string): string {

switch (language) {

case 'en':

return 'enKey';

case 'es':

return 'esKey';

default:

return 'defaultKey';

}

}

}

[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