Docs  Candidate Profiles  Display panel
  • No results found

Display the Candidate Profile Panel

The Candidate Profile Panel allows hirers to view a candidate’s SEEK Profile in flow. It should be shown when a hirer clicks the View SEEK Profile link, and may be displayed in a tab or drawer.

Before you begin

Ensure that you have reviewed the initial setup for Candidate Profiles.Review the placement guidelines for the other components that make up this feature.

Panel placement

The Candidate Profile Panel is built to be responsive and can accommodate placement at various widths.Consider the context in which the Candidate Profile Panel will be displayed. Generally, there are two:
  1. Candidate or applicant list: in this context, the panel can be displayed in a drawer.
  2. Candidate details: in this context, the panel can be displayed in a tab, drawer or its own page.
Ultimately, the panel should be displayed in a way that is consistent with the existing UX patterns in your software.

Step 1: Include the panel

Add the following script tag to the page where the Candidate Profile Panel will be displayed:
HTML
Copy
<script
  type="text/javascript"
  src="https://integration.seek.com/panels/SeekApi.js"
></script>

Step 2: Render the panel

The SeekApi.render function renders an instance of the panel in the specified DOM element.
JavaScript
Copy
SeekApi.render(containerNode, 'candidateProfile', props);
  • containerNode: The DOM element to render the panel into.
  • 'candidateProfile': The name of the panel to render.
  • props: Props for rendering the panel.

Props

Prop
Type
Description
getAuthToken
() => Promise<string>
Function to call to retrieve the browser token to use when calling the SEEK API.
candidate
object
The details of the candidate to view the profile of. This includes: email (string).
hirerId
string
The SEEK hirer ID viewing the candidate profile.
context
stringoptional
The context in which the candidate profile is being viewed. Supported values are APPLICANT_LIST and CANDIDATE_DATABASE.
position
objectoptional
In the APPLICANT_LIST context, provide the details of the job the candidate is applying for.
applicationStatus
objectoptional
In the APPLICANT_LIST context, provide the status of the candidate’s application.
locale
stringoptional
Specifies the locale to display content in, e.g. en-AU. Supported locales are outlined in the content localisation documentation.

Step 3: Handle browser token requests

  1. The panel loads and invokes the getAuthToken function passed to it.
  2. Your frontend requests a browser token from your backend.The getAuthToken function should request a new token for the hirer ID in positionProfile.positionOrganizations. If a user switches to a different SEEK hirer account, your software should re-render the panel with the new hirer ID in positionProfile.positionOrganizations, and ensure that subsequent invocations of getAuthToken will request a token for the new hirer ID.
  3. Your backend authenticates and authorizes the user.Your software is responsible for verifying that the user is authorized to access a given hirer ID. A user must not be able to request a browser token for an arbitrary organization that they do not belong to.
  4. Your backend requests a browser token from the SEEK API for the appropriate hirer ID and query:seek-candidate-profiles scope.
  5. Your backend responds with the browser token.
  6. Your frontend returns the browser token from the getAuthToken function.
  7. The panel can now make requests to the GraphQL endpoint.
HTTP
Copy
POST https://graphql.seek.com/auth/token HTTP/2
Authorization: Bearer PARTNER_TOKEN_HERE
Content-Type: application/json
User-Agent: YourPartnerService/1.2.3
{
  "hirerId": "seekAnzPublicTest:organization:seek:93WyyF1h",
  "scope": "query:seek-candidate-profiles",
  "userId": "317665"
}
Candidate Profiles: Display candidate summary and actions
Use cases: Selection Signals