Contact Support

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

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-jobfield-name (Professional & Enterprise plans only) Name of a checkbox or multiple choice custom job field for filtering.
data-jobfield-value (Professional & 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)

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 customised 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. 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

Powered by Zendesk