Building a dynamic template - public

Public

Note:

This option has been replaced with Search and Apply and Recruitment Marketing. Contact your PageUp representative to discuss migrating.

A Dynamic Template is a simple technique used by us that provides our customers with the flexibility to update their career page without having to notify us. The overall styling and design of our client’s careers page will be dictated by the dynamic template.

The dynamic template gives you control over all images, stylesheets, and JavaScript used within the template. PageUp careers’ pages will be hosted on PageUp servers. Here, we scrape the content of the dynamic header and footer from the dynamic template and merge the jobs data content onto the page. 

User guide

Creating a dynamic template

The following guide outlines the steps required to create a dynamic template and who is responsible for certain actions.

Some content below is intended for web developers or those with that skill set. Refer below for more Technical information.

Customer creates a dynamic template

Your organization is responsible for creating the template that will be used for your careers site.

To create the template:

  • Consult a 3rd party provider that manages your corporate webpage, or;
  • Consult in-house website developers who will be responsible for creating the template

You may have to contact your marketing/branding department to confirm if you have to follow specific styling guidelines for your careers site.

Please forward the information below to the person/team responsible for creating the dynamic template to review and action.

In the template that is created by your team/3rd party, PageUp placeholder merge fields will allow PageUp to populate the relevant job content into the template. For a full list of merge fields, refer to Technical information.

To allow existing applicants to log into their accounts, an Existing applicant login link/button will need to be created within the dynamic template. Your PageUp representative will provide you with a URL that will sit behind the button. For more information, refer to Existing applicant login.

Redacted details: Contact your PageUp representative for further details.

The following code example contains very little custom styling, but shows how the merge fields and attributes can be used within a page template:

<!doctype html>
<html lang="en">
<head> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta charset="utf-8">
 <link rel="shortcut icon" href=" http://mydomain /favicon.ico" />
 <link rel="stylesheet" type="text/css" href="http://mydomain/style.css" />
 <script src=" http://mydomain /javascript.js"></script> 
 
 <title>MyOrganisation - {page-title listing="Recent Jobs" search="Search Results" detail="Details - [job.title]"}</title> 
 
 {meta} 
 {css} 
 {javascript} 

<!-- custom CSS can be added below -->
<style>

To style your web page, simply insert CSS in-between the <style></style> tags, immediately before the closing </head> tag.

Below is an example dynamic template. The first image shows the merge fields placed into the template. The second image shows where the actual PageUp content has been merged into the template.

On the dynamic template below, the required merge fields are highlighted in yellow.

Resulting in the following:

PageUp merges data into the template

Once your dynamic template has been created and provided to PageUp, we will merge the job listing information into the template. This will result in a new careers site URL that is hosted by PageUp. Below is an example of an externally accessible dynamic template as well as the resulting careers page for our demonstration site:

Dynamic template - https://intelligent-job-listing.career-pages.com/dynamic-template

Careers page - http://careers.pageuppeople.com/517/caw/en/listing/

It is important to note that when we upload your URL of where the dynamic template is located, validation of incorrect use of merge fields and attributes takes place to prevent the page from crashing. The error is highlighted in red on our side. PageUp will work with you to correct it accordingly.

Building a dynamic template in a CMS

If using a page builder in a popular CMS (content management system) like WordPress or Drupal, when adding the merge fields to the page, ensure that the opening and closing {form} tags are in the same element, for example: <div> , <span>.

Having them in separate elements may cause unexpected behavior.

Updating a dynamic template

Any updates to your corporate branding, images, or links can be reflected on the dynamic template and will be reflected on the PageUp-hosted elements overnight. This is due to caching, which can be up to 24 hours.

Redacted details: Contact your PageUp representative for further details.

Configuration for social sharing

Social media sites such as LinkedIn use the Open Graph Protocol (OGP) metadata to help generate previews from shared links. Adding metadata properties to your dynamic template will ensure that the preview generated is relevant.

If metadata is missing, the social media site may use a page's source code or metadata cached from previous shares to generate a preview.

The following metadata properties are used to generate a preview:

Image

<meta prefix="og: http://ogp.me/ns#" property="og:image" content="//media.example.com/1234567.jpg" />

For example, LinkedIn requires that images used for previews are at least 1200 pixels wide and 627 pixels high with a recommended ratio of 1.91:1 and a maximum file size of 5 MB.

Title

<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Title of the page" />
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{page-title listing="Jobs - Recent Jobs" search="Jobs - Search Results" detail="Jobs - Job Details - [job.title]"}" />

The {page-title} merge field can be used with the og:title metadata property to change the title depending on what is being displayed.

Technical information

Page template supported merge fields and attributes

Below is a list of the commonly used merge fields and attributes for the dynamic template URL fields.

Merge Field {page-title listing="Jobs - Recent Jobs" search="Jobs - Search Results" detail="Jobs - Job Details - [job.title]"}
Merge Field Mandatory/Option No
Merge Field Purpose Builds the Page Title depending on what is being displayed.
Merge Field Attributes and Purpose

listing - text string to show when displaying listing

search - text string to show when displaying search results

detail - text string to show when displaying job details, can include [job.title] to display job title in the page title

Merge Field {form}{/form}
Merge Field Mandatory/Option Yes
Merge Field Purpose Builds opening/closing form tag for Searching and Jobmail Forms
Merge Field Attributes and Purpose -
Merge Field {language-picker}
Merge Field Mandatory/Option No
Merge Field Purpose Inserts Language Picker Control
Merge Field Attributes and Purpose text - Language Label
Merge Field {social-media share-text="Share this:" more-text="More" links="facebook,twitter,linkedin,email" }
Merge Field Mandatory/Option No
Merge Field Purpose Display Social Media Sharing buttons and links
Merge Field Attributes and Purpose share-text - Text to display next to Social Media buttons for telling the user they can share this

more-text - Text to display at the end of the Social Media buttons for telling the user there are more options

links - Comma separated list of share buttons to enable
Merge Field

{rss-link}

ie. {rss-link}RSS{/rss-link}

Merge Field Mandatory/Option No
Merge Field Purpose Display RSS Link/Icon for reading Job Feeds in RSS Readers
Merge Field Attributes and Purpose rss-icon - can be set to "true" or "false" or left out all together (equals false) and sets whether to display an RSS Icon or not
Merge Field {search-keyword placeholder="Search for jobs"}
Merge Field Mandatory/Option Yes
Merge Field Purpose Inserts Search Textbox Control
Merge Field Attributes and Purpose placeholder - default text in search box
Merge Field {date-time}
Merge Field Mandatory/Option No
Merge Field Purpose Merges the current date into the page template
Merge Field Attributes and Purpose format - the format to display the date-time in. If not provided the default is "yyyy" which will just display the current year. The date-time is in server time not the users so it is recommended to only use the year element.
Merge Field {result-count}
Merge Field Mandatory/Option No
Merge Field Purpose Displays the number of Recent Jobs or Search Results
Merge Field Attributes and Purpose -
Merge Field {result-remain-count}
Merge Field Mandatory/Option No
Merge Field Purpose Displays the remaining number of Recent Jobs or Search Results (total minus the number currently and previously being displayed on the page)
Merge Field Attributes and Purpose -
Merge Field {resource-location}
Merge Field Mandatory/Option No
Merge Field Purpose Merges the Source Field "Resource Location". Should be a relative or absolute URL for locations of images, css and other resources. This is optional.
Merge Field Attributes and Purpose -
Merge Field {messages}
Merge Field Mandatory/Option Yes
Merge Field Purpose Validation and informational messages from the site will be merged into this merge field.
Merge Field Attributes and Purpose -
Merge Field {search-filters}
Merge Field Mandatory/Option No
Merge Field Purpose Inserts Search Filters based on Search Filters Template.
Merge Field Attributes and Purpose button-text - Text used when no JavaScript is available to filter search results
Merge Field {pages}
Merge Field Mandatory/Option Yes
Merge Field Purpose

Renders the search results, recent jobs and job template pages

  • Recent jobs template (It gets loaded when careers page land first time)
  • Search results template ( It gets loaded when search action happens. It is very similar to the recent job template.)
  • Job details template (It gets loaded when user click on the job link)

All the above templates are sitting within the PageUp content management system and It can be updated as per your design. Contact your PageUp representative to make changes.

Merge Field Attributes and Purpose -
Merge Field {job-mail text="Send me jobs like these" privacy-error-text="You must agree to the privacy statement" placeholder="address@example.com" button-text="Subscribe" subscribe-text="We will email you new jobs that match this search." subscribed-text="Ok, we will send you jobs like this." invalid-email-text="The email address was invalid, please check for errors." unsubscribed-text="You have been unsubscribed from job alerts"}
Merge Field Mandatory/Option No
Merge Field Purpose Displays a field for subscribing to Job Mail/Job Alerts
Merge Field Attributes and Purpose

placeholder - Greyed out example text in the email field

text - String inside the clickable link to display the job mail subscription form

subscribe-text - String inside the form to provide a description of job mail

subscribed-text - String displayed once the user has successfully subscribed to a job mail

button-text - The text that is shown on the 'subscribe' button

invalid-email-text - String that will be displayed if an invalid email was entered in

unsubscribed-text - Message displayed in UI when the user unsubscribes to a job mail by clicking on unsubscribe link in email

Attributes are mandatory if the tag is used.

Merge Field {css}
Merge Field Mandatory/Option No
Merge Field Purpose Merges the PageUp default stylesheet to the careers page. It adds basic styling to the job contents.
Merge Field Attributes and Purpose -
Merge Field {javascript}
Merge Field Mandatory/Option No but recommended
Merge Field Purpose Merges the PageUp default javascript to the careers page.
ie. Auto search functionality, apply pop-up.
Merge Field Attributes and Purpose -

PageUp Callbacks

Customers will be able to use the below callbacks to add scripts or perform specific actions on the listings, search, or job advert page.

PU.Callback.add('job', 'loaded', jobLoaded);
PU.Callback.add('listing', 'loaded', listingLoaded);
PU.Callback.add('search', 'loaded', listingLoaded);
 
    function jobLoaded() {
       /**add scripting here***/
    }
 
    function listingLoaded() {
       /**add scripting here***/
    }

Hosting information

The dynamic template is built by you and hosted on your server.

Dynamic guide 1

Once you have the template hosted in an externally accessible location, you should then send PageUp the URL of the template.

Important details:

  • When hosting the dynamic template on your own servers, it is important that the web server that this template is hosted on is configured correctly for security reasons.
  • The server must conform to HTTP standards RFCs 7230, 7231, 7232, 7233, 7234, and 7235. If this requirement is not adhered to, the template may not be correctly retrieved by the PageUp system.
  • The content of a dynamic template may not exceed 31KB in size. Please reference any CSS or JavaScript styling via URL rather than in-line HTML.
  • The dynamic template must be publicly accessible and not require authentication.
  • WAF/DDOS protection (for example, Incapsula) will likely prevent PageUp from accessing and retrieving dynamic templates. PageUp recommends hosting dynamic templates on servers outside of your WAF environment.
  • PageUp requires that the Server hosting the dynamic template be compatible with the following Cipher Suites.

Redacted details: Contact your PageUp representative for further details.

Comments

0 comments

Article is closed for comments.