The vacancies section displays current job openings available through the Matchlab Express App. This section is dynamically generated and can be customized to suit your specific needs. Below, you'll find instructions on how to integrate and display these vacancies on your website.
To integrate the Express App into your HTML page, you need to include the following script and stylesheet:
<link rel="stylesheet" href="https://express.match-lab.nl/jobs.css"><script type="module" src="https://express.match-lab.nl/jobs.js" crossorigin></script>
The stylesheet has to be included inside the <head> tags of your HTML
document. The script can be added either within the <head> or
<body> tags of your HTML document.
The Express App will load in the div with the id express-app as shown below:
<div id="express-app" data-api-key="demo_key" data-locale="nl"></div>This div acts as a container for the Express App. You can customize its appearance and behavior using the following attributes:
id="express-app": The ID of the div where the app will be rendered. (Required)
data-api-key: Your API key for accessing the service. (Required)data-locale: The language or locale for the app. Options include
NL, EN, DE, and RO. (Required)
data-color-primary: Set the primary color of the app using a hex value.data-color-secondary: Set the secondary color using a hex value.data-color-tertiary: Set the tertiary color using a hex value.data-background-color-primary: Define the primary background color using a hex
value.
data-background-color-secondary: Define the secondary background color using a
hex value.
data-background-color-popover: Set the background color of popovers using a hex
value.
data-foreground-color-primary: Set the primary text color using a hex value.
data-foreground-color-secondary: Set the secondary text color using a hex
value.
data-font-increase-size: Adjust the font size by a factor (e.g.,
1.1 for a 10% increase or 0.9 for a 10% decrease).
These attributes allow you to tailor the Express App's look and feel to match your brand or website design.
Show examplesIf you want to showcase specific vacancies, you can use the highlighted vacancies feature. This feature allows you to display jobs based on criteria such as tags, departments, or by default top rankings.
data-highlighted: Add this attribute to enable the highlighted vacancies
feature.
data-variant: Choose between normal and
compact layouts for the highlighted vacancies.
data-limit: Set the maximum number of vacancies to display. Defaults are 3 for
the normal variant and 4 for the compact variant.
data-tag-filter: Display only vacancies tagged with the specified tag.data-department-filter: Display only vacancies from the specified department.
Using these attributes, you can customize how highlighted vacancies are presented, ensuring they align with your site's content strategy.
Show examples