Top

How to embed jobs on your website

Follow

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.

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.

job_widget_1.png

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.

job_widget_2.png

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

CSS

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: "}

Javascript

If you're utilizing jQuery on your site you can enable further customization by adding this code after the regular Workable embed code.

Open job in a new tab

$(document).on('click', 'li.whr-item a', function(e) {
e.preventDefault();
window.open(this.href, '_blank');
});