Embed Jira Issue Collector Form in Confluence

Owned by Nar Kumar C.
Last updated: May 22, 2020
2 min read

Jira Issue Collector allows users to create Jira tickets without logging in to Jira system. This is useful when you want to collect issues from outside Jira eg. public website, documentation pages etc.

Embed Issue Collector in Confluence

You can embed issue collector form in Confluence page using HTML & Iframe Macro for Confluence. It works because issue collector provides HTML/JS embed code like any other iframe embedding you might already know.

If you are coming from Confluence server, please note that Cloud add-on are rendered inside sandboxed environment. Therefore, HTML macro in Confluence cloud might work a bit differently.

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

    Make sure that you select Custom option as trigger.

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

    <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.

    $("#container").height(500); AP.resize(500, 500);

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

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

Here is complete code example:

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):