How to embed jobs on your website


You can easily create a careers page hosted on your company's website with the Workable job widget. The widget is a few lines of code that you copy and paste onto your website. It will display your published positions automatically, all with your custom styling and formatting.

You must be an admin in Workable to access the menu below.

To access the job widget, navigate to the Integrations section of your account by clicking your profile icon in the upper right. Then click on Company Website.


Start by selecting the organization options for your jobs. Choose to display them by location or department and then refine the details of what is displayed below.

As you select different options, the code beneath the options will update. When you're happy with the layout you selected, copy the code and have it added to your website on your careers page.

Note for WordPress users: If you plan to insert the code in a WordPress post, then this plugin can be used. If you prefer to insert the code on a different page of your WordPress site (page, sidebar, etc.), then this plugin should work better.

Embedded job examples

Initial listing by job, Group by location:


Initial listing by location, showing state/region: 


Initial listing by department:


Extra customization


If you or someone on your team is familiar with CSS, then you can do further customization to the job widget.  Add the following to the CSS on your page to get the desired effect.

  • Remove the date
.whr-date {display: none;}
  • Remove the location
.whr-location span {display: none;}
  • Remove the internal job code
.whr-code { display: none; }
  • Replace the word ‘Department’ with the word ‘Team’
.whr-dept span {display: none;}

.whr-dept:before {content: "Team: "}


If you're utilizing jQuery on your site you can enable job links to open in a new tab by adding the following code after the regular Workable embed code.

  • Open job in a new tab
$(document).on('click', 'li.whr-item a', function(e) {
e.preventDefault();, '_blank');