The Ad Selection Panel tracks our standard browser support policy.
Add the following script tag to the page where you want to insert the Ad Selection 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 the properties of the
positionProfile
object change.
For example, if the hirer selects a new location, you must re-render the panel to reflect updated products and pricing.JavaScript
Copy
SeekApi.render(containerNode, 'adSelection', props);
Modifying the
containerNode
or its children after the render
function has been called may lead to unexpected behaviour.Prop | Type | Description |
---|---|---|
getAuthToken | () => Promise<string> | Function to retrieve a browser token for the SEEK API |
onChange | (event) => void | |
sellingPointsDisplay | bullet | tooltip default: bullet | How the panel should display selling points of each product |
positionProfile | object | |
selectedAdvertisementProductId | string optional | The product ID stored in a job ad draft |
showFormValidationError | boolean default: false | Whether the panel should display a validation error when there is no selected product |
locale | string optional | Specifies the locale to display content in e.g., en-AU . Set this prop to override the default localisation behaviour based on users browser preferences. Supported locales are outlined in the content localisation documentation. |
JavaScript
Copy
SeekApi.render(document.getElementById('seekPanelContainer'), 'adSelection', {
getAuthToken: async () => {
// Do not implement caching in your `getAuthToken` implementation.
// The panel will internally memoise the response.
const token = await fetchAuthToken();
return token;
},
onChange: (event) => {
const { selectedProduct } = event;
// Persist `selectedProduct.id` in memory for use in job posting mutations.
// Display form inputs for features supported by the selected product.
if (selectedProduct?.features.branding) {
// Show brand selection.
} else {
// Hide brand selection.
}
if (selectedProduct?.features.searchBulletPoints) {
// Show the number of bullet point input fields indicated by `limit`.
} else {
// Hide all bullet point input fields.
}
},
sellingPointsDisplay: 'bullet',
positionProfile: {
// Ad products and their pricing vary based on these classifiers.
jobCategories: 'seekAnzPublicTest:jobCategory:seek:27HXTkNXh',
positionLocation: 'seekAnzPublicTest:location:seek:W7NggeKH',
positionOrganizations: 'seekAnzPublicTest:organization:seek:93WyyF1h',
positionTitle: 'Software Engineer',
// Salary details let us indicate how each ad product is likely to perform.
offeredRemunerationPackage: {
basisCode: 'Salaried',
descriptions: ['Up to $70,000 per year + bonus'],
ranges: [
{
intervalCode: 'Year',
minimumAmount: { currency: 'AUD', value: 40000 },
maximumAmount: { currency: 'AUD', value: 70000 },
},
],
},
seekAnzWorkTypeCode: 'FullTime',
// The position profile ID should be provided when editing a job ad.
profileId: undefined,
},
// The product ID stored in a job ad draft.
selectedAdvertisementProductId: undefined,
// Set this to true if the hirer tries to post the job ad before they have
// selected an ad product (i.e. no `selectedProduct.id` persisted in memory).
showFormValidationError: false,
});
- The panel loads and executes the
getAuthToken
function passed to it. - Your frontend requests a browser token from your backend.
- Your backend authenticates and authorises the user.
- Your backend requests a browser token from the SEEK API for the appropriate hirer ID and
query:ad-products query:organizations
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"
}
When a hirer selects an ad product, the
onChange
callback you provided within your props will be invoked with the below parameters.Property | Type | Description |
---|---|---|
selectedProduct | object | null | |
selectedProduct.id | string | The selected product ID to persist in memory for posting, previewing or updating the job ad |
selectedProduct.label | string | The selected ad product label, this should only be used for display purposes |
selectedProduct.features | object | The features available for the selected ad product |
selectedProduct.features.branding | object | null | Whether the ad product supports branding |
selectedProduct.features.branding.logoIndicator | boolean | Whether the logo of the brand will be displayed on the job ad |
selectedProduct.features.branding.coverImageIndicator | boolean | Whether the cover image of the brand will be displayed on the job ad |
selectedProduct.features.searchBulletPoints | object | null | Whether the ad product supports search bullet points |
selectedProduct.features.searchBulletPoints.limit | number | The number of bullet point input fields to display in your posting workflow |
selectedProduct.price | object | null | The price of the ad product, this should only be used if your software supports budgeting |
selectedProduct.price.summary | object | null | The human readable pricing summary of the ad product |
selectedProduct.price.currency | object | null | The three-letter ISO 4217 currency code of the ad product price |
selectedProduct.price.value | object | null | The ad product price in the minor unit of the currency, excluding tax |
When a hirer selects an ad product, your software should conditionally display form inputs for the additional job ad features it enables.
The available features are passed to the
onChange
callback.See features for ad products for a detailed walkthrough.
When the hirer is ready to post or update the job ad,
provide the
selectedProduct.id
persisted above in the posting instruction seekAdvertisementProductId
field on the postPosition
, postPositionProfileForOpening
or updatePostedPositionProfile
job posting mutations.When a hirer submits a job posting form in your software,
toggle the
showFormValidationError
prop to true
.
The panel will display a validation error if an ad product has not yet been selected.