How to create a button to open the issue collector?
Asked by Dan Steffen:

We use at the moment confluence 5.5.3 and JIRA 6.3.7 in our company and we would like to create a button on a page so that the issue collector opens.

I already found this sources:

```
&lt;script type="text/javascript" src="https://myjiraserver/s/en_US-tmk2k1-1988229788/6102/4/1.4.0-m3/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=62933b0b"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;window.ATL_JQ_PAGE_PROPS =  {    "triggerFunction": function(showCollectorDialog) {        //Requries that jQuery is available!         jQuery("#myCustomTrigger").click(function(e) {            e.preventDefault();            showCollectorDialog();        });    }};&lt;/script&gt;  &lt;input type="button"  style="color:green" id="myCustomTrigger" class="button" value="Raise A Bug for ADMIN!" /&gt;
```

but it don't works for me. Can please someone explain me what I am doing wrong? I enabled the HTML-Macro in confluence and a simple console.log works but the Dialog don't open.

I already spend 2 days with this problem and would be for every hint very thanksful.

best regards

Dan


Answers:
author: Steven F Behnke
body: Pardon my delayed response.

I've created a few different types of Issue Collectors for use in Confluence, and I will cover the steps I used to use them. I think this covers both types of usages, so hopefully you can follow one of these sets of instructions. Then, we can attempt to discover what is wrong, since it works for me but supposedly not for you.

None of these options will work on the **Confluence Cloud** offering, sorry. I am not going to coverage usage with User Macros. Now, we have the following assumptions --

* Create a JIRA Issue Collector
* Use a Custom Trigger instead of the built-in options for Triggers  
  *An example of a built-in trigger is:* ![](http://i.imgur.com/N6qtwsY.png)
  * Instead I will use a **Button** in the header for my example:  
    ![](http://i.imgur.com/3vUzG6u.png)

We will attempt three different scenarios with Issue Collectors --

* Visible within **all of Confluence**
* Visible only within **a single Space**
* Visible only when on **a single Page**

All of Confluence {#toc-hId--1326634920}
----------------------------------------

Confluence Administrators have access to the ++Custom HTML++ section of Confluence. This allows them to inject various HTML easily in the typical locations one would need to do so. This can be applied independent of custom themes and overrides spaces automatically.

* As a Project Administrator, configure your Issue Collector and set it to use a custom trigger. You will use the code it provides in the ++At end of the BODY++ section in Custom HTML of Confluence.
* As a Confluence Administrator, navigate to **Confluence Administration** , **General Administration** , **Custom HTML**.
* In the ++At end of the HEAD++ section, use something like this to generate the HTML for your button --

  ```
  <script>AJS.toInit(function(){    AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');});</script>
  ```

* In the ++At end of the BODY++ section, paste the content the configured Issue Collector provided --

  ```
  <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script><script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {	"triggerFunction": function(showCollectorDialog) {		//Requires that jQuery is available!        //Use whatever ID you used on your Button/Trigger        //In this case, I used id="myIssueTrigger" in the Button/<a> element        //So I must use #myIssueTrigger here		jQuery("#myIssueTrigger").click(function(e) {			e.preventDefault();			showCollectorDialog();		});	}};</script>
  ```

* ![tick](/html/@FB21E167CF5FC78FA9216CD8178453B3/images/emoticons/tick.png "tick") Your Button will now be visible on all pages outside of the Admin panel (custom html isn't applied in the Admin panel)

One Space {#toc-hId--439131239}
-------------------------------

Spaces don't have as easily of a maintainable way of injecting HTML. Instead, we are presented with ++Layouts++ , which we can leverage for this usage. You ++may++ have to reapply changes to this when you upgrade, as custom layouts are not supported!

* As a Project Administrator, configure your Issue Collector and set it to use a custom trigger. You will use the code it provides in the ++Layout++ section in your Space Administration area of Confluence.
* As a Space Administrator, click **Space Tools** , and select **Look and Feel**.
* Select the ++Layouts++ tab.
* Click **Create Custom** under the **Main Layout**
* It's important to remember, we have access to all the same areas as before. We need to input our code to append a button at the end of head, and code with the javascript function at the end of body.
* Look for the `</head>` tag. Please note that I specifically noted the END HEAD tag. This is where our button code belongs --

  ```
  <script>AJS.toInit(function(){    AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');});</script>
  ```

* Look for the `</body>` tag. Please note, again, this is the END BODY tag. This is where our javascript function belongs --

  ```
  <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script><script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {	"triggerFunction": function(showCollectorDialog) {		//Requires that jQuery is available!        //Use whatever ID you used on your Button/Trigger        //In this case, I used id="myIssueTrigger" in the Button/<a> element        //So I must use #myIssueTrigger here		jQuery("#myIssueTrigger").click(function(e) {			e.preventDefault();			showCollectorDialog();		});	}};</script>
  ```

* Press **Save**
* ![tick](/html/@FB21E167CF5FC78FA9216CD8178453B3/images/emoticons/tick.png "tick") Your Button will now be visible on all pages within the Space

One Page {#toc-hId-448372442}
-----------------------------

We must use the `{html}` macro. This is not enabled by default and must be enabled under Add-Ons.

* As a User, edit a page.
* Add all the code into one macro.

  ```
  {html}    <script>    AJS.toInit(function(){    AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');    });    </script>    <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script>    <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {	    "triggerFunction": function(showCollectorDialog) {		//Requires that jQuery is available!        //Use whatever ID you used on your Button/Trigger        //In this case, I used id="myIssueTrigger" in the Button/<a> element        //So I must use #myIssueTrigger here		    jQuery("#myIssueTrigger").click(function(e) {			e.preventDefault();			showCollectorDialog();		});	}};</script>{html}
  ```

* ![tick](/html/@FB21E167CF5FC78FA9216CD8178453B3/images/emoticons/tick.png "tick") Your Button will now be visible on the one page.

comments: author: Dan Steffen
body: thanks for you detailed reply that helps me a lot and your explanation for the definition of a trigger in the whole confluence and one space works for me just fine.But I couldn't define a Trigger for just one page, maybe I used the wrong HTML-Macro-Plugin? I try it with the Confluence HTML Macros-Addon but this create a HTML-"Frame" in my Article and i don't find out how to use the {html}-Tags or there are just to define which part I need to copy?


author: Steven F Behnke
body: Dan, let me know if you're still having issues here. I never saw this comment.


author: Stan Ry
body: Howdy,

Thanks for the detailed description of customizing trigger button for the Jira Issue Plugin.

I am trying to place the button inside the likes section (the #likes-section ID). I am doing it like this:

```

<script>
setTimeout(function(){
 $('#likes-and-labels-container').append('<div id="feedback-section" style="margin-top: 25px;"><a href="#" id="myIssueTrigger" class="aui-button aui-button-primary">Leave a feedback</a></div>');
},80);
</script>

<script type="text/javascript" src="https://example.net/jira/s/9513b004b8a6dcfc358427f3364b533d-T/-786kzr/
76010/be09033ea7858348cd8d5cdeb793189a/2.0.27/_/download/batch/
com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/
com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?
locale=en-US&collectorId=630a5ef8"></script>

<script type="text/javascript">
 window.ATL_JQ_PAGE_PROPS = {
 "triggerFunction": function(showCollectorDialog) {
 jQuery("#myIssueTrigger").click(function(e) {
 e.preventDefault();
 showCollectorDialog();
 });
 }};
</script>
```

However, this way the **Leave a feedback**button does not appear all the time. It seem that in some cases the button gets hidden by the commentary section.

In my theory (which, however, doesn't prove itself) the page should look like this:

![chrome_2019-01-17_17-08-04.png](https://community.atlassian.com/t5/image/serverpage/image-id/42755i5C914E97C5EE6FD9/image-size/large?v=v2&px=999 "chrome_2019-01-17_17-08-04.png")

Most of the times, the page renders without the **Leave a feedback**button:

![chrome_2019-01-17_17-08-23.png](https://community.atlassian.com/t5/image/serverpage/image-id/42756iC4E9890105761FC7/image-size/large?v=v2&px=999 "chrome_2019-01-17_17-08-23.png")

Could somebody please hint on how this could be fixed?

Thank you.


author: Sachin Ramaprasad
body: [@Steven F Behnke](/t5/user/viewprofilepage/user-id/781476) , I'm trying to use this on a single page. I followed exactly as you stated above , but the result on the page what i'm getting is just this --\> {html} {html} I don't see any button. Can you tell me how to exactly configure this for just on a singe page ?

comments: author: Steven F Behnke
body: Please consider opening NEW questions. This original question is now three years old.

To answer your question -- Enabling the HTML Macro (which requires **System Administrator** permissions) is REQUIRED before the Macro approach can be utilized. This is implied in the opening question --
> I **enabled the HTML-Macro in confluence** and a simple console.log works but the Dialog don't open.


author: Janakiraman S
body: Hi Steven,

I followed the input you have shared for adding a button into a Space existing in Confluence v5.10.8. When I save the layout, the Issue Collector works for few clicks. But later, i get a deprecated method warning in the JS (in IE, Chrome \& FF) and the Issue collector stops functioning. Any ideas for a fix is welcome.

Best Regards,

Janaki.


author: Steven F Behnke
body: Open a new question, @mention me, and include the actual text in the error.


author: Jeremy Schrecengost
body: @Steven Behnke I am looking to add an Issue Collector to my Confluence Page (single page), I am running Confluence 3.5.11 and JIRA 6.3.12.

The issue collector is set up for custom and I went to my confluence page and inserted the HTML macro you pasted above (replacing my url for src)

```
{html}    &lt;script&gt;    AJS.toInit(function(){    AJS.$('.aui-header-primary .aui-nav').append('&lt;li&gt;&lt;a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink"&gt;Bug Report&lt;/a&gt;&lt;/li&gt;');    });    &lt;/script&gt;     &lt;script type="text/javascript" src="http://jira/s/0c13895773c11edccb53ae66c985466f-T/en_US83oybm/6343/12/1.4.16/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js&amp;collectorId=8f47a897"&gt;&lt;/script&gt;    &lt;script type="text/javascript"&gt;window.ATL_JQ_PAGE_PROPS = {        "triggerFunction": function(showCollectorDialog) {        //Requires that jQuery is available!        //Use whatever ID you used on your Button/Trigger        //In this case, I used id="myIssueTrigger" in the Button/&lt;a&gt; element        //So I must use #myIssueTrigger here            jQuery("#myIssueTrigger").click(function(e) {            e.preventDefault();            showCollectorDialog();        });    }};&lt;/script&gt;{html}
```

After I save I see nothing on the page that is different. I have attached a photo (I had to color out the tree for this page on the left and our logo) but I am not sure where I should see this button.

I have tried using the method described in the wiki from Atlassian and I did not see the button either.

comments: author: Steven F Behnke
body: Howdy! Could you ask a separate question? Feel free to mention me there too. I'd be more than willing to help but we're going to spam all previous people on this Question if we talk here.

**Edit:** The new question was asked here: <https://community.atlassian.com/t5/Confluence-questions/Issue-Collector-button-is-not-appearing/qaq-p/374701>


author: Dan Steffen
body: I create a new namespace with the purpose when the user visited the startsite of this namespace and only this namespace the issue collector should show up.

comments: author: Steven F Behnke
body: Okay. It's late here but I'll write up something more clear in the morning unless someone beats me to it.


author: Dan Steffen
body: can I hope you write something in the following days?


author: Dan Steffen
body: I thanks for your reply I use a HTML Macro of confluence and put now at the end of the Startside and I get in the console the message: "iframe created" but the Issue Collector don't show up. And at the moment I have no idea why i don't work, maybe you could me help again? I would be very thanksful

comments: author: Steven F Behnke
body: Okay, before I give a more detailed answer, I want to know what we're _really_ trying to do.Are you trying to get this to show up on \*certain pages\* or \*all pages\*?


author: Steven F Behnke
body: In Custom HTML, I specifically put the "button" in AT THE END OF HEAD and I put the "script" in AT THE END OF BODY.


author: Steven F Behnke
body: Where'd you put this? I just added one successfully using Confluence 5.4.4 and JIRA 6.4.3.


Tags: confluence-administration