1. JobScore Help
  2. Documentation
  3. Careers Site

Developer Guide for the JobScore Jobs Widget

The JobScore Jobs Widget is a flexible way to embed job listings anywhere in your site and can be customized to match your site's look and feel. The embedding is similarly to embedding a Facebook 'Like' button or the Google Plus '+1' button.

  1. JobScore Widget Installation
  2. Advanced Styling and Filtering
  3. Custom CSS
  4. Multiple Widget Support
  5. Multiple Account Widget
  6. Job Feed APIs (Advanced Integration)

Jobs Widget Installation

Use the Jobscore Widget Builder to create a Jobs Widget with your preferred look and feel. When complete, click the 'Add this job widget to your website' button and copy & paste the code in the dialog into the target webpage.

The upper section of the code (<div class='jobscore-jobs'>...) should be placed where you want the widget to appear on the page. The lower section of the code (<script> tag) place right before the closing html body tag. Instructions are contained in the comments of the code.

Advanced Styling and Filtering

The jobs widget has many custom configuration options to help match the widget with your site's look and feel as well as give you flexible control over which locations, departments are visible and the job sorting order.

Each of the options is activated by adding a HTML5 'data' attribute to the <div class='jobscore-jobs'> tag. So for example if you wanted to activate zebra striping (different background colors for even and odd rows) for the multicolumn job list you'd use the following <div> tag:

<div class='jobscore-jobs' data-list-type='multicolumn' data-zebra-stripe='true'>...

Configuration options include:

Advanced Filtering

Attribute

 Description
data-display-fields A comma separated list of columns to show. Default is 'title,location,department'.
data-filter-fields A comma separated list of columns that will get dropdown filters. Default 'location,department'
data-filters

Filter any column by specific matches using semicolons to separate list items
(e.g. "department=marketing;engineering&location=new york, ny;san francisco, ca")

or filter by states (e.g. "states=ca,az,ny")
data-countries

Filter jobs by specific countries using semicolons to separate the country codes (e.g. "US,CA,BR") 
data-jobfield-name (Scale & Enterprise plans only) Name of a checkbox or multiple choice custom job field for filtering.
data-jobfield-value (Scale & Enterprise plans only) The filter value for the custom job field.
data-show-searchbar-count

How many jobs need to be listed before the search dialog and dropdown filters appear.
Default is '10'. Set to '0' to keep search+filters always visible.
data-show-header Enable/disable table header row describing each column (default = 'true')
data-sort-by

comma separated list of fields to sort by. Add "_reverse" to a field name for reverse sort.
(ex: "department_reverse,location,title")
data-group-by Let's you specify one field to group listings by. This will change the display layout
to a grouped layout and remove sorting options. Default: none. (ex: "location").
data-list-type

Default: "auto" (switches between 'single' and 'multicolumn' depending on the number of listings).
Options:
'single' (large job title, department and location underneath)
'multicolumn' (table style with click-to-sort headers)
'auto' ('single' mode if less than 5 jobs, 'multicolumn' mode if over 5 jobs)

Advanced Styles

data-zebra-stripe (boolean: 'true' or 'false') Enable alternate colors for even/odd rows of job listings (only available when list-type is "multicolumn")
data-text-color The base CSS color of all the non-link text in the widget. Default is #333
data-bg-color CSS background-color of the widget. Default is transparent.
data-font-family CSS font-family string. Default is 'Arial, Helvetica, sans-serif'
data-font-size CSS font-size string. Default is '12px'.
data-line-height CSS line-height. Default is '14px'.
data-link-text-color CSS '<a>' tag color. Used for job title. Default is #333
data-link-bg-color CSS '<a>' tag background. Default is transparent.
data-link-font-weight CSS '<a>' tag font-weight. Default is 'normal' (common option is 'bold')
data-link-font-size CSS '<a>' tag font-size. Default is inherit from base CSS font-size.
data-header-text-color CSS text color for table header <th> elements
data-header-bg-color CSS background-color for table header <th> elements
data-header-font-size CSS font-size for table header <th> elements
data-header-line-height CSS line-height for table header <th> elements
data-odd-row-bg-color CSS color value of odd row background for zebra-stripe
data-even-row-bg-color CSS color value of even row background for zebra-stripe (zebra striping must be active)
data-row-border-bottom CSS border-bottom attribute of each row. Default is '1px solid #eee' (thin light gray underline)
data-show-social-sharing Default: none. Options: 'top', 'bottom', 'both'. Reveal the social sharing icons (facebook, twitter, linkedin) and place them on top or bottom of the widget.
data-show-header Default: 'true'. Show or hide the sortable header row with column descriptions. (only available when 'data-group-by' is not active)
data-css-url A URL to a custom CSS sheet hosted on your website
data-feed-url (Advanced) URL to custom JSONP jobs feed. Default is to use regular jobs feed.
data-typekit-id If you use Typekit for custom fonts, use this attribute to set your own Typekit ID. You'll need to add "*.jobscore.com" to the domains list (Typekit instructions).

Advanced Example

An advanced example that adds custom styling (colors, bolding job names, light underlines separating jobs) and only shows jobs in the 'Customer Support, PMO, LDO, and Data Engineering' departments, as well as only showing jobs from "Pleasanton, CA and Plano, TX". The widget is also sized at 600px wide (set by inline CSS styling in this example):

<div class='jobscore-jobs' style='width:600px;'
data-header-bg-color="#f0f0f0"
data-header-text-color="#333"
data-row-border-bottom="1px solid #f0f0f0"
data-link-font-weight='bold'
data-display-fields='title,department,location'
data-filters='department=customer support;pmo;ldo;data engineering&location=pleasanton, ca;plano, tx'
data-zebra-stripe="false">
...[additional code from widget builder]...
</div>

Custom CSS

For the perfectionists out there, the jobs widget supports custom offsite CSS to completely control the look and feel of the widget.

Add a 'data-css-file' attribute to the Jobscore <div> tag and it will load the css file you specify (we suggest hosting the file on your site and pointing at that file).

As an example, if your company's website was 'http://www.yourcompany.com' and the custom widget css file was 'widget_css.css' in the 'css' directory, a custom css embed might look like:

<div class='jobscore-jobs' data-css-url='//www.yourcompany.com/css/widget_css.css'>...[code from widget builder]...</div>

Note: the 'http:' or 'https:' can be left off the url and Jobscore's widget will use whatever protocol the parent page is served under.

Multiple Widget Support

JobScore supports multiple job widgets on the same page, giving you a wide range of flexible display options to promote your jobs on your site. Why would you want multiple widgets? If you want to separate top-priority jobs from your main list of jobs (at the top of the page, or in the right hand column) you may wish to have more than one widget.

  1. Access the Jobscore Widget Builder and customize how you would like the job list to be displayed
  2. Click on 'Add this job widget to your website' and copy the code
  3. Now that you have the code it can be customized in different ways using advanced filtering, you can have one widget filtering just Engineering jobs and another with jobs from San Francisco.

Multiple Account Widget

JobScore supports the ability to display jobs from multiple accounts rolled up into one widget. This is useful for customers who choose to integrate each of their brands jobs into one careers page. Once you have completed the code for your standard widget you will need to add an additional "data" parameter. This parameter, when added to the widget, will embed to pull jobs data from other JobScore accounts. You will also need to update other data params to display/sort/group jobs by company name.

To begin you will first need to compile a list of company codes for each account you will be adding to your widget. You can access your company code here. 

E.g. where code1 is the company code for the parent account, and code2 and code3 are the company codes for their subsidiaries, the additional data param is:

 

data-merge-feeds=“code1,code2,code3”

 

…and full widget embed example including company name might look like:

 

<div class='jobscore-jobs' data-display-fields='department,title,company_name,location' data-sort-by='department,title,company_name,location' data-list-type='grouped' data-group-by=‘department' data-filter-fields='company_name,department,location' data-merge-feeds=“code1,code2,code3">
  <div class='js-fallback' style='color:#888'><a style='color:#888;text-decoration:underline;' href='http://www.jobscore.com/jobs/code1'>Company 1 jobs</a> powered by <a style='color:#888' href='http://www.jobscore.com'><img style='padding:0;' align='bottom' src='//www.jobscore.com/images/new/jobscore_logo_embed.png' alt='Applicant Tracking, Social Recruiting and Software Hiring Solution - JobScore'></a></div>
</div>
  ...
<script type='text/javascript'>
  (function(d, s, c) {
    if (window._jobscore_loader) { return; } else { window._jobscore_loader = true; }
    var o = d.createElement(s); o.type = 'text/javascript'; o.async = true;
    var sc = d.getElementsByTagName(s)[0]; sc.parentNode.insertBefore(o, sc);
    o.src = ('https:' == d.location.protocol ? 'https:' : 'http:') + '//www.jobscore.com/jobs/' + c + '/widget.js';
})(document, 'script', ‘code1');
</script>

Job Feed APIs (Advanced Integration)

Jobs Widgets give you a great amount of flexibility but there are a limited number of job list styles available. In the event your company would prefer an even more customized layout/look developers can use the Jobscore Job Feed APIs. The Job Feed APIs give all the raw job data (name, description, location, apply link, etc) so that you can create a custom integration with your web site. Click here to find out more about the Jobscore Job Feed APIs

Please contact support@jobscore.com if you're running into issues embedding the Jobs Widget in Wordpress or another CMS.

 

 

 

Comments

Simplify your hiring.


GET STARTED FOR FREE