Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

Jira issue collector for react app

Has anyone integrated Jira issue collector with the react application?

Please guide.




5 answers

1 accepted

1 vote
Answer accepted
Deleted user Jun 22, 2020

I got it to work on react no need for jquery

On you index.html


<script type="text/javascript" src="https://jira..."/>


  window.ATL_JQ_PAGE_PROPS = {

    "triggerFunction": function(showCollectorDialog) {

        window.showCollectorDialog = showCollectorDialog;




On your react component:


<FeedbackButton onClick={()=>window.showCollectorDialog()}  > </FeedbackButton>

Working for me also but with jquery only,  jquery is required for the issue collector functions getting the error without it.

I added the script in  componentDidMount

componentDidMount() { window.jQuery = jQuery; const script = document.createElement('script'); script.src = 'https://jira.{corp}.com/jira/.....'; script.async = true; document.body.appendChild(script); }


Thanks for your help.

Deleted user Jun 23, 2020

Where did you set window.ATL_JQ_PAGE_PROPS? on the  componentDidMount too?

I have removed it, not using a custom trigger now.


I tried your solution @[deleted] and it works, I can now open a "Report a bug" Atlassian window but I can't select any fields to write in.

After some tests, I think the problem is Material-UI. If I call the trigger inside a Material-UI component the dialog window appears and I can't write in the fields. But If I call the trigger in a <a> outside Material-UI components it works.

Can any of you share your code? I tried but without success

Like elaine-wow likes this

I was able to use jira issue colector with react using these ways:

onClick={() => {
let blankWindow ='about:blank');
let document = blankWindow?.document;
<script src=""></script>
<script>your jira collector url...</script>
<script>your jira collector url...</script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function (showCollectorDialog) {
jQuery(document).ready(function () {
setTimeout(function () {
}, 50);
Collector Button


import the collector script in your tsx/jsx with the below content:

window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#feedback-button").click(function(e) {

set in your useEffect or componentDidMount

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

script.type = 'text/javascript';
script.src='your jira collector url'
script.async = true;
script2.type = 'text/javascript';
script2.src='your jira collector url'
script2.async = true;


and create the button with the correct id

<Button id="feedback-button">Collector</Button>

0 votes
K10 Labs I'm New Here Sep 06, 2022

If you're like me and stumbled on this while looking for how to properly add the Issue Collector / Jira Service Management widget to a Gatsby Page:

Create the file 'gatsby-ssr.js' if it does not already exist. Add the following to the file.

const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
<script> YOUR WIDGET CODE </script>

if you're testing your dev environment locally, stop then restart the environment with `npm run develop`.

To add onto u691307's response, If anyone comes across this and needs access to multiple widgets, simply change the variable name in the source and the corresponding onClick.  Example:

window.showCollectorDialog = showCollectorDialog;
window.showCollectorDialog2 = showCollectorDialog;
window.showCollectorDialogBestWidgetEver = showCollectorDialog;

I included the jira scipts in the index.html (sorry for the terrible formatting)

<script type="text/javascript"  src="jirascript.js"></script>    

<script type="text/javascript">    
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {        
triggerFunctionfunction (showCollectorDialog) {          $('#giveFeedback').on('click'function (e) {            e.preventDefault();            showCollectorDialog();          });        },      });    

  Declared in my component:

<a href="#" id="giveFeedback">Give feedback</a>

However, if you are using Material UI, and say want to put this in a popup or dialog, you may run into issues that one of the users previously mentioned where the text fields are not clickable. There's a z-index issue, so I just targeted the id in my CSS, and make sure it's marked as important or it will not override the default z-index that is set:

#user-settings {z-index200000000000 !important;}

Hope this helps. 

Suggest an answer

Log in or Sign up to answer