Exenzo Jobs Widget documentation

# Getting started

Exenzo jobs widget is a Javascript Widget that let's you display jobs visually by using one of our APIs. The jobs widget is configurable and has some features such as:

  • Displaying a list of jobs with information such as title, segments, image, location, salary (if applicable), posted date, premium job label
  • Ability to filter, paginate, sort and search the jobs
  • View full details of a specific job (full description, general details)
  • Apply for job feature
  • Share job on social media
  • Responsive design and mobile friendly
  • Possibility to configure options such as the api endpoint, whether filters are displayed or not, which job details are displayed, colors and more.

# Installation

  1. Add a script tag with our jobs
<script src="https://unpkg.com/jobboard-widget/dist/JobsWidget.umd.min.js"></script>
  1. Add the css
<link rel="stylesheet" href="https://unpkg.com/jobboard-widget/dist/JobsWidget.css">
  1. Initialize the widget
<script type="text/javascript">
 new JobsWidget({
    el: '#id-from-html-element' 
 })
</script>
  1. Configure other options for the widget such as colors, api keys, api urls and so on
<script type="text/javascript">
 new JobsWidget({
    baseURL: 'PROVIDED API URL', // For demo purposes you can use https://api.jobboard.stg.exenzo.com
    josPerPage: 10, // Jobs displayed per page
    jobBoardId: 'JOB BOARD ID', // The job board from which the jobs will be displayed
    jobOpenUrl: false, // When clicking on a job, to open the job on the url provided by the API -> Default: false
    segmentIds: [1, 2, 3], // The segments that will be displayed by default -> Default: []
    organizationId: 1, // Specific jobs from an organization -> Default: null
    jobPostLink: null, // Job post link (Post a job button) -> Default: null
    jobPostText: null, // Job post text (Text above job post button) -> Default: null
    gaKey: 'GOOGLE ANALYTICS TRACKING ID', // Tracking id to enable Google Analytics
    primaryColor: 'HEX CODE OF A PRIMARY COLOR', // Example: #ECC94B -> hash(#) + 6 digits (7 characters)
    dangerColor: 'HEX CODE OF A DANGER COLOR', // Color used for hotjob bagde -> Default: #E53E3E
    fontFamily: `"Trebuchet MS", 'Helvetica Neue', Helvetica, Tahoma, sans-serif`, 
    language: 'en/nl', // Dutch by default
    showLocationSearch: true/false, //True by default
    showRangeSelect: true/false, //True by default
    segmentLimit: 5, // Segment limit to be displayed before “Show more” -> 5 by default
    segmentListPosition: 'left', // Segment list filters position -> Options -> 'left' / 'right'
    showSegmentList: true, // Segment list filters visibility -> Default: true
    showCreateAlert: true, // Create alert card visibility -> Default: true
    el: '#id-from-html-element' 
 })
</script>

Alternatively you can just put this script which will dynamically download css and javascript

<script type="text/javascript">
 document.onload = function () {
    var script = document.createElement('script')
    var link = document.createElement( "link" );
    link.href = 'https://unpkg.com/jobboard-widget/dist/JobsWidget.css';
    link.type = "text/css";
    link.rel = "stylesheet";
    link.media = "screen,print";
    if (document.head) {
      document.head.appendChild(link)
    }
    script.src = 'https://unpkg.com/jobboard-widget/dist/JobsWidget.umd.js'
    script.onload = () => {
      new window.JobsWidget() // Define config as an object to edit things such as primary color, font family etc
    }
    document.body.appendChild(script)
 }
</script>

Check out or Demo

Demo →