...
Get Issue collector HTML embed code from Project settings → Issue collectors
Make sure that you select Custom option as trigger.
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:
Code Block | ||
---|---|---|
| ||
<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):
Html live preview | ||
---|---|---|
| ||
{"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 -->"} |