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:
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.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);
The
getAuthToken function must be supplied via props:TypeScript
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
getAuthTokenfunction passed to it. - Your frontend requests a browser token from your backend.The
getAuthTokenfunction should request a new token for the hirer ID inpositionProfile.positionOrganizations. If a user switches to a different SEEK hirer account in your posting form, your software should re-render the panel with the new hirer ID inpositionProfile.positionOrganizations, and ensure that subsequent invocations ofgetAuthTokenwill request a token for the new hirer ID. - Your backend authenticates and authorises the user.Your software is responsible for verifying that the user is authorised 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
getAuthTokenfunction. - 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"
}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:TypeScript
Copy
SeekApi.render(containerNode, panelName, {
locale: 'id-ID'
});
See our general content localisation documentation for more information.