Easily display Wrk job posts on your Webflow site with our CMS integration

Posted by Corey Daniels on August 14, 2020

Webflow is a cutting-edge website builder that has been taking over the internet. It enables you to build, launch, and grow your website without writing a single line of code.

It is an incredible tool, built by a great team, which is why we're excited about our new integration with their CMS service. After a quick setup, you'll be able to build a custom job board in Webflow that displays your jobs from Wrk. As you create, edit, and remove jobs in Wrk, your Webflow job board will stay perfectly in sync. If you're using Webflow for your company website, there's no better way to build and manage a custom careers page.

In this short guide, we'll run through the process of getting the integration set up.

Ensure you have a Webflow CMS subscription

Our integration is built around the capabilities of the Webflow CMS. So, the first thing you'll need to do is ensure that you have their CMS features enabled for the site you want to integrate with Wrk. If you're currently just using their 'Basic' site plan, you'll need to upgrade to their 'CMS' site plan.

the webflow site plan options screen

Once you've confirmed that you have an active CMS site plan, you can head to Wrk to start setting things up.

Connect your Wrk and Webflow accounts

The first step in setting up the integration is to connect your Webflow account with your Wrk account. This will allow them to communicate with each other. To do this, head to the Webflow integration page in Wrk. This can be found under Account Settings, within the Integrations section. Click the 'Connect to Webflow' button to start the process.

the Connect to Webflow button in Wrk

You'll be taken to a Webflow, Request for Permission page where you can choose one or more sites to allow Wrk to publish jobs to. Select the site you wish to integrate with and click 'Authorize Application'.

the Request for Permission screen in Webflow

After authorization, you'll be returned to the Webflow integration screen in Wrk. Here you can confirm the connection by selecting your site in the configuration settings.

the Webflow configuration screen in Wrk after connecting a site

Create a CMS collection in Webflow to store your jobs

Webflow has some great documentation around CMS collections but we'll run through the basics here.

You'll need to create a new CMS collection in Webflow for your jobs. This will give Wrk a place to save the information about your jobs. To do this you'll need to head to the Designer interface in Webflow. The CMS Collections view can be accessed from a tab on the left.

the CMS Collections view in Webflow

Click the 'Create New Collection' button in the top right of the CMS Collections column. From there you can set up your new jobs collection. Give it a name and configure it with a set of collection fields that correspond to the job information you'll like to display on your site.

Here's a full list of the job information available from Wrk:

  • Job Title (Plain Text)
  • Published At (Date/Time)
  • Category (Plain Text)
  • Employment Type (Plain Text)
  • Location (Plain Text)
  • Description (Rich Text)
  • Application Form URL (Link)

When you create a new CMS collection, Webflow automatically includes two 'Basic Info' fields that should be kept as they are. 'Name' will be used for your job title and 'Slug' will be needed if you want to create a dedicated page for each job.

You can add custom fields to your collection to store the additional job information from Wrk. We recommend creating fields for each of the additional job information items listed above. Please note the field types we list next to each item, each field you create for your collection should match the type coming from Wrk.

the Create Collection view in Webflow

After configuring your collection, click the 'Create Collection' button to save it. You'll see a screen showing your new, empty job collection.

an empty collection in Webflow

You can now head back to Wrk to finish setting up the integration.

Map your Wrk values to your collection fields

In Wrk's Webflow integration screen, you should now have the ability to choose a collection to use for jobs. Select your newly-created collection and a list of the fields you created will be displayed. You may need to refresh for your new collection to appear.

the Webflow configuration screen in Wrk after selecting a collection

For each collection field you'll need to select a value from Wrk to populate it from. After selecting a value for each field, click the 'Save Field Mapping' button to save your configuration. At this point, Wrk will sync your published jobs to your Webflow CMS.

a populated collection in Webflow

After a refresh, your jobs CMS collection should be populated with your published jobs from Wrk, ready for use in building a careers page. As you publish new jobs, archive old jobs, or make edits to existing jobs, your Webflow CMS collection will automatically be updated with the changes.

One important thing to keep in mind

This integration is built to enable the ability to manage your jobs in Wrk and have your CMS collection automatically kept up to date. While Webflow provides it's own interface to let you edit the jobs collection, we do not advise making collection edits there.

Any changes to jobs made within the Webflow CMS editor will not persist after Wrk syncs its own job changes. All job editing and management should be done in Wrk.