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.
- JobScore Widget Installation
- Advanced Styling and Filtering
- Custom CSS
- Multiple Widget Support
- Multiple Account Widget
- 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:
|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'|
Filter any column by specific matches using semicolons to separate list items
or filter by states (e.g. "states=ca,az,ny")
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.|
How many jobs need to be listed before the search dialog and dropdown filters appear.
|data-show-header||Enable/disable table header row describing each column (default = 'true')|
comma separated list of fields to sort by. Add "_reverse" to a field name for reverse sort.
|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").
Default: "auto" (switches between 'single' and 'multicolumn' depending on the number of listings).
|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).|
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]...
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.
- Access the Jobscore Widget Builder and customize how you would like the job list to be displayed
- Click on 'Add this job widget to your website' and copy the code
- 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:
…and full widget embed example including company name might look like:
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 firstname.lastname@example.org if you're running into issues embedding the Jobs Widget in Wordpress or another CMS.