Using Jira Issue Collector as an application form on your website

Embed Jira Issue Collector on website

Share

Share on facebook
Share on linkedin
Share on twitter
Share on email

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. These requests are usually created with the Issue Collector and can usually be found on service desk pages.

The classic application area of JSM are IT areas in companies, e.g. when employees discover a software bug, they can directly create a ticket via JSM, which can then be processed by their IT or developer 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. Jira Service Management offers almost endless possibilities to accelerate your business. In our blog post Fast and efficient application processes with Jira we presented our solution how to use JSM for applicant management. In this second part, we will show how to not only receive applications via email inbox linked to a Jira project and convert them into Jira tickets, but also how to use the issue collector

What is an Issue Collector?

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

Why does an issue collector make sense?

As explained in the first part of the blog series, a simple email inbox can be set up and linked to your Jira project. All emails that arrive in the mailbox 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 must be filtered out. 

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

Look best directly on xalt.com/jobs after. In our job posts you will quickly see what we are talking about. Just scroll to this page down until you see the button "Apply directly" and click on it. Don't worry, an application will not be sent to us immediately. Afterwards, a popup will open which contains the Issue Collector of Jira Service Management.

And how do you set up the Issue Collector?

Step one: Creation

  • Select the Jira project for which you want to create tickets via the Issue Collector.
  • Navigate to the Project settings and scroll down until you see the Issue Collector field:
Jira Issue Collector
Jira menu
  • Once there, create a new Issue Collector. 

Step two: Institution

  • In the next window, the name and description of the issue collector can be added and set who should be the default reporter. 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) should be automatically registered as reporters of the created ticket, groovy scripts and postfunctions have to be created, which will be explained in a future blog post. If this feature is already needed, feel free to contact us and we'll be happy to help.
Jira Issue Collector
  • Back to the Issue Collector: In this window the Trigger or triggers can be defined and a preview of the form can be viewed. 
  • To do this, first click on "Custom trigger".
Issue Collector Configuration in Jira
  • 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.
Jira Issue collector preview
Preview: Jira Form
  • When you are done, save the Issue Collector and you will be taken to the next window.

How to integrate the Issue Collector into websites (HTML or Javascript)?

Step Three: 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.
HTML Snippet for Jira Issue Collector
Jira Issue Collector
  • The next step is to define the custom trigger, i.e. how the issue collector can be opened by applicants. We decided on 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: Embed 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
  • First give the button an ID, for example "apply" as in the screenshot.
Wordpress integration with HTML snippet
WordPress button
  • Then add a custom HTML widget to the page in which the previously copied HTML code from Jira is pasted.
Jira Issue Collector HTML Snippet in Elementor
HTML Widget Configuration in WordPress
  • Search in 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 embedded and can be opened by clicking on the call to action "Apply directly". To support the display for mobile devices, only a 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.
Wordpress Button Modal
Linking the button to the pop-up modal in Elementor
  • 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 in Confluence pages be embedded.

  • First add the macro "HTML" by searching for HTML under "other macros". 
  • In the HTML macro, you only need to paste the code copied from the Issue Collector.
  • To open the form with a simple button click, add the following code line directly below the Issue Collector script:
HTML Macro Confluence
HTML Macro in Confluence
  • After the Confluence page is updated, the following button appears, which opens the issue collector after a click. Thus, a Jira ticket can be created directly in a Confluence page immediately and without detours. 

Summary & Outlook

Done! With this, the application form is embedded in the form of a Jira issue collector on your website or Confluence and applicants can immediately apply 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.

Subscribe To Our Newsletter

Get updates and learn from the best

More Blog Posts

Human Resource Management mit Jira
XALT News

So managst du Human Resources mit Jira

Es gibt unzählige Tools zum Managen von Human Resources. Dabei ist meist wichtig, dass diese einfach implementiert werden und möglichst schnell von allen Mitarbeitern

Quality Assurance Testing with XRAY for Jira
Atlassian

Quality Assurance Testing with Xray and Jira

For an IT company it is especially important to deliver a software product with a high quality. The improvement of software development processes and their automation represents a

Better Call XALT

Our support

Have we piqued your interest? Don't delay - get in touch with us. You can reach us by telephone, email or in our office.

Dr. Veronika Traidl

Veronika Traidl

Tomannweg 3, 81673 Munich

Shopping cart