How can developers configure and embed the JobScore Jobs Widget?

Jobscore Jobs Widget for Developers

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 works very similarly to embedding a Facebook 'Like' button or the Google Plus '+1' button.

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 job list you'd use the following <div> tag:

<div class='jobscore-jobs' data-zebra-stripe='true'>...[generated code]...</div>

Configuration options include:

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

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

data-show-searchbar-count Free

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 Free Enable/disable table header row describing each column (default = 'true') 
data-sort-by Free

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 Free 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 Free

Default: "auto" (switches between 'single' and 'multicolumn' depending on the number of listings).
'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)

Note: only 'multicolumn' is available on the Free plan.

data-zebra-stripe Free (boolean: 'true' or 'false') Enable alternate colors for even/odd rows of job listings
data-text-color Professional The base CSS color of all the non-link text in the widget.  Default is #333
data-bg-color Professional CSS background-color of the widget.  Default is transparent.
data-font-family Professional CSS font-family string.  Default is 'Arial, Helvetica, sans-serif' 
data-font-size Professional CSS font-size string.  Default is '12px'.
date-line-height Professional CSS line-height.  Default is '14px'.
data-link-text-color Professional CSS '<a>' tag color.  Used for job title.  Default is #333
data-link-bg-color Professional CSS '<a>' tag background. Default is transparent.
data-link-font-weight Professional CSS '<a>' tag font-weight.  Default is 'normal' (common option is 'bold') 
data-link-font-size Professional CSS '<a>' tag font-size.  Default is inherit from base CSS font-size.
data-header-text-color Professional CSS text color for table header <th> elements 
data-header-bg-color Professional CSS background-color for table header <th> elements 
data-header-font-size Professional CSS font-size for table header <th> elements 
data-header-line-height Professional CSS line-height for table header <th> elements 
data-odd-row-bg-color Professional CSS color value of odd row background for zebra-stripe 
data-even-row-bg-color Professional CSS color value of even row background for zebra-stripe (zebra striping must be active)
data-row-border-bottom Professional CSS border-bottom attribute of each row.  Default is '1px solid #eee' (thin light gray underline) 
data-show-social-sharing Professional 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 Professional Default: 'true'. Show or hide the sortable header row with column descriptions. (only available when 'data-group-by' is not active)
data-css-url Professional A URL to a custom CSS sheet hosted on your website
data-feed-url Professional (Advanced) URL to custom JSONP jobs feed.  Default is to use regular jobs feed.

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-row-border-bottom="1px solid #f0f0f0"
    data-filters='department=customer support;pmo;ldo;data engineering&location=pleasanton, ca;plano, tx'
...[additional code from widget builder]...

Custom CSS

For Professional and Enterprise Plan customers the jobs widget supports custom 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 '' 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='//'>...[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

The JobScore widget 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 filterings, you can have one widget filtering just Engineering jobs and another with jobs from San Francisco.

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.


Powered by Zendesk