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 codes which 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 preview below will update along with the widget code.


When you're happy with the layout, copy the code on the right. This code will need to be added to a page on your site.

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.

Extra customization


If you or someone on your team knows 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');