Embedded jobs boards
An embedded jobs board is a JavaScript snippet that will embed a jobs board onto a webpage. The snippet loads our own JavaScript file that handles inserting the jobs board's content into a specified element on the page. The jobs board will usually contain 3 'pages', the first being a list of sectors that vacancies can be in. The second is a list of vacancies for that sector and the third will be the full advert for a vacancy that has been chosen from the list. The content will load via AJAX, hence the use of quotes around 'Pages'.
We also have the option to host a jobs board for an employer, this site will use a basic template that will have the employer's logo and the option of a link in the menu to link back the employer's main site.
Adding an embedded jobs board to your site
JavaScript
Here is the snippet you need to add to your page. The jobs board will be added wherever this snippet is put in the body of your page:
<!-- trac.jobs JavaScript --> <div aria-live="polite"><script id="TracFeed" async src="https://feeds.trac.jobs/js/v18/EmbeddedJobsBoard.js" data-JobsBoardID="10000" crossorigin="anonymous" integrity="sha384-cbOYURIX2N9r4jpVDJ6a/26KtiH5SEH/OVD8xCrZpv/g54sYppB5Ci39vXvOXhNX"></script></div> <!-- End trac.jobs JavaScript -->
You will notice a data attribute in the script tag: "data-JobsBoardID", this number should be replaced with the ID of your jobs board. 10000 will work, for testing purposes.
A full list of the attributes that can be added to the script tag are below:
- data-SearchBox (boolean). Defaults to true. Set to false to not output a search box.
- data-Examples (boolean). Defaults to false. Outputs some examples of error messages onto the jobs board, this is recommended during testing to make sure they are styled correctly.
- data-IncludeCSS (boolean). Defaults to true. Include our CSS file on the jobs board. This provides some basic styling. Set to false to manage all of the jobs board CSS yourself
- data-HeaderOffset (integer). Defaults to 0. Our javascript will scroll to the top of our content when new content is loaded. However fixed position navigation bars cause problems with scrolling to an element as the height of the nav is not taken into account. Add the height of the navigation bar (in pixels) here if necessary. Don't include "px"
- data-Locale (string). Defaults to en-gb. The preferred locale to display the jobs boards. Sites with language switchers should ensure this is set to the locale selected from the switcher. Supported locales: en-gb, cy-gb.
Jobs board ID
Our snippet includes an example jobs board ID (10000) that will return real vacancies to check your jobs board with. We have provided this to start with so that you can begin developing with these vacancies on your jobs board (new employers will not have any of their own vacancies to test with). For employers that do have vacancies, this data may still be useful as it will include a large variety of vacancies to test with.
Once your embedded jobs board goes live you will need to use your own jobs board ID in order to restrict the jobs board to your employer's vacancies. Please talk to your contact at Trac if you don't know your jobs board ID.
For customers who currently have a jobs board, an alternative way to find out the jobs board ID is to visit their current jobs board and click on 'My job account'. Your jobs board ID will be the 'feedid' in the URL.
CSS
Included with the jobs board is a CSS file to provide some basic styling of the jobs board out of the box. You can turn this off if you wish, the list of attributes above will explain how.
Naturally your own CSS will alter the look of the jobs board, our CSS tries to specify the least it can (so the jobs board will use the fonts and font sizes of your site). You can override our CSS to improve the display of the jobs board, this is particularly important where our styles conflict.
Our content will be in #hj-content or #hj-menu, and these will be wrapped in #hj-jobs-board-content. Our CSS targets #hj-content or #hj-menu so to override our styles you will need to use #hj-jobs-board-content to out specify our CSS.
CSS examples
Here are some CSS rules for elements that are commonly styled to match an employer's site:
Sector icon background colour
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon
Sector icon background colour [v16 only]
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-default-buttons
Sector icon text colour
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon h3
Sector icon text colour [v16 only]
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-default-buttons span
Sector icon background colour (hovered)
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon:hover, #hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon:hover h3
Sector icon background colour (hovered) [v16 only]
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-default-buttons:hover, #hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-default-buttons:hover span
Sector icon text colour (hovered)
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon:hover h3
Sector icon text colour (hovered) [v16 only]
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-default-buttons:hover span
Button colour, Button font colour, Button style
#hj-jobs-board-content #hj-content button, #hj-jobs-board-content #hj-content a.hj-button, #hj-jobs-board-content #hj-menu a.hj-button, #hj-jobs-board-content #hj-menu button, #hj-jobs-board-content #hj-content input[type="submit"], #hj-jobs-board-content #hj-content input[type="button"], #hj-jobs-board-content #hj-menu input[type="button"], #hj-jobs-board-content #hj-content input.hj-primary[type="submit"], #hj-jobs-board-content #hj-content input.hj-primary[type="button"], #hj-jobs-board-content #hj-menu input.hj-primary[type="button"]
Button hover colour, Button hover font colour
#hj-jobs-board-content #hj-content button:hover, #hj-jobs-board-content #hj-content a.hj-button:hover, #hj-jobs-board-content #hj-content button:focus, #hj-jobs-board-content #hj-content a.hj-button:focus, #hj-jobs-board-content #hj-menu button:hover, #hj-jobs-board-content #hj-menu a.hj-button:hover, #hj-jobs-board-content #hj-menu button:focus, #hj-jobs-board-content #hj-menu a.hj-button:focus, #hj-jobs-board-content #hj-content input[type="submit"]:hover, #hj-jobs-board-content #hj-content input[type="button"]:hover, #hj-jobs-board-content #hj-menu input[type="button"]:hover, #hj-jobs-board-content #hj-content input[type="submit"]:focus, #hj-jobs-board-content #hj-content input[type="button"]:focus, #hj-jobs-board-content #hj-menu input[type="button"]:focus, #hj-jobs-board-content #hj-content input.hj-primary[type="submit"]:hover, #hj-jobs-board-content #hj-content input.hj-primary[type="button"]:hover, #hj-jobs-board-content #hj-menu input.hj-primary[type="button"]:hover, #hj-jobs-board-content #hj-content input.hj-primary[type="submit"]:focus, #hj-jobs-board-content #hj-content input.hj-primary[type="button"]:focus, #hj-jobs-board-content #hj-menu input.hj-primary[type="button"]:focus
Search box background (surrounding) colour
#hj-jobs-board-content #hj-content .hj-fancy-container
Search page heading colour
#hj-jobs-board-content #hj-content .hj-fancy-container header
Standard container header background, Standard container header text colour
#hj-jobs-board-content #hj-content .hj-standard-box .hj-box-heading
Standard container border colour
#hj-jobs-board-content #hj-content .hj-standard-box .hj-box-content
Job list borders
#hj-jobs-board-content #hj-content .hj-job-list ol, #hj-jobs-board-content #hj-content .hj-job-list ol > li
Sector icon rounded borders
#hj-jobs-board-content #hj-content #hj-select-sector .hj-css-sector-icon {
border-radius: 12px
}
Centering icons
#hj-content #hj-select-sector ul li.hj-custom-sector-icon {
display: inline-block;
float: none;
}
Adjusting the icons size (width and height) [v16 only]
#hj-content #hj-select-sector .hj-css-sector-icon div.hj-css-sector {
min-width: 200px;
height: 82px;
}
Banner adverts
When it comes to banner advertising, as web developers control the wider page the snippet sits on they tend to set banners up themselves outside of the snippet. Please be aware however that within the embedded jobs board snippet you do have the ability to display a 'banner advert' which could be an image or some text that appears above the jobs board on every page of the jobs board. The banner adverts can be set to appear from a certain date and time until another pre-defined time. Please contact your Trac support team to setup a banner.
Embedded jobs boards, tracking code & Google Analytics
Tracking code is often added to web pages to allow employers to perform web analytics on their site. For example, Google Analytics can be used on embedded boards by developers who can get the tracking to include the 'pages' of the embedded board by listening to the hash change and then send that page as a page-view (see this stack overflow page). Please be aware this is not possible on basic jobs boards.
Future updates
The site news that we post before a site update will note any changes to the jobs boards, if there are any, and what to do in this case.
Changelog
This is a record of notable changes to embedded jobs boards and the snippet. We intend to list all backwards incompatible changes, new features and options for each version. Your current version number can be found by looking at the snippet on your website, there should be the version number in the 'src' of the script tag, e.g "/v4/".
- 29 Nov 2023 [v18]
- Fixing vacancy short links used in third party advertisers
- 10 Oct 2023 [v17]
- Minor security improvements. Removed outdated workarounds for IE 8 & 9
- 14 Mar 2023 [v16]
- CSS changes to allow upgrade to new Trac sector buttons on "select sector" page
- 02 Mar 2021
- Minor CSS changes, required as part of the multiple working pattern change
- 02 Feb 2021
- Allow embedded jobs boards to include employer logos (depending on the jobs board settings)
- 18 Jan 2021
- Update pagination styling. Plus, fire the hashchange event as described in the 'Google Analytics' part of the docs
- 15 Sep 2020
- Improved the basic CSS to provide enough contrast for buttons. The latest version of the snippet is now version 9. An upgrade is strongly recommended.
- 08 Sep 2020
- Improved the accessibility of the embedded jobs board snippet to indicate to screen readers that the content will be updated dynamically by JavaScript.
- 26 Nov 2019
- Embedded jobs boards now support having custom icons that change when the mouse moves over the image and now have a data attribute for the language the content to display in. The latest version of the snippet is now version 8. An upgrade is only required if:
- You are planning on showing the feed content in a language other than English; or
- Your jobs board uses custom icons
- 24 Sep 2019
- Fixed an issue with sorting job lists if the jobs board was set-up with a vacancy list first rather than the usual sector selection. The latest version of the snippet is now version 5. Upgrade only required if the embedded board starts with a vacancy list.
- 17 Jan 2019
- Embedded jobs boards comes out of beta and is announced on the site news. The snippet available at this time uses version 4 of our Javascript.