Using the Jira Issue Collector as an application form on your website

Jira Service Management (also known as Jira Service Desk) is one of the most comprehensive and widely used ITSM tools. Whether it's internal requests to IT departments or external requests for help, Jira Service Management (JSM) not only gets your team involved immediately and directly, but the people making the requests also get immediate feedback. Such requests are usually created with the Issue Collector and or dedicated service desk portals.

A typical use case of JSM can be found in IT related areas in companies, e.g. when employees discover a software bug, they can directly raise a ticket via JSM, which can then be processed by the IT or development team. Working with Jira tickets is an essential component of successful, agile working methods and is indispensable in many modern tech companies today.

But it's not just tech companies that can use JSM for their processes and workflows, and they don't have to limit themselves to IT requests either. Jira Service Management offers almost endless possibilities to accelerate your business. In our blog post Fast and efficient application processes with Jira we already presented our solution on how to use JSM for applicant management. In this second part, we will show you how to not only receive applications via an email inbox linked to a Jira project which converts them into Jira tickets, but also how to use the issue collector to achieve the same result. 

What is an Issue Collector?

With a so called Issue Collector, a Jira feedback form can be embedded on your own websites. By clicking on the corresponding trigger - which has to be defined and can be a call-to-action, a button, an image etc. - this form can be opened and after filling it out, a Jira ticket (also called issue) can be easily created. The fields of the form can be customized and request essential information, e.g. the applicant's cover letter as a text field, their email address for notifications and communication, file attachments for resumes, job references, etc. 

Why does an issue collector make sense?

As explained in the first part of the blog series, an email inbox can be set up and linked to your Jira project fairly easily. All emails that are sent to the configured inbox automatically create a Jira issue that contains all the information and attachments from the email. However, the email inbox may not only receive relevant emails or applications, but also requests from external headhunters or marketing emails. These are then also created as issues in the JSM project and have to be filtered out, which can be cumbersome. 

In addition, you may want to invite your applicants to apply directly on the homepage and not use a cumbersome job portal or applications via email. With an issue collector triggered by a button click, the web layout is not disturbed and applicants are not redirected to other pages.

It's easiest to understand by looking at any Job on our career page: xalt.de/en/jobsIn our single job posts, you will quickly see what we are talking about. For example, scroll down on this page until you see the button "Apply directly" and click on it. Don't worry, an application will not be sent to us immediately. Once you click the button, a popup will open which contains the Issue Collector of Jira Service Management.

And how do you set up the Issue Collector?

Step one: Creating the Issue Collector

• Select the Jira project for which you want to enable ticket creation via the Issue Collector.
• Navigate to the Project settings and scroll down until you see the Issue Collector field:

• Once there, create a new Issue Collector. 

Step two: Setting everything up

• In the next window, the name and description of the issue collector can be added and you can set the default reporter for tickets. In this case, the option "Attempt to match submitter email address" can be selected, if the email specified in the issue collector matches a user in their Jira instance, this person will automatically be set as the "reporter" of the ticket. 
• If external users (e.g. applicants or anyone who doesn't already have an account in your Jira directory) should automatically be set as the reporters of the created ticket, groovy scripts and postfunctions have to be created, which will be explained in-depth in a future blog post. If this feature is already needed, feel free to contact us and we'll be happy to help you out.

• Back to the Issue Collector: In this window the Trigger can be defined and a preview of the form can be viewed. 
• To do this, first click on "Custom trigger".

• Now click on "Custom" under "Issue collector form". Here you can now define the fields of the application form.
• For our example, we decided to use a simple application form. The field "Position" is the title of the ticket created, so that our HR manager knows immediately to which position the application is addressed.

• When you are done, save the Issue Collector and you will be taken to the next window.

How do I integrate the Issue Collector on websites (HTML or Javascript)?

Step Three: The HTML snippet

• On this page you get the HTML-snippet, or Javascript needed for the embedding. Copy the code into the clipboard or into a text editor.

• The next step is to define the custom trigger, i.e. how the issue collector can be opened by applicants. We settled for a simple call to action button, but any element on a website can be set as a trigger, e.g. also images or similar.

Step four: Embedding the Issue Collector on the website

• For our job posts we use WordPress Elementorbut you can use any website builder as long as you can edit the HTML code of the page. If you do not have access, it is best to ask the people who manage your website for help.
• First, give the button an ID, for example "apply" like in the screenshot.

• Then add a custom HTML widget to the page in which the previously copied HTML code from Jira is pasted.

• Search the code for "#myCustomTrigger" and replace this with the button ID, in this case "#apply".
• Once the code is embedded, click "save" and the Issue Collector is ready to go

Step Five: Testing

• The issue collector is now embedded and can be opened by clicking on the call to action "Apply directly". To support the display for mobile devices, only one more small adjustment needs to be made.
• To do this, switch from the "Content" window of the HTML widget to "Advanced" and navigate to the "Custom CSS" field.

• Add the following code as shown in the screenshot, so that the issue collector window scales correctly on mobile devices as well

#atlwdg-container {
    width: calc(100vw - 40px);
    max-width: 810px;
}
@media (max-width: 480px) {
    #atlwdg-container {
        width: 100vw;

        }
}

Bonus: Embedding on Confluence pages

Alternatively, you can use the Issue Collector directly on Confluence pages .

• First add the macro "HTML" by searching for HTML under "other macros". 

• In the HTML macro, you'll only need to paste the code which you copied from the Issue Collector earlier.
• To open the form with a simple button click, add the following code line directly below the Issue Collector script:
• <input type=“button“ style=“color:green“ id=“myCustomTrigger“ class=“button“ value=“Klick mich“ />

• After the Confluence page is updated, the following button appears, which opens the issue collector after a click. This way, a Jira ticket can be created directly in a Confluence page immediately and without detours. 

Summary & Outlook

Done! Now the application form is embedded in the form of a Jira issue collector on your website or Confluence and applicants can apply immediately with a Jira ticket. Of course, it is possible to use an issue collector for other purposes than applications. You could also add a button to certain Confluence pages or templates to create Jira tickets directly in meeting notes. Or you could add an issue collector to Confluence pages that you use for onboarding new team members, so they can easily give feedback or create support tickets. 

If you'd like to learn more about using Jira and Confluence to set up HR and Recruiting processes in an organization, feel free to check out our blog post.

If you need more detailed information, we would be happy to talk to you at any time, completely free of charge and without obligation. As an Atlassian Gold Solution Partner, we are also happy to advise you on further solutions. On our Atlassian Services page you can learn more about our approach and methodology.