Public

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

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

Widgets are designed to be used by customers on their own self-hosted websites, allowing the integration of job 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

• Careers sites & Widgets - April 2015 - 34:03 min

Building widgets

Widgets are designed to be used by customers 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:

Adding a widget to a secure HTTPS site

Widgets support HTTPS. 

To use this, 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 the 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:



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

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 criterion.

The search widget will need to be configured as per the 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:

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

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 Supported merge fields on widgets.

Some examples are below.

To display job titles with an apply link:

Job titles with summary details and a link to job details:

Job title with job ID and apply link:

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

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:

JobSystemType supports the following values:

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

Not all JobSystemTypes may be used by all customers.

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 set up 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 an 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 will be 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 scrolls 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:

Example:

In the above example, the user will subscribe to Casual, Fixed term contract, Full time, Part time and Temporary jobs.

Filters:

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

Supported merge fields on widgets

Dynamic template and widget feature matrix

Here is a matrix comparing the features between the Dynamic Template and Widget platforms.

Query parameters and the careers widget

Careers sites built with the careers widget do not support query parameters, so search URLs with criteria cannot be used.

Example:

https://www.examplecareersurl.com/careers/current-vacancies?search-keyword=&category=seasonal
https://careers.pageuppeople.com/517/cw/en/listing?search-keyword=&category=seasonal

This won't work because the main site doesn't recognize the "search-keyword" query parameter. It only works for non-widget career sites.

Instead, a separate widget needs to be built with the search filter, for example:

<!-- Place this at the very bottom of the page -->
<script src="http://careers.static.pageuppeople.com/Widgets/v3.js"></script>
<script>PU.Widgets.jobListing("jobListing", "https://careers.pageuppeople.com/517/", "cw", "en", { "filters": { "Categories": "Retail, Seasonal" }, "template":"<a href=\"[JobDetailUrl]\">[Title]</a><br /><p>[Summary]</p>","emptyResultText":"No jobs found","dateFormatter":PU.formatDate,"loadDetailsInline":true,"jobsPerPage":20,"listingType":"ul","headerTemplate":"<ul class=\"jobs-listing\">","footerTemplate":"</ul>","jobDetailsTemplate":"<h3>[Title]</h3>\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", "https://careers.pageuppeople.com/517/", "cw", "en", {"selectText":"Select","submitButtonText":"Search","filterType":"dropdown","autoSearch":false,"filters":{"Keyword":"Keyword","Brands":"Brands","Departments":"Departments","SubDepartments":"SubDepartments","PayScales":"PayScales","PayScaleAreas":"PayScaleAreas","JobSectors":"JobSectors","Locations":"Locations","LocationGroups":"LocationGroups","Categories":"Categories","CategoryGroups":"CategoryGroups","WorkTypes":"WorkTypes","JobSystemTypes":"JobSystemTypes"},"useListingWidget":"jobListing"});</script>