Jobs Widget Overview

In addition to retrieving roles using the job postings JSON endpoint , there is also a jobs widget which you are able to embed on your own website. This widget displays the jobs block from your Pinpoint careers site, and offers configuration options for formatting and filtering.

Getting started

This is the code snippet required to embed the widget on your website (please note you will need to insert your company subdomain):

<html>
  <head>
    <link rel="stylesheet" href="https://dywrfp5ctng3l.cloudfront.net/external-jobs-table/index.css">
    <script type="module" crossorigin src="https://dywrfp5ctng3l.cloudfront.net/external-jobs-table/index.js"></script>
  </head>
  <body>
    <div data-pinpoint-subdomain="INSERT-SUBDOMAIN-HERE" class="pinpoint-external-jobs-table-widget"></div>
  </body>
</html>

Your website will already have <html> and <head> tags, so the important items are the <link> tag, the <script> tag, and the <div> tag containing your company subdomain.

This is all that is required to display the jobs widget on your website.

Basic customisation

There are a number of additional data attributes that you can make use of to customise the look and feel of the widget.

You will need to add these attributes to the <div> tag (with the class "pinpoint-external-jobs-table-widget", as shown above).

Attribute	Description	Example
data-pinpoint-custom-structure-name	A display name for your company's custom structure	"Region"
data-pinpoint-primary-theme-color	A color code to style even rows	"#455C51"
data-pinpoint-secondary-theme-color	A color code to style odd rows	"#F4F4F4"
data-pinpoint-highlight-theme-color	A color code to style table headings and hover states	"#999999"

If you were to use these examples, the <div> in your widget code should look like this:

 <div
   data-pinpoint-subdomain="INSERT-SUBDOMAIN-HERE"
   class="pinpoint-external-jobs-table-widget"
   data-pinpoint-custom-structure-name="Region"
   data-pinpoint-primary-theme-color="#455C51"
   data-pinpoint-secondary-theme-color="#F4F4F4"
   data-pinpoint-highlight-theme-color="#999999"
 ></div>

Advanced customisation

You are also able to configure the widget to be pre-filtered, with the option to also disable specific filters.

You will need to add these attributes to the <div> tag (with the class "pinpoint-external-jobs-table-widget", as shown above).

Attribute	Description	Example
data-pinpoint-location-filter-ids	Location IDs to pre-filter your widget by location(s)	"1,2,3"
data-pinpoint-department-filter-ids	Department IDs to pre-filter your widget by department(s)	"4,5,6"
data-pinpoint-division-filter-ids	Division IDs to pre-filter your widget by division(s)	"7,8,9"
data-pinpoint-structure-custom-group-one-filter-ids	Structure Custom Group One IDs to pre-filter your widget by custom structure(s)	"10,11,12"
data-pinpoint-location-filter-disabled	Choose to disable the location filter	"true"
data-pinpoint-department-filter-disabled	Choose to disable the department filter	"true"
data-pinpoint-division-filter-disabled	Choose to disable the division filter	"true"
data-pinpoint-structure-custom-group-one-filter-disabled	Choose to disable the custom structure filter	"true"

If you were to use some of the examples in the above table, the <div> in your widget code should look something like this:

<div
   data-pinpoint-subdomain="INSERT-SUBDOMAIN-HERE"
   class="pinpoint-external-jobs-table-widget"
   data-pinpoint-location-filter-ids="1,2,3"
   data-pinpoint-department-filter-ids="4,5,6"
   data-pinpoint-location-filter-disabled="true"
   data-pinpoint-department-filter-disabled="true"
 ></div>

Where can I find the various structure IDs?

The two simplest ways to find out a structure ID are as follows:

Contact your Customer Success Manager
Use the Pinpoint API. Specifically, please refer to the API reference page for a specific structure's index endpoint, such as locations