For companies with a custom design on their careers section and a need for greater flexibility, Occupop's HTTP API Endpoints offer a powerful solution. By accessing the active job content through a JSON file query, you can list jobs with a unique design that aligns perfectly with your website's branding. With this option, you can direct candidates to apply through your application form or post their CVs/resumes using the JSON format. However, it's important to note that implementing this integration requires development work by your team.
If you are an administrator users on Occupop navagite to settings>API endpoints where you will find the endpoints for Get Jobs & Post CVs.
Get Jobs will be used for querying live job data & Post CVs will be used if the candidate will apply without being directed to the Occupop application page, In most cases for careers page’s the Get Jobs endpoint will be used without the Post CVs.
Job Data Endpoint Fields Available
1. `jobs`: An array containing individual job objects.
- `id`: A unique identifier for the job.
- `uuid`: A universally unique identifier for the job.
- `type`: The type of job (e.g., permanent, temporary).
- `title`: The title of the job.
- `description`: The description of the job, including details about the company and the responsibilities.
- `start_salary`: The starting salary for the job.
- `end_salary`: The ending salary for the job (if it's a range).
- `workplace`: The workplace location (e.g., onSite).
- `city_name`: The name of the city where the job is located.
- `city_id`: The identifier for the city.
- `city_lat`: The latitude of the city's location.
- `city_lng`: The longitude of the city's location.
- `city_real_city`: The real city name (e.g., Lisburn).
- `city_real_state`: The state or region of the city (e.g., Northern Ireland).
- `country`: The country where the job is located (e.g., United Kingdom).
- `country_short`: The short code for the country (e.g., GB for United Kingdom).
- `salary_visible`: Indicates whether the salary range is visible.
- `salary_period`: The period for the salary (e.g., hourly).
- `token`: A token related to the job.
- `token_link`: A link associated with the token.
2. `questions`: An array containing questions related to the job application.
- `text`: The question text.
- `type`: The type of question (e.g., yesno, options).
- `options`: An array of possible answer options for option-type questions.
- `hasRuleOut`: Indicates whether the question has rule-out options.
3. `company_name`: The name of the company offering the job.
4. `company_logo`: The URL to the company's logo image.
Post CVs Endpoint
1. `job_id`: An integer representing a unique Job ID in Occupop (obtained through a GET method).
2. `email`: The email address of the candidate applying for the job.
3. `first_name`: The first name of the candidate.
4. `last_name`: The last name of the candidate.
5. `profile`: Cover notes or a brief summary provided by the candidate.
6. `landline`: The candidate's landline phone number.
7. `linkedin`: The candidate's LinkedIn profile URL.
8. `city_name`: The name of the city where the candidate is based.
9. `source`: The source from which the application was received (e.g., "Custom Source"). If the source was not provided, it will be set as "Api Endpoint."
10. `file`: An object containing the candidate's CV file details.
- `name`: The name of the CV file (e.g., "file name.doc").
- `data`: The CV file data in Base64 format.
11. `questions`: An array containing questions and answers related to the job application.
- `text`: The question text.
- `answer`: The candidate's answer to the question.
Sample guide on creating the job listing section
Creating a website job listing using data from an existing JSON file involves several steps. Below is a step-by-step guide to help you achieve this:
Step 1: Understand the JSON structure
Take a look at the existing JSON file and understand its structure. Identify the key-value pairs that contain information about each job listing. Typically, a job listing JSON might have attributes such as "title," "description," "location," "salary," etc.
Step 2: Set up your development environment
To build the website, you'll need a text editor for code and a web server to host your website locally. You can use a code editor like Visual Studio Code, Sublime Text, or Atom. For a local web server, you can use tools like XAMPP or Node.js with Express.
Step 3: Create the HTML structure
Start by creating the basic HTML structure for your website. You'll need elements to display the job listings dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Job Listings</title>
</head>
<body>
<div id="job-listings">
<!-- Job listings will be dynamically added here -->
</div>
</body>
</html>
Step 4: Create the JavaScript code
You'll use JavaScript to fetch the data from the JSON file and dynamically populate the job listings on the website.
<script>
// Function to fetch JSON data and display job listings
async function fetchJobListings() {
try {
const response = await fetch('path/to/your/job-listings.json');
const data = await response.json();
const jobListingsContainer = document.getElementById('job-listings');
// Loop through each job listing and create HTML elements
data.forEach(job => {
const jobListingDiv = document.createElement('div');
jobListingDiv.classList.add('job-listing');
const titleElem = document.createElement('h2');
titleElem.textContent = job.title;
const descriptionElem = document.createElement('p');
descriptionElem.textContent = job.description;
const locationElem = document.createElement('p');
locationElem.textContent = `Location: ${job.location}`;
const salaryElem = document.createElement('p');
salaryElem.textContent = `Salary: ${job.salary}`;
jobListingDiv.appendChild(titleElem);
jobListingDiv.appendChild(descriptionElem);
jobListingDiv.appendChild(locationElem);
jobListingDiv.appendChild(salaryElem);
jobListingsContainer.appendChild(jobListingDiv);
});
} catch (error) {
console.error('Error fetching job listings:', error);
}
}
// Call the function to fetch and display job listings
fetchJobListings();
</script>
Step 5: Apply CSS (optional)
You can apply CSS to style the job listing elements and make the website visually appealing. Create a separate CSS file and link it to your HTML file.
<head>
<title>Job Listings</title>
<link rel="stylesheet" href="path/to/your/styles.css">
</head>
In your styles.css file, you can add styling to the job listing elements, the job listing container, etc.
Step 6: Replace JSON file path
In the JavaScript code snippet, replace `'path/to/your/job-listings.json'` with the actual path to your JSON file. Make sure the JSON file is in the correct location accessible by the website.
Step 7: Test your website
Open your HTML file in a web browser, and you should see the job listings dynamically populated on the page.
That's it! You've now created a website job listing using information from an existing JSON file. Keep in mind that this is a basic example, and you can expand and enhance the functionality and design based on your requirements.