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/2

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.

Security considerations

Embedding an external script in your software presents security implications. We strive to ensure that the SEEK API is secure and trustworthy for enterprise integration.Our panels are:

Developed in houseWe have direct control over their development and release processes, and apply a suite of controls to uphold security and reliability. These include continuous integration, secure code review, security scanning, and layered monitoring.The SEEK API is broadly covered under our bug bounty program and in-house penetration testing.
Embedded on the client sideOur panels only operate on browser tokens to avoid the risk of privilege escalation. Your software controls the permissions available to each panel by specifying a hirer ID and scope when generating the browser token. They do not pose additional risk to your server-side runtime environment.The script only needs to be included on pages that surface a panel. Our panels do not interact with other form elements on the page, and do not need to be exposed to pages with privileged actions such as credential or payment management.
Hardened against supply-chain attacksOur panels only include open-source libraries that are required for their function. We apply continuous vulnerability scanning to our supply chain, and enforce preventative measures such as blocking overly new releases that may contain undiscovered flaws.Runtime dependencies are deterministically versioned and bundled at build time. While the script features code splitting to improve performance, the child scripts that it loads derive from the same origin as part of the one built bundle.
Hosted on SEEK domainsContent Security Policy (CSP) is a security feature that helps prevent various types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. We can work with you to define a suitable policy for your context.Our panels predominantly communicate with SEEK domains, enabling your software to implement reasonable connect-src restrictions. One current exception is that our error tracking directly connects to our monitoring provider, but we are exploring proxy options to further minimise this surface area.Hash-based policies and subresource integrity are not supported, as our panels are dynamic by design to obviate the need for partners to deploy changes in lockstep with our release cadence. SRI does not protect your software against subsequent loading of child scripts; we recommend controlling script origins via CSP instead. We will explore signature-based integrity for provenance when it reaches wider browser support.If you require stringent integrity controls, you may implement periodic monitoring of the script for anomalous behaviour, such as accessing more user inputs or making more requests than usual.

Getting started: Web components

Web components: Browser support