Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Jira Issue Collector window not opening from custom trigger


We would like to standardize and collect feedback from our users when they use our site, so we implemented the Jira Issue Collector.  Initially, I tried some of the default options, and while they did work, we had concerns about the way they interfered with the layout of our site.  Therefore, I tried the custom approach.  Unfortunately, the custom trigger does not appear to be working.  While the default buttons do stop being injected into the site, it appears that the trigger function is never utilized by the Atlassian JS.

Project information:

We use the React JS library, version 16.9.  We are migrating away from React Native Web currently.  We don't normally use jQuery, but for the sake of making the JIC work, I included it.

Things I have tried:

The Jira admin has given me two code snippets to try: one for HTML, and one for JavaScript.  I've noticed that, while they have the same `collectorId` value,  they apparently grab different scripts.  The HTML one generates a default button.  The JavaScript one appears to do nothing.

Some searching on the internet has led me to a jsFiddle with a working example of the JIC using a custom trigger.  (  Substituting the JS source from the HTML code snippet causes one of the default buttons to be injected.  Substituting the JS source from the JS code snippet does nothing.  I'm not sure what else is required for it to work, but it is not a good sign to me.


This code is present in all views after authentication.  The below is a .tsx file:

import React from 'react';
import styled from 'styled-components';
import { Portal } from "@material-ui/core";
import jQuery from 'jquery';

const FeedbackButton = styled.a`

const ELEMENT_ID = 'jira-feedback-button';
const WINDOW_VAR_NAME = 'jiraIssueCollector';

window['ATL_JQ_PAGE_PROPS'] = {
"triggerFunction": function(showCollectorDialog) {
// Requires that jQuery is available!
jQuery(`#${ELEMENT_ID}`).click(function(e) {

const JIRAIssueCollector = () => {

const setCollector = () => {
const appElement = document.querySelector('body');
if (appElement) {
const snippet = document.createElement('script');
// snippet.async = true;
snippet.type = 'text/javascript';
snippet.src = '';

if (!window[WINDOW_VAR_NAME]) {
window[WINDOW_VAR_NAME] = this;

return (
<FeedbackButton href="#" id={ELEMENT_ID}>
Provide Feedback

export default JIRAIssueCollector;


What am I doing wrong?  Is it a problem with my code?  Or is it a legitimate issue with the downloaded script?  And is it possible to integrate the custom trigger JIC without jQuery?


EDIT: The HTML code snippet suddenly started working to our expectations.  I want to say that there was something we did on our end that got it to finally work, but unfortunately I don't know what it was.  This issue can be considered closed.

1 answer

0 votes
Deleted user Jun 18, 2020

Hi Aaron,


I am doing the same thing on my material/styled component react project.

Could you please share the react component code you used to do this?  




Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

You’re invited: Confluence for MS Teams Live demo + Q&A

This past summer, we joined forces with Microsoft Teams as a part of our mission to help your team collaborate better, starting with more effective meetings. We released a new and improved Confluence...

82 views 0 1
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you