Skip to main content

Setup Job Page

A Job Page is where you can show an individual Job in more detail than just a Job Card. Let's set up a basic Job Page. No configuration is required, and NO need for the data-sf attributes, jobs-list and job.

JobPage.html
<head>
  <script
    data-api-key="YOUR_API_KEY"
    src="https://smartfeed.vacancy-filler.co.uk/editor/main.js"
  ></script>
</head>

Now that we have set up the configuration for the Job Page, let's add some SmartFeed Elements with the data-sf attribute to the Job Page.

  • job-title: Returns the Job Title
  • job-description: Returns the Job Description
  • job-company: Returns the Company
  • job-category: Returns the Job Category
  • job-remote: Returns if the Job is Remote
  • job-benefits: Returns the Job Benefits
  • job-expiry-date: Returns the Job Expiry Date
  • job-apply: Return link to the Job Application Form

See all the available Elements SmartFeed offers for Job Page here

note

Again for demo purposes, we are using Bootstrap for styling but any styling framework can be used.

JobPage.html
<div class="card-header">
  <div className="row">
    <div className="col-8">
      <h2 data-sf="job-title"></h2>
      <p data-sf="job-description"></p>
    </div>
    <div className="col-4">
      <h2>Job Details</h2>
      <strong>Company: <span data-sf="job-company"></span></strong>
      <strong>Category: <span data-sf="job-category"></span></strong>
      <strong>Remote Job: <span data-sf="job-remote"></span></strong>
      <strong>Benefits: <span data-sf="job-benefits"></span></strong>
      <strong>Expiry Date: <span data-sf="job-expiry-date"></span></strong>
      <a className="btn btn-primary" data-sf="job-apply">
        Apply
      </a>
      <a className="btn btn-secondary" href="www.example.com/JobsPage.html">
        Return to Listing
      </a>
      </div>
    </div>
  </div>

This will create a straightforward Job Page and you should get a similar result like this:

JobsPage.html
<!DOCTYPE html>
<html>
  <head>
    <title>Your Webiste</title>
    <meta name="description" content="Job Page" />
    <meta name="keywords" content="vacancies Jobs etc" />
    <script
      data-api-key="YOUR_API_KEY"
      data-job-page
      src="https://smartfeed.vacancy-filler.co.uk/editor/main.js"
    ></script>
  </head>
  <body>
    <div class="card-header">
      <div className="row">
        <div className="col-8">
          <h2 data-sf="job-title"></h2>
          <p data-sf="job-description"></p>
        </div>
        <div className="col-4">
          <h2>Job Details</h2>
          <strong>Company: <span data-sf="job-company"></span></strong>
          <strong>Category: <span data-sf="job-category"></span></strong>
          <strong>Remote Job: <span data-sf="job-remote"></span></strong>
          <strong>Benefits: <span data-sf="job-benefits"></span></strong>
          <strong>Expiry Date: <span data-sf="job-expiry-date"></span></strong>
          <a className="btn btn-primary" data-sf="job-apply"> Apply </a>
          <a className="btn btn-secondary" href="www.example.com/JobsPage.html">
            Return to Listing
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

http://localhost:3000

Software Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Job Details

Company: HireRoad
Category: Backend Developer
Remote Job: Yes
Benefits: Cake on your Birthday
Expiry Date: Monday, November 13, 2023
ApplyReturn to Listing

Well done, you have now set up SmartFeed 🥳, a basic but effective one. Now go Explore what other features SmartFeed offers.