Setup Jobs Page

A Jobs Page is where you will list all of your vacancies utilizing a Job Card. Let's set up a Jobs Page with a simple Job Card. When implementing a Job Card, you need two data-sf attributes, jobs-list and job.

note

Just for convenience throughout the docs, all code snippet containing CSS comes from Bootstrap 5.2, but SmartFeed works with any CSS frameworks or libraries 😀

<div class="row" data-sf="jobs-list">
  <div class="col" data-sf="job">
    // All SmartFeed Job Card elements are increased here
  </div>
</div>

What happens is that SmartFeed will take a copy the jobs-list element and append each job from the ATS, taking the job wrapper as the design and also simultaneously filling in the elements on the job card.

caution

data-sf="job" need to be a child of data-sf="jobs-list".

Setup Job Card

Now we have setup a Job Card with data-sf="job" lets add Job Title, Job Summary and Job Link to the Job Card within the data-sf attribute jobs-title, job-summary and job-link

<div class="col-6" data-sf="job">
  <h3 data-sf="job-title"></h3>
  <p data-sf="job-summary"></p>
  <a data-sf="job-link" href="www.example.com/job.html">
    More Details
  </a>
</div>

See all the available features SmartFeed offers here

caution

All SmartFeed elements need to be children of the data-sf="job" element.

This will create several Job Cards depending on how many jobs are on the ATS and you should get a similar Result like this:

JobsPage.html
<!DOCTYPE html>
<html>
  <head>
    <title>Your Webiste</title>
    <meta name="description" content="Vacancies Jobs Listing Page" />
    <meta name="keywords" content="vacancies Jobs etc" />
    <script
      data-api-key="YOUR_API_KEY"
      src="https://smartfeed.vacancy-filler.co.uk/editor/main.js"
    ></script>
  </head>
  <body>
    <div class="row" data-sf="jobs-list">
      <div class="col-6" data-sf="job">
        <h3 data-sf="job-title"></h3>
        <p data-sf="job-summary"></p>
        <a data-sf="job-link" href="www.example.com/JobPage.html"> More Details </a>
      </div>
    </div>
  </body>
</html>

http://localhost:3000

Software Developer

Lorem ipsum Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Details

Data Analyst