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 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 Site plans pricing screen in Webflow

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 Website selection screen in Wrk's Webflow configuration

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 screen 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)

  • Remote Friendliness (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 New Collection screen in Webflow's CMS Collections page

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 CMS collection in Webflow's CMS Collections screen

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 Collection Field Mapping interface in Wrk's Webflow configuration

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's CMS Collections screen

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.

Using your Jobs Collection in Webflow

Webflow has a great guide on how to use a CMS collection in your UI. Check it out here.

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 their 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.

Did this answer your question?