Step-by-Step Guide: Integrating Greenhouse with Webflow

Introduction to GreenhouseClient

GreenhouseClient is a JavaScript library designed to seamlessly integrate job and department data from Greenhouse's API into Webflow websites. This guide will walk you through the process of implementing GreenhouseClient to enhance your career pages and streamline your job application process.

Webflow job board example.

More clonable examples.

How to integrate Greenhouse Job Board in Webflow.

Step #1: — Define Elements Structure

The library requires specific elements structure to be present in your page to function correctly. To make it clearer,  you can check it on the clonable page.

Step #2: — Add the script

Copy the scripts <script> and paste into the before </body> tag of your page

<script src="https://cdn.jsdelivr.net/gh/hellomaxkurylo/GreenhouseClient@main/universe-2-0.js"></script>
<script>
window.runGreenhouseClient('YOUR_GREENHOUSE_API_ENDPOINT_HERE');
</script>

Step #3: — Add your greenhouse URL

Replace 'YOUR_GREENHOUSE_API_ENDPOINT_HERE' with the actual API endpoint URL from which you want to fetch.

In Our Example: https://boards-api.greenhouse.io/v1/boards/webflow/departments

<script src="https://cdn.jsdelivr.net/gh/hellomaxkurylo/GreenhouseClient@main/universe-2-0.js"></script>
<script>
window.runGreenhouseClient('https://boards-api.greenhouse.io/v1/boards/webflow/departments');
</script>

Step #4: — Add the attributes to elements

Note: we add only attribute name, value leave empty.

Note: Apply Link can also be added as a Button or Link Text element inside Job Item.

All attributes:

Step #5: — Hit publish

Now you have greenhouse job board on webflow without CMS or any 3rd party integration.

# Optional

You can use the library options, list jobs only, filter by departments, and add job quantity within departments.

Filtering

You can add the filtering by departments. You should add the form element with <select> input, and set them attribute gw-filter-departments

Clonable example.

Jobs only

If you want to display only jobs items you should change URL to /jobs, and use elements start from jobs-container.

URL Example: https://boards-api.greenhouse.io/v1/boards/webflow/jobs

Clonable example.

Display jobs quantity in department

To display the number of jobs in a department, you must add the gw-departments-quantity attribute to the individual element.

Clonable example.