Panels

    Suggestions will appear below the field as you type

    Panels

      Suggestions will appear below the field as you type

      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:

      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.

      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:
      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:
      1. The panel loads and executes the getAuthToken function passed to it.
      2. Your frontend requests a browser token from your backend.
      3. Your backend authenticates and authorises the user.
      4. Your backend requests a browser token from the SEEK API for the appropriate hirer ID and 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/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:
      TypeScript
      Copy
      SeekApi.render(containerNode, panelName, {
        locale: 'id-ID',
      });
      See our general content localisation documentation for more information.