Docs Web components Panels

Panels

The SEEK API includes panels that can be embedded in web-based software. These JavaScript components provide an alternative to building features from scratch; for example, you can embed the Ad Selection Panel instead of implementing ad selection via GraphQL.Where the SEEK API provides a panel implementation, we strongly recommend using it for your integration. It will significantly reduce development time and ongoing maintenance, as well as provide an up-to-date user experience for SEEK hirers.Our panels share a standardised entry point, interface and browser support policy for ease of integration. The common process of embedding a panel is outlined below, and you can refer to the specific documentation of each panel for more information:

Our panels do not use <iframe>s .

Include the panel

Add the following script tag to the page where you want to insert a panel:

HTML

Copy

<script

  type="text/javascript"

  src="https://integration.seek.com/panels/SeekApi.js"

></script>

This will expose a SeekApi.render function which renders an instance of a panel within a specified DOM element.If you need to conditionally load the script, you can use the following code:

JavaScript

Copy

const script = document.createElement('script');

script.async = true;

script.src = 'https://integration.seek.com/panels/SeekApi.js';

script.type = 'text/javascript';

document.body.appendChild(script);

Avoid using frameworks that manage adding the script tag for you, as they may not load the script correctly and interfere with the panel’s functionality.

Render the panel

The render function must be called on page load and whenever dynamic props change. For example, if you have included the Ad Selection Panel and the hirer changes the position’s location, you must re-render the panel to reflect updated pricing.

JavaScript

Copy

SeekApi.render(containerNode, panelName, props);

Handle browser token requests

The getAuthToken function must be supplied via props:

JavaScript

Copy

getAuthToken: async () => {

  // Do not implement caching in your `getAuthToken` implementation.

  // The panel will internally memoise the response.

  const token = await fetchAuthToken();

  return token;

},

Your software should implement the following auth flow:

The panel loads and invokes the getAuthToken function passed to it.
Your frontend requests a browser token from your backend.The getAuthToken function should request a new token for the appropriate hirer ID. If a user switches to a different SEEK hirer account or a job ad from another SEEK hirer account, your software should ensure that subsequent invocations of getAuthToken will request a token for the new hirer ID before re-rendering the panel.
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.
Your backend requests a browser token from the SEEK API for the appropriate hirer ID and scope.
Your backend responds with the browser token.
Your frontend returns the browser token from the getAuthToken function.
The panel can now make requests to the GraphQL endpoint.

HTTP

Copy

POST https://graphql.seek.com/auth/token HTTP/1.1

Authorization: Bearer PARTNER_TOKEN_HERE

Content-Type: application/json

User-Agent: YourPartnerService/1.2.3

  "hirerId": "seekAnzPublicTest:organization:seek:93WyyF1h",

  "scope": "query:ad-products query:organizations",

  "userId": "317665"

Localise the panel

By default, the panel will infer the preferred locale of the user from their web browser.The SEEK API supports a limited set of languages at this time and falls back to Australian English when preferred locales are not available. The panel may serve mixed language content where translations are partially available.If your software manages the user locale in a different manner, such as including it in a URL segment like /en-AU/content, you may use the locale prop to force a specific preference:

JavaScript

Copy

SeekApi.render(containerNode, panelName, {

  locale: 'id-ID'

});

See our general content localisation documentation for more information.

Common problems

Do not include the SeekApi.js script as part of your application’s build process. It must be included as a standalone script tag in your HTML page, downloaded from SEEK at runtime.
Avoid using frameworks to wrap loading the SeekApi.js script if you encounter issues. Some frameworks may not load the script correctly. The script tag should be included directly in the HTML page where you want to insert a panel.
If your software allows users to switch between different SEEK hirer accounts or job ads in a single view, incorrect handling of browser tokens may cause users to be shown an authorization error. Ensure that your software’s getAuthToken function requests a browser token for the appropriate hirer ID each time. For example:
- The user views a panel relating to positionProfileId A, posted through hirer A
  Your software calls render to display the panel
  Your software’s getAuthToken function is invoked, and must return a browser token for hirer A
- The user changes their selection to positionProfile B, posted through hirer B
  Your software calls render to refresh the panel’s view
  Your software’s getAuthToken function is invoked, and must return a browser token for hirer B

Troubleshooting

Our panels are designed with the hirer in mind. When something goes wrong, they do not render technical troubleshooting information as part of the UI. Instead, they prompt the hirer to contact their recruitment software provider or SEEK.Firstly, ensure that the panel JavaScript has correctly loaded by viewing the successful network request to https://integration.seek.com/panels/SeekApi.js in your browser’s developer tools . If it has not loaded, check for common problems.To troubleshoot a problem with a panel, open the developer tools in your web browser and try the following:

View logs and errors in your browser consoleOur panels generally output technical troubleshooting information to the console.
View HTTP requests and responses in the Network tabOur panels communicate with our GraphQL server, so you can follow the same guidance on GraphQL error responses.We recommend using the GraphQL Network Inspector browser extension to help debug GraphQL requests and responses. This tool provides a user-friendly view of the GraphQL operations and allows you to distinguish between successful and error responses more easily.
Run window.SEEK_PANEL_DEBUG = true in your browser consoleThis will enable additional logging in the panel. The panel will then log its props every time SeekApi.render is called with valid props. This may help you identify issues with unexpected behaviour or missing props.

If you are unable to resolve the issue independently, include the console logs when escalating to your SEEK contact.

Getting started: Web components

Web components: Browser support