1. Introduction

 

The JobeGetter Widget is a javascript widget that can load in different components of the JobGetter system. By loading in this widget, it allows for the website styling to be applied to the widget, meaning it will seamlessly fit in a website.

2. Requirements

For this widget to work, there is really only one main requirement and that is Twitter's Bootstrap for the styling of the widget. Over time we will work to remove this dependency; for now it allows for easy customization and styling of the widget following the embedded web-site's style.

Bootstrap Documentation: http://getbootstrap.com

3. Implementation

3.1. Dependencies

Make sure you have a DOCTYPE of html in the top of your web page. This is particularly important for IE9 support

<!doctype html>

To implement the widget, it is as simple as including a few lines of codes in the header of your website.

If you don’t already have Twitter’s Bootstrap, then include the line below before you load the widget.  This will ensure that all styles are available before the widget is loaded and that they don’t load and display unstyled.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

Note 1: Bootstrap has an optional JavaScript file that can be used and has a dependency on jQuery.js.  The jobgetter widget does not require either.

Note 2:  If you already have bootstrap loaded, then just make sure that you load the widget after you load bootstrap.

Note 3:  If you are planning to use jQuery, it should also be loaded before the widget is loaded

 

3.2. Loading the widgets

To load the widget, add the following line to every web-page that you will use the widget in.  It can be loaded anywhere on the page, but is generally best to load it in the <head> section

<script
    id=”wk-loader”
    src="https://www.jobgetter.com.au/widget/loader.js?id=6be65fe0-37a5-4e8a-b201-b0976c64045a"
    type="text/javascript" async >
</script>

Note 1:  The Affiliate ID shown in the example while valid, may not be in the future.  Do Not use it in production.  Contact JobeGetter to get your own unique id.

Note 2:  The “async” attribute is optional.  The loader is only a small piece of javascript that is dynamically generated, It will asynchronously load the rest of the code required for the widget.  It should be loaded as early as possible, and if the async flag is used will have negligible impact on the load time of the page

Note 3:   The “id=wk-loader” attribute is optional.  It is used to identify the current script tag so the loader can modify the dom immediately after it.  If it can’t find the id, it will add to the end of the head.  It is particularly required to provide faster loading on older versions of IE that don't provide any other way to identify the current tag.

 

Before you can use the widget you will also need to define the scope of page that the widget should work with.  This is done by add an “wk-app” attribute to either the <body> tag or a <div> tag that encloses the area where the widget will be used, and settings its value to “jobgetterWidget”.  ie.

 

      

<body wk-app=”jobgetterWidget”> 

To use the widget anywhere in the page

<div wk-app=”jobgetterWidget”>

To use the widget anywhere within the division

Note:  You can place the “wk-app” attribute on the <html> tag if required

 

Once the scope of the widget has been set, you can then use any of the following widgets within the scoped area to activate the various widget functions/components

 

      

Widget Name

Description

wk-session

A login form is displayed in a specified <div> 

wk-session-modal

A link is shown that causes a modal login form to appear over the current page

wk-registration

A registration form is displayed in a specified <div>

wk-registration-modal

A link is shown that causes a modal registration form to appear over the current page

wk-job-search

The Job Search widget is displayed within a <div>

wk-job-list

The Job list widget is displayed within a <div>

wk-user-first-name

Displays the user’s first name or blank

wk-user-last-name

Displays the user’s last name or blank

wk-user-full-name

Displays the user’s full name (first + last) or blank

wk-user-email

Displays the user’s email address or blank

wk-user-location

Displays the user’s first location or blank

wk-notification-badge

Displays a notification badge with a count of the number of unread notifications. (only displayed to authenticated users)

wk-notification-list

Notifications are displayed in a specified <div>

wk-if-authenticated-show

Shows the html element or block if the user is authenticated.

wk-if-authenticated-hide

Hides the html element or block if the user is authenticated.


Most widgets can be enabled via  a div tag with a decorator attribute or via the use as a custom element.  Some widgets are restricted to one of the other and these are documented in the dedicated section for each widget.   For example you can invoke wk-job-list (the job list widget) as either

Using a decorator attribute

<div wk-job-list></div>

and

Using a custom element

<div>
    <wk-job-list></wk-job-list>
</div>

will give the same results

Note 1:  If you are using the decorator form of the widget (ie: the first form) you are not restricted to using it exclusively on the <div> element, it can be used on any container element  eg:  <td> <li> etc

Note 2:  Not all widgets can be used ie either form.  For example the modal widgets can only be used in the the attribute format

 

4. Using the JobGetter wk-job-list Widget



This widget shows/list jobs based on a pre-configured criteria.  The configuration is maintained on JobGetter's server in JSON format, and is accessed by a settings-id specified on the widget.  The user does NOT need to be authenticated.  Currently only JobGetter staff can set up the configuration, but we will be exposing it to you shortly.  Currently the configurable options are:


 

          

Config

Title

This is a text title displayed as the title on the list.  If no title is configured we do not set a title allowing you to build your own title elsewhere on  the page if you want one

Template

The template used to display each line.  This is a HTML snippet that controls the data displayed and any buttons show.

Query

Pagination 

Enable / Disable pagination in the widget and the number of lines displayed on each page

Filter

Staffroom UUIDs

An array of industries to restrict the listing to

Skill Names

A list of specific role / skills / qualifications to show

Location

A list of locations and surrounding radius to show jobs from

Sort

Which field to sort on, usually one of the “Job Title”, “Company” or “Location” fields, and the sort direction ascending or descending

4.1. wk-job-list

<div wk-job-list settings-id=”830827ff-b8c7-484d-9aee-053164e1385e”></div>

or

<div>
    <wk-job-list settings-id=”830827ff-b8c7-484d-9aee-053164e1385e”></wk-job-list>
</div>

Note 1:  The settings-id is usually unique to each website.  You may also want to have unique uuids to facilitate different configurations for different job lists

Note 2:  DONOT use the uuid shown in the example in production -  this uuid may become invalid in the future.  Please contact JobGetter to get your own uuid for your widget

Classes

wk-job-list
wkJobList
wkJobListJobs
wkPoweredBy

 

5. Appendix

5.1. Sample wk-job-list & wk-job-search widget usage

<!doctype html>
<html>
 <head>
   <meta http-equiv="content-type" content="text/html" charset="utf-8">
   <!-- Load bootstrap styles first, this way the page can be styled as it is loaded -->
   <link   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Load the jobgetter widgets -->
     <script id="wk-loader" async src="https://www.jobgetter.com.au/widget/loader.js?id=aca01abc-0df3-42bb-932c-39cfac435d55” type="text/javascript"></script>
 </head>
 <!-- define the scope of the document that the widget will operate in -->
 <body wk-app="jobgetterWidget">
   <!-- Embed the Job list Widget-->
   <div wk-job-list settings-id='ec46e7c7-14ff-4c64-a80b-1436ce15ae3d' ></div>
   <!-- Embed the Job search Widget-->
   <div wk-job-search settings-id='830827ff-b8c7-484d-9aee-053164e1385e' ></div>
 </body>
</html>

 

5.2. Sample wk-job-list ONLY widget usage

<!doctype html>
<html>
 <head>
   <meta http-equiv="content-type" content="text/html" charset="utf-8">
   <!-- Load bootstrap styles first, this way the page can be styled as it is loaded -->
   <link   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Load the workible widgets -->
     <script id="wk-loader" async src="https://www.workible.com.au/widget/loader.js?id=aca01abc-0df3-42bb-932c-39cfac435d55” type="text/javascript"></script>
 </head>
 <!-- define the scope of the document that the widget will operate in -->
 <body wk-app="workibleWidget">
   <!-- Embed the Job list Widget-->
   <div wk-job-list settings-id='ec46e7c7-14ff-4c64-a80b-1436ce15ae3d' ></div>
 </body>
</html>


 

5.3. Sample wk-job-search ONLY widget usage


<!doctype html>
<html>
 <head>
   <meta http-equiv="content-type" content="text/html" charset="utf-8">
   <!-- Load bootstrap styles first, this way the page can be styled as it is loaded -->
   <link   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Load the workible widgets -->
     <script id="wk-loader" async src="https://www.workible.com.au/widget/loader.js?id=aca01abc-0df3-42bb-932c-39cfac435d55” type="text/javascript"></script>
 </head>
 <!-- define the scope of the document that the widget will operate in -->
 <body wk-app="workibleWidget">
   <!-- Embed the Job Search Widget-->
   <div wk-job-seearch settings-id='ec46e7c7-14ff-4c64-a80b-1436ce15ae3d' ></div>
 </body>
</html>