JIRA Service Desk Widget in a Single Page Application

We’re currently building a SPA at our organization, and we would like to integrate the JIRA Service Desk Widget to help support our clients, however we’re having a couple of difficulties.

When using the recommended instructions in the Service Desk, the Widget does one of two things, it either fails to execute(because when adding a new View to the page, it doesn’t execute script tags), or when I force it to execute using javascript, it fails because asynchronous scripts are blocked from using the document.write function, which the widget uses to add the button.

Is there a different method we can use, like a library or module we can import to provide the same functionality? Or are we going to need to build our own?

1 Like

Hi @luke.vantricht,

the snippet does not do much besides adding the button and, upon clicking it, open a modal with backdrop and an iframe.

If you can put the button and modal in there yourself, you can just reference the iframe that the code snippet adds. The iframe can be included like that:

<iframe scrolling="no" frameborder="0" src="https://YOUR_JSD_HOST/rest/collectors/1.0/template/form/ISSUE_COLLECTOR_ID?os_authType=none"></iframe>

The issue collector id will be part of the JS snippet that JSD generates after creating the issue collector.

How you ultimately include that into your SPA is up to you, maybe put it on a nice modal like the snippet would do, but this should give you a hint on what the snippet does so you can pick what you want to build yourself.

Does that help?
Cheers,
Tobias

Hey @tobitheo,
This works fine if using the issue collector, however I’m trying to use the JIRA Service Desk Widget, which seems to function differently. the JIRA SDW provides a data-base-url and a data-key, but they don’t correspond to the issue collectors in any way.

Oh, sorry. Totally misread your requirement :confused:

I’m afraid I’m not familiar with the widget. Your security issues might have something to do with your SPA’s Content Security Policy, but I’m not sure if such would manifest in the way yours do.

I found a reasonable solution.
Embedding JSD Widget in Angular 2+

1 Like