# Integrate Jira issue collectors within topic buttons

**URL:** https://meta.discourse.org/t/integrate-jira-issue-collectors-within-topic-buttons/190442
**Category:** Administrators
**Tags:** how-to
**Created:** [May 14, 2021, 7:53pm UTC](https://meta.discourse.org/t/integrate-jira-issue-collectors-within-topic-buttons/190442 "2021-05-14T19:53:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![JustinBack](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justinback/32/133266_2.png) [@JustinBack](https://meta.discourse.org/u/JustinBack)
#### Post date: [May 14, 2021, 7:53pm UTC](https://meta.discourse.org/t/integrate-jira-issue-collectors-within-topic-buttons/190442/1 "2021-05-14T19:53:24Z")

</div>

Hello 👋

I started implementing Issue collectors in our forum today and wanted to share the super simple theme component I created.

### In the end, it will look like this.

## 

## What you need

- A Jira issue collector
- Some JS knowledge

## Grabbing the issue collector ID

For the collector to work we need it’S ID.

 ![](https://global.discourse-cdn.com/meta/original/3X/3/b/3b0d3d49736518167a53e2a2944f38f0fb36713f.png)

Go to the issue collector of your choice and grab the `collectorId` parameter from the url

```plaintext
https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

```

In my Case it is `176cb88e`

Create a new theme component

and use the following code in the `</head>` section

Replace the following keys with its values

- MY\_COLLECTOR\_ID → `176cb88e`
- REPLACE\_ME\_AJAX → The script source from the " Embedding this issue collector" → “Embed in JavaScript” section of your Jira issue collector  
 ![](https://global.discourse-cdn.com/meta/original/3X/d/6/d69850df60b356c4b6b824a80d89392e1337cc95.png)
- MY\_PROJECT\_KEY → With your issue collector’s project key, if you intend to insert multiple issue collectors.

```js
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
</script>
<script>
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
</script>

```

I have created only 2 CSS buttons for my needs, feel free to add more

```css
[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
    	box-sizing: border-box;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	margin: 0;
    	padding: 0.53em 0.8em;
    	border: none;
    	font-weight: normal;
    	margin: 1px;
    	font-size: var(--font-0);
    	line-height: normal;
    	color: var(--primary-low);
    	background: var(--danger);
    	cursor: pointer;
    	transition: all 0.25s;
    }
    p:hover {
     	color: #000;
    	background: #fff;
    	border-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
    	box-sizing: border-box;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	margin: 0;
    	padding: 0.53em 0.8em;
    	border: none;
    	margin: 1px;
    	font-weight: normal;
    	font-size: var(--font-0);
    	line-height: normal;
    	color: var(--secondary-low);
    	background: var(--success-medium);
    	cursor: pointer;
    	transition: all 0.25s;
    }
    p:hover {
     	color: #000;
    	background: #fff;
    	border-color: #0060df;
    }
}

```

Now onto embedding the issue collector onto posts:

```md
[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Report a bug
[/wrap]

[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Suggest a feature
[/wrap]

```

Thats it! Now you got a working issue collector as a button in your post!