Public
For other versions, refer to Related Articles.
Overview
A Dynamic Template is a simple technique used by us that provides our clients 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.
Note: Some content below is intended for web developers, or those with that skill set. Refer below for more Technical information.
Client creates dynamic template
Your organisation 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
Note: 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 below information 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 for existing applicants to log into their account, 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
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> {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 templates. 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/
Important: 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 crashing. The error is highlighted in red on our side. PageUp will work with you to correct 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 please 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 behaviour.
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
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 require that images used for previews are at least 1200 pixels wide and 627 pixels high with a recommend 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 | Merge Field Mandatory/Option | Merge Field Purpose | Merge Field Attributes and Purpose |
| {page-title listing="Jobs - Recent Jobs" search="Jobs - Search Results" detail="Jobs - Job Details - [job.title]"} | No | Builds the Page Title depending on what is being displayed |
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 |
| {form}{/form} | Yes | Builds opening/closing form tag for Searching and Jobmail Forms | |
| {language-picker} | No | Inserts Language Picker Control | text - Language Label |
| {social-media share-text="Share this:" more-text="More" links="facebook,twitter,linkedin,email" } | No | Display Social Media Sharing buttons and links |
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 |
|
{rss-link} ie. {rss-link}RSS{/rss-link} |
No | Display RSS Link/Icon for reading Job Feeds in RSS Readers | 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 |
| {search-keyword placeholder="Search for jobs"} | Yes | Inserts Search Textbox Control | placeholder - default text in search box |
| {date-time} | No | Merges the current date into the page template | 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. |
| {result-count} | No | Displays the number of Recent Jobs or Search Results | |
| {result-remain-count} | No | Displays the remaining number of Recent Jobs or Search Results (total minus the number currently and previously being displayed on the page) | |
| {resource-location} | No | Merges the Source Field "Resource Location". Should be a relative or absolute URL for locations of images, css and other resources. This is optional. | |
| {messages} | Yes | Validation and informational messages from the site will be merged into this merge field | |
| {search-filters} | No | Inserts Search Filters based on Search Filters Template | button-text - Text used when no JavaScript is available to filter search results |
| {pages} | Yes |
Renders the search results, recent jobs and job template pages
All the above templates are sitting within the PageUp content management system and It can be updated as per your design. Please contact PageUp representative to make changes. |
|
| {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"} | No | Displays a field for subscribing to Job Mail/Job Alerts |
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. |
| {css} | No | Merges the PageUp default stylesheet to the careers page. It adds basic styling to the job contents. | |
| {javascript} | No but Recommended | Merges the PageUp default javascript to the careers page. ie. Auto search functionality, apply pop up |
PageUp Callbacks
Clients 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.
Once you have the template hosted in an externally accessible location, you should then send PageUp the URL of the template.
Important notes
- 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 below Cipher Suites.
Redacted
Comments
Article is closed for comments.