Job Panels

This article describes what job panels are and how to use the panels API with Talent App Store.

What are job panels

Talent App Store provides APIs for your app to serve a page within your app that can be displayed inside another app, such as an ATS. This allows users to interact with your app without leaving the ATS.

For instance,

A job board would want their users to post jobs to the job board directly from the panel inside the ATS
A job ad scoring platform would want to provide the score overview right beside the job
A careers site app may want to provide a chart showing job ad performance such as prints and clicks

In general, this approach will allow you to augment the ATS with information from your own system to provide to the user in the right context.

A representation of an ATS with a job panel highlighted on the screen.

Implementing the APIs

In a nutshell, when a user visits a job inside the ATS, the ATS will ask Talent App Store if there are any apps that produce a panel that needs to be displayed on that job, in which case the URL to your panel will be provided to the ATS.

Consumed APIs

These are APIs that your app consumes (or uses) to obtain information from other apps.

Method

API

SoT (Source of Truth)

GET

/jobs/byId/{job}

Yes

Produced APIs

These are APIs that your app exposes for other apps to consume them.

Method

API

SoT (Source of Truth)

GET

/panels/toUser/me/jobs/{job}/byApp

GET /panels/toUser/me/jobs/{job}/byApp

Get a panel (purpose-specific small, ebeddable web page) from a single app.

If the panel changes its size, it can trigger a resize of the iframe in the containing via a postMessage call, passing the verb "resize" and the new width and height.

-- CODE language-json --
{
"uri": "https://yourapp.com/path-to-your-panel"
}

Look and feel

Talent App Store requires that all panels implemented using this API will follow the same styling guidelines, so that the user experience would be as consistent as possible when interacting with different apps.

An overview of a job panel with arrows pointing to the main design elements.

The font Inter is available on Google Fonts.

Panel

Element

Styles

Panel header

The top bar of the panel used to host the panel title and optionally some quick actions

background-color: #E7EDF2;
padding: 20px 15px;

Panel title

This is typically the name of your app, or something relevant to the user to relate the panel with your app

font-family: Inter;
‍color: #2B304C;
‍font-size: 20px;
‍font-weight: 700;

Panel body

The panel main container

background-color: #F6F8FA;
‍padding: 20px;

Text

Default style for any text in the panel

font-family: Inter;
color: #2B304C;
font-size: 16px;

Secondary text

Used to emphasise a particular paragraph or to add a footnote

font-family: Inter;
color: #555BDA;
font-size: 16px;
font-style: italic;

Links

Any links in the panel

font-family: Inter;
color: #555BDA;
font-size: 16px;

Buttons

Element

Styles

Panel header button

Actions that are global e.g. settings can be placed inside the panel header

font-family: Inter;
color: white;
background-color: #63A375;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
border-radius: 3px;

Primary button

Buttons that perform main or positive actions e.g. 'Save'

font-family: Inter;
font-size: 12px;
font-weight: 700;
color: white;
background-color: #555BDA;
border-radius: 6px;
padding: 12px 20px;

Secondary button

Buttons that perform secondary or neutral actions e.g. 'Cancel' or 'View'

font-family: Inter;
font-size: 12px;
font-weight: 700;
color: #555BDA;
background-color: transparent;
border: 1px solid #555BDA;
border-radius: 6px;
padding: 12px 20px;

Disabled button

When users need to be made aware that an action is possible but that is not available for some reason. If users don't need to be made aware of the action then is best to not show the button at all.

font-family: Inter;
font-size: 12px;
font-style: italic;
font-weight: 400;
color: #5A5E7D;
background-color: #E4EAF0;
border-radius: 6px;
padding: 12px 20px;

Negative button

Buttons that perform a 'negative' action such as delete.

font-family: Inter;
font-size: 12px;
font-weight: 700;
color: white;
background-color: #EA4056;
border-radius: 6px;
padding: 12px 20px;

Messages

Element

Styles

Info message

Informational messages to make users aware of a situation or general behaviour of your integration

Font-family: Inter;
Font-size: 14px;
Color: #296FA8;
Background-color: #EFF5FB;
Border: 1px dashed #7BA9CF;
border-radius: 3px;

Warning message

Messages informing the user of a potential unintended consequence of a particular action or situation

font-family: Inter;
font-size: 14px;
color: #946C00;
background-color: #FFFAEB;
border: 1px dashed #D3B870;
border-radius: 3px;

Error message

Messages informing the user of an error or the negative result of an action.

font-family: Inter;
font-size: 14px;
color: #CC0F35;
background-color: #FEECF0;
border: 1px dashed #DD788C;
border-radius: 3px;

Success message

Messages informing the user of the successful result of an action.

font-family: Inter;
font-size: 14px;
color: #257953;
background-color: #EFFAF5;
border: 1px dashed #63A375;
border-radius: 3px;

Responsiveness

The design of your panel should be responsive and cover a good range of screen resolutions, from desktop to mobile.

On one hand, an ATS software that embeds your panel directly in its UI, your panel will be competing for real estate on the screen with other apps and ATS information. This means that it is likely that for users with small screen resolutions your panel will be resized to fit the space.

On the other hand, an ATS or ATS configuration where iFrames are not allowed or supported, your panel might need to be loaded on a full page, following the link provided by your produced API. This means that your panel will be loaded on full-wide screen.