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

Advanced Styles

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 [email protected] if you're running into issues embedding the Jobs Widget in Wordpress or another CMS.