1. PageUp Group Help
  2. Knowledge Portal
  3. Recruitment
  4. Job Pages

Building widgets

Updated

Public

Overview

Widgets are useful when you need to present specific career related information or functions on a website - as opposed to creating full careers sites.

This guide is written for a technical audience with web development skills.

Widgets are designed to be used by the client on their own self-hosted websites, allowing the integration of jobs data into the wider corporate website. Each widget will produce a wireframe HTML element which can then be styled to fit in with the rest of the parent webpage.

Examples of usage include:

  • Providing a way to search for jobs from a client-hosted careers website.
  • Listing current job openings on a webpage about a particular business unit.
  • Detailing open graduate roles on a webpage about graduate programs.
  • Highlighting expression of interest campaigns on the front page of a client-hosted careers website.

Webinar

Building widgets

Widgets are designed to be used by the client on their websites, allowing the integration of PageUp managed careers content into the wider corporate website.

You can use our widget builder to build a basic widget code easily without requiring technical knowledge.

Contact PageUp to determine the correct URL and Sourcing Channel Name for your site.

Basic widget structure

Building widget code

To create the code for a widget:

  1. Add a reference to our JavaScript file
  2. Add an empty DIV into your HTML with a unique ID (NAME_OF_HTML_ID) attribute set
  3. Initialise the widget control

Basic widget sample code:

<script type="text/javascript" src="https://careers.static.pageuppeople.com/Widgets/v3.js"></script>
 <div id="searchFilter"></div>
 <script type="text/javascript">
 PU.Widgets.search("searchFilter", "http://careers.pageuppeople.com/517", "caw", "en", {
 });
 </script>

Each widget needs to be initialised as follows:

PU.Widgets.search("[NAME_OF_HTML_ID]", "[CAREERS_WEBSITE_URL]", "[CAREERS_WEBSITE_SOURCING_CHANNEL_NAME]", "[DESIRED_LANGUAGE]", [OPTIONS]);

These fields are:

  • [NAME_OF_HTML_ID] - value of the ID attribute of the DIV element that will contain the widget content.
  • [CAREERS_WEBSITE_URL] – URL of your cloud based careers website. Contact PageUp to confirm the correct URL and sourcing channel and language if other than English.
  • [CAREERS_WEBSITE_SOURCING_CHANNEL_NAME] – name of the sourcing channel from which job content will be displayed.
  • [DESIRED_LANGUAGE] – the language which the job content will be displayed in. Use “en” if English.
  • [OPTIONS] - additional fields in a JSON collection to control the style of widget being displayed.

Adding a widget to a secure HTTPS site

Widgets support HTTPS. To use this, please replace

<script type="text/javascript" src="http://careers.static.pageuppeople.com/Widgets/v3.js">

<script type="text/javascript" src="http://careers.static.pageuppeople.com/Widgets/v3.js"></script>
 <div id="searchFilter"></div>
 <script type="text/javascript">
 PU.Widgets.search("searchFilter", "http://careers.pageuppeople.com/517", "caw", "en", {
 });
 </script>

with

<script type="text/javascript" src="https://careers.static.pageuppeople.com/Widgets/v3.js">

<script type="text/javascript" src="https://careers.static.pageuppeople.com/Widgets/v3.js"></script>
 <div id="searchFilter"></div>
 <script type="text/javascript">
 PU.Widgets.search("searchFilter", "http://careers.pageuppeople.com/517", "caw", "en", {
 });
 </script>

Widget types

There are various widgets that can be added to your website to integrate careers content. Below is a list of the supported widgets and how they can be added.

Search widget

The search widget allows applicants to search for jobs from a client's existing careers website. The search widget may sometimes be referred to as a quick search widget.

The search widget will need to be configured as per Basic widget structure above.

An example of a search widget with all search fields displayed:

PU.Widgets.search("searchFilter", "http://careers.pageuppeople.com/517", " caw", "en", {
 filters: { "Keyword": "Label for keyword textbox",
 "WorkTypes": "Label for work type",
 "Brands": "Label for brands",
 "Departments": "Label for department",
 "Categories": "Label for categories",
 "Locations": "Label for location" },
 selectText: "Default text for the dropdown items",
 submitButtonText: "Text for the submit button"
 });

This displays like:

widget 1

The appearance of this widget can be configured using the following additional fields in a JSON collection:

  • filters
    • JSON collection, containing the fields to be used, and the labels to appear for each.
  • selectText
    • string, default text on the dropdowns items.
  • submitButtonText
    • string, text to appear on the submit button.
  • filterType
    • string, type of filters to display. “dropdown” to show dropdown lists, or “checkbox” to show checkboxes
  • useListingWidget
    • Whether to “link” this widget to a listing widget. If the widget is linked, performing a search using this search widget will automatically update the listing widget
    • To not link this search widget to a listing widget, this should be null or not specified (the default)
    • To link this search widget to a listing widget, this should be the name of the widget
  • autoSearch
    • boolean, whether to automatically search when the filter criteria changes. Generally used with the “useListingWidget” setting above

To display counts within search filter items, add "displayCounts": true within the search widget script, for example:

<div id="jobSearch"></div>
<script type="text/javascript">  PU.Widgets.search("jobSearch", "https://careers.pageuppeople.com/517/", "caw", "en", {"selectText": "Select","submitButtonText": "Search", "filterType": "checkbox", "autoSearch": true, "displayCounts": true,
"filters": { "Keyword": "", "WorkTypes": "Work type", "Categories": "Category", "Locations": "Location"}, "useListingWidget": "jobListing" }); 
</script>

Job listing widget

A job listing widget will display all jobs currently advertised that meet a specified search criteria.

The search widget will need to be configured as per Basic widget structure above.

An example of a job listing widget:

PU.Widgets.jobListing("recent", "http://careers.pageuppeople.com/517", "caw", "en", {template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",jobsPerPage: 5,
paging: true
});

The appearance of this widget can be configured using the following additional fields in a JSON collection:

  • template
    • string, containing the HTML to use for each individual job listing. Supports merge fields as defined in the ‘template’ section below.
  • headerTemplate
    • string, containing HTML to use in the listing header
  • footerTemplate
    • string, containing HTML to use in the listing footer
  • filters
    • JSON collection specifying what kind of jobs should be returned. Allowable fields are detailed in the ‘filter’ section below.
  • jobsPerPage
    • integer, how many jobs should be displayed on each page. If omitted, then a default value will be used.
  • loadDetailsInline
    • boolean, whether to load job details “inline” (in the listing widget) instead of going to the full job details page
  • listingType
    • string, “table” to use a HTML table or “ul” to use an unordered list (default).
  • dateFormatter
    • function to use to format dates. Defaults to using the “dd mmm yyyy” format (eg. “1 Jan 2020”)
  • paging
    • boolean, should the pagination links be displayed at the bottom of the job listing. If false or omitted, then only [jobsPerPage] jobs will be displayed
  • numberOfPages
    • integer, maximum number of pages to be displayed. If omitted, then a default value will be used.
  • pageAutoMove
    • boolean, should the job listing move to the next page automatically.
  • pageMoveTime
    • integer, time in seconds until the next page will be loaded. If omitted, then a default value will be used.

If the “loadDetailsInline” setting is enabled, the following additional settings are available:

  • jobDetailsTemplate
    • string, containing HTML to use for job details. The same merge fields used in the listing template can be used here
  • scrollOnReturn
    • boolean, whether to scroll the job listing when returning.

The appearance of each item in a job listing is defined by the ‘template’ field of the JSON options collection passed to the widget. Merge fields can be used to include job content with the HTML.

For more information refer to the supported merge fields in Building widgets.

Some examples are below.

To display job titles with apply link:

Code
template: "[Title] <a href=\"[ApplyUrl]\">Apply</a>",
Output
  • Operations Manager Apply
  • Accountant Apply

Job titles with summary details and link to job details:

Code
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
Output
  • Operations Manager

Sample Corporation are looking for an excellent Operations Manager to lead our widget manufacturing team.

  • Accountant

Sick of working with the same old numbers? Sample Corporation have the job for you!

Job title with job ID and apply link:

Code
template: "[Title] ([ID]) <a href=\"[ApplyUrl]\">Apply</a>",
Output
  • Operations Manager (581549) Apply
  • Accountant (581975) Apply

Job titles with summary details with links to job details and apply:

Code
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary] <a href=\"[ApplyUrl]\">Apply now!</a></p>",
Output
  • Operations Manager

Sample Corporation are looking for an excellent Operations Manager to lead out widget manufacturing team. Apply now!

  • Accountant

Sick of working with the same old numbers? Sample Corporation have the job for you! Apply now!

To limit the types of jobs displayed in the widget, the following filters can be added:

  • Keyword
  • JobSystemType
  • WorkTypes
  • Categories
  • Brands
  • Departments
  • Locations

Filters can be applied to a widget by themselves, or combined. Some examples are:

  • Include jobs in the “Legal” or “Accounts” categories.
    • filters: { "Categories": "Legal, Accounts" }
  • Include jobs in Melbourne:
    • filters: { "Location": "Melbourne" }
  • Include jobs with ‘exciting’ in the advert text:
    • filters: { "Keyword": "exciting" }
  • Include jobs in the “Accounts“ category located in Melbourne:
    • filters: { "Location": "VIC", "Categories": "Accounts" }

Note: The values for all filters except ‘Keyword’ can include multiple words in a comma separated format. The ‘Keyword’ value is treated plain text for searching, and each word in ‘keyword’ is treated as an OR search.

JobSystemType supports the following values:

  • JOB (normal job)
  • REDEPLOYMENT (redeployment campaign)
  • GRADUATECAMPAIGN (graduate campaign)
  • GENERAL (general campaign)
  • CONTRACT (contract job)
  • CUSTOM_JOB_SYSTEM_TYPE1 (client specific job type 1)
  • CUSTOM_JOB_SYSTEM_TYPE2 (client specific job type 2)
  • CUSTOM_JOB_SYSTEM_TYPE3 (client specific job type 3)

Not all JobSystemTypes may be used by all clients.

To enable open job link on PageUp hosted static/dynamic careers page, add "loadDetailsInline": false within job listing widget script OR Untick 'Load job details inline' check box within Widget builder listing tab and generate a script.

Job mail alert widget

To setup a job mail alert widget:

  1. Generate code/script for job mail alert
  2. Add job mail alert script to job alert page
  3. If you have used a widget to create your entire careers (which is not appropriate use of widgets), then make sure the career page and job alert pages are sitting at the same location.
  4. Provide the job alert page URL to PageUp to enter in Careers Manager, under the Job Alert Subscription settings.

Detailed steps:

  1. Ensure you have your instance number and source pointer information. If not, contact PageUp.
  2. Update the following URL with the instance number and source pointer: http://careers.pageuppeople.com/instance number/source pointer/en/widgets
  3. Load this URL to access the PageUp People Careers Widget Builder page
  4. Under the Basic tab, set the Widget Type as Job Mail to generate code for job mail alert.
  5. Click the Job Mail tab to customise job mail alert items
  6. Click the Code tab to copy code for job mail alert. Take this code and place it on the page where you want the job mail alert widget to be displayed.
  7. Click Preview to preview job mail alert page.

Refer to the example on Job mail alert below.

Examples

Most recent jobs widget

A widget to display any given number of most recently advertised jobs.
In this example, the widget will display the 20 most recently advertised jobs with pagination: 5 jobs per page across 4 pages, and the job ad summary displayed:

<div id="recent"></div>
<script type="text/javascript">
PU.Widgets.jobListing("recent", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 5,
numberOfPages: 4,
paging: true
}); 
</script>

Animated most recent jobs widget

In this example, the widget will display the 5 most recently advertised jobs, one job per page, with the page changing to the next job every 15 seconds. End-users will have the ability to manually select a specific job, displaying the job ad summary and a link to the job details:

<div id="animated"></div>
<script type="text/javascript">
PU.Widgets.jobListing("animated ", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 1,
numberOfPages: 5,
paging: true,
pageAutoMove: true,
pageMoveTime: 15
}); 
</script>

All jobs at a given location

In this example, the widget will display all the jobs located in Victoria, with 5 jobs displayed per page:

<div id="victorian"></div>
<script type="text/javascript">
PU.Widgets.jobListing("victorian", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 5, 
paging: true,
filters: { "Locations": "Victoria" }
}); 
</script>

Top 5 part time jobs

In this example, the widget will display the 5 most recently advertised part time jobs.

<div id="partTime"></div>
<script type="text/javascript">
PU.Widgets.jobListing("partTime", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 5,
paging: false,
filters: { "WorkTypes": "Part time" }
}); 
</script>

Top 5 contractor jobs

In this example, the widget will display the 5 most recently advertised contractor jobs.

<div id="contractors"></div>
<script type="text/javascript">
PU.Widgets.jobListing("contractors", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 5,
paging: false,
filters: { "JobSystemType": "CONTRACT" } 
}); 
</script>

All campaigns

In this example, the widget will display all advertised campaigns, one at a time, but automatically scrolling to the next campaign every 12 seconds, and the ability to manually select a specific job.

<div id="campaigns"></div>
<script type="text/javascript">
PU.Widgets.jobListing("campaigns", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 1, 
numberOfPages: 500,
paging: true,
pageAutoMove: true,
pageMoveTime: 12, 
filters: { "JobSystemType": "GRADUATECAMPAIGN, REDEPLOYMENT, GENERAL" } 
}); 
</script>

All graduate campaigns

In this example, the widget will display all graduate campaigns advertised.

<div id="grads"></div>
<script type="text/javascript">
PU.Widgets.jobListing("grads", "http://careers.pageuppeople.com/517", "caw", "en", {
template: "<b><a href=\"[JobDetailUrl]\">[Title]</a></b> <br/> <p>[Summary]</p>",
jobsPerPage: 500,
paging: false,
filters: { "JobSystemType": "GRADUATECAMPAIGN" } 
}); 
</script>

Job mail alert

In this example, the widget will allow applicants to register their interest for jobs under a set of criteria. When jobs match this criteria, applicants will be informed.

<!-- Place these wherever you'd like the widgets to appear. They can be anywhere, they don't have to be next to each other. -->
<div id="jobSearch">Loading...</div>
<div id="jobListing">Loading...</div>

<!-- Place this at the very bottom of the page -->
<script src="https://careers.static.pageuppeople.com/Widgets/v3.js"></script>
<script>PU.Widgets.jobListing("jobListing", "http://careers.pageuppeople.com/517/", "caw", "en", {"template":"<a href=\"[JobDetailUrl]\">[Title]</a><br /><p>[Summary]</p>","emptyResultText":"No jobs found","loadDetailsInline":true,"jobsPerPage":20,"listingType":"ul","headerTemplate":"<ul class=\"jobs-listing\">","footerTemplate":"</ul>","jobDetailsTemplate":"<h2>[Title]</h2>\n [Overview]\n<p><a href=\"[ApplyUrl]\">Apply</a> | <a href=\"#\" class=\"back-link\">Back</a></p>","paging":true,"numberOfPages":20});
PU.Widgets.search("jobSearch", "http://careers.pageuppeople.com/517/", "caw", "en", {"selectText":"Select","submitButtonText":"Search","filterType":"dropdown","autoSearch":false,"filters":{"Keyword":"Keyword","WorkTypes":"Work type","Categories":"Category","Brands":"Brand","Departments":"Department","Locations":"Location"},"useListingWidget":"jobListing"});</script>

The following fields are supported on a job mail alert widget:

Element ID:

  • Generates Unique ID for jobMail content.
    Default: jobMail

Subscribe Button Text:

  • Generates subscribe button text
    Default: Subscribe

Email Label Text:

  • Generates email label text
    Default: Email

All Item Label:

  • Generates label for the selection of all the available options for the particular search filter item.
    Default: All

Example:
WorkType

  • On the above example user will subscribe for Casual, Fixed term contract, Full time, Part time and Temporary jobs.

Success Message Text:

  • Displays message after user subscribe successfully for job mail alert.
    Default: “You have been successfully subscribed to job alerts”

Error Message Text

  • Displays an error message if entered email address is wrong.
    Default: “Error subscribing to job alerts. Please check your email address, and try again”

Filters:

  • Select filter items to display on the job mail page. Available filter options are as follows:
  • Keyword
  • Work types
  • Categories
  • Brands
  • Departments
  • Locations

Note: Due to the nature of how job mail alert widgets are implemented, if the widget is implemented on a page that already has reCAPTCHA, it creates a conflict so the widget will not function. The widget needs to be on a page that does not have reCAPTCHA implemented already.

Supported merge fields on widgets

  • JobDetailUrl - URL to the job details page associated with the current job
  • Id - The internal job number of the job
  • ExternalJobNo - The external job number of the job
  • Title - The job title of the job
  • Summary - The short summary text of the job
  • Overview - The complete job description of the job
  • ApplyUrl - URL to the application form so that the applicant can apply to the job
  • PrintableAppFormUrl - URL to a preview version of the application form
  • Categories - The categories that the job as been assigned to
  • Locations - The advertising locations of the job
  • Brand - The brand of the job
  • Department - The department of the job
  • WorkType - The work type of the job (Full time, part time, etc)
  • OpeningDateUtc - The UTC time of when the job opens
  • OpeningDateTimeZone - Name of the time zone set against the opening date of the job
  • OpeningDateTimeZoneAbbr - Abbreviated name of the time zone set against the opening date of the job
  • ClosingDateUtc - The UTC time of when the job closes
  • ClosingDateTimeZone - Name of the time zone set against the opening date of the job
  • ClosingDateTimeZoneAbbr - Abbreviated name of the time zone set against the opening date of the job

Comments

0 comments

Article is closed for comments.

Table of contents

Articles in this section