Page Comparison

...

1. Get Issue collector HTML embed code from Project settings → Issue collectors

   Image RemovedImage Added

   Make sure that you select Custom option as trigger.

2. Add HTML/JS Code to HTML/Iframe Macro

   Code Block
   language js
   <script type="text/javascript" src="https://bitwelt.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/-ucfgv/b/23/a44af77267a987a660377e5c46e0fb64/_/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=a3bb5bbb"></script> <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = { "triggerFunction": function(showCollectorDialog) { //Requires that jQuery is available! jQuery("#myCustomTrigger").click(function(e) { e.preventDefault(); showCollectorDialog(); }); }}; </script>

   Now you need to make minor changes in this code. Add following two lines after line 8.

   Code Block
   language js
   $("#container").height(500); AP.resize(500, 500);

   It resizes parent container when issue collector form is opened. Finally, you need button in the page.

   Code Block
   language html
   <button id="myCustomTrigger" class="aui-button aui-button-primary">Give Feedback</button> <div id="container"></div>

Here is complete code example:

    <script type="text/javascript" src="https://bitwelt.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/-ucfgv/b/23/a44af77267a987a660377e5c46e0fb64/_/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=a3bb5bbb"></script>
   
<script type="text/javascript">
   
window.ATL_JQ_PAGE_PROPS =  {
   
"triggerFunction": function(showCollectorDialog) {
   
    //Requires that jQuery is available! 
   
    jQuery("#myCustomTrigger").click(function(e) {
  
         e.preventDefault();
            showCollectorDialog();
   
        // start custom code
   
        $("#container").height(500);
  
         AP.resize(500, 500);
            // end custom code
  
     });
    }};
   
</script>
   
<!-- button start -->
   
<button id="myCustomTrigger" class="aui-button aui-button-primary">Give Feedback</button>
   
<div id="container"></div>
   
<!-- button end -->

So basically, you need to add above custom code and button in embed code copied from Jira.

See it in action below (this will create ticket in our Jira here):

{"htmlCode":"<script type=\"text/javascript\" src=\"https://bitwelt.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/-ucfgv/b/23/a44af77267a987a660377e5c46e0fb64/_/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=a3bb5bbb\"></script>\n<script type=\"text/javascript\">\nwindow.ATL_JQ_PAGE_PROPS =  {\n\"triggerFunction\": function(showCollectorDialog) {\n    //Requires that jQuery is available! \n    jQuery(\"#myCustomTrigger\").click(function(e) {\n        e.preventDefault();\n        showCollectorDialog();\n        // start custom code\n        $(\"#container\").height(500);\n        AP.resize(500, 500);\n        // end custom code\n    });\n}};\n</script>\n<!-- button start -->\n<button id=\"myCustomTrigger\" class=\"aui-button aui-button-primary\"><strong>Give Feedback</strong></button>\n<div id=\"container\"></div>\n<!-- button end -->"}