<script

  type="text/javascript"

  src="https://seekcdn.com/hirer/indirect-posting/product-selection-panel/seek.js"

></script>

SEEKAdPostingWidget.render(containerNode, options);

SEEKAdPostingWidget.render(document.getElementById('seekWidget1ContainerDiv'), {

  // Unique identifier for the instance.

  instanceId: 'widget1',

  // Mode should be `Create` while posting a new job ad

  // or `Update` while updating a job ad.

  mode: 'Create',

  // Function to call when panel is loaded.

  onInitialLoad: function (event) {

    const { instanceId, isVisible } = event;

    if (isVisible) {

      console.log(`Widget ${instanceId} loaded`);

      // -> Widget widget1 loaded

    }

  },

  // `onChange` will be called each time a hirer selects an ad product.

  // See "Step 4" for more details.

  onChange: function (event) {

    const { advertisement } = event;

    // `typeCode` should be persisted in memory to be used

    //  for job posting mutations.

    const { typeCode, features } = advertisement;

    console.log(`The hirer selected the ${typeCode} ad product`);

    // -> The hirer selected the Premium ad product

    // Your software should use "features" to conditionally display bullet

    // points and branding inputs based on the selected ad product.

    const { brandingIndicator, searchBulletPointsIndicator } = features;

    if (brandingIndicator) {

      // Show brand selector

    } else {

      // Hide brand selector

    }

    if (searchBulletPointsIndicator) {

      // Show fields to enter bullet points

    } else {

      // Hide bullet point fields

    }

  },

  // Function to call to retrieve the browser token to use

  // when calling the SEEK API, see "Step 3" for more details.

  getAuthToken: function () {

    return Promise.resolve('browser token');

  },

  // `draftAdvertisement` should contain all of the hirer’s

  // current inputs if they are posting or updating.

  draftAdvertisement: {

    positionTitle: 'Developer',

    jobCategoryId: 'seekAnzPublicTest:jobCategory:seek:2EFstqFvP',

    positionLocationId: 'seekAnzPublicTest:location:seek:2TCFhBtw9',

    hirerJobReference: 'Premium521'

  },

  // `advertisement` specifies the current state of the job ad in update mode.

  //

  // Typically you would only specify the `id` of the live job ad.

  // Alternatively, you can provide the job ad's fields if you don't have the

  // position profile ID.

  advertisement: {

    // Position profile ID

    id: 'seekAnzPublicTest:positionProfile:jobAd:27cuZeA47'

  },

  // Specify a `theme` to style your ad selection

  // panel with your own colours.

  theme: {

    selectionColor: '#e60278',

    linkColor: '#e60278',

    cautionColor: '#b38800',

    errorColor: '#ff0000'

  }

});

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"

}

<label for="seek-advertisement-type">Ad type</label>

<select id="seek-advertisement-type">

  <option value="">Please choose an option</option>

  <option>Classic</option>

  <option>StandOut</option>

  <option>Premium</option>

</select>

try {

  SEEKAdPostingWidget.render(

    document.getElementById('seekWidget1ContainerDiv'),

    options

  );

} catch (e) {

  // Show fallback field if not already visible

}