If you prefer to list open positions directly on your existing corporate website rather than utilizing a separate careers site, the jobs widget provides an embeddable JavaScript solution. The widget syncs automatically with Recruitee, ensuring that whenever you publish, archive, or modify a job posting, the changes reflect instantly on your own website.
Note: Implementing the jobs widget is an advanced configuration that requires access to your website's HTML source code.
An example of Recruitee's jobs widget in action:
Configure your widget settings
Before embedding the code on your website, customize the widget's appearance, grouping, and filtering options inside your Recruitee dashboard.
1. Click Settings in the top-right corner of the platform.
2. Under the Apps and plugins section, select Jobs widget.
3. Under the Settings tab, configure your preferred structural and stylistic choices:
Companies: Select which specific company account you want to pull active job listings from.
Action: Define what happens when a candidate clicks on an open position (e.g., opening the application form in a new tab or expanding the description).
Theme colors: Set up your widget's visual design. By default, the widget pulls its color scheme from your current careers site settings. You can manually adjust the Primary, Secondary, Text, and Text dark attributes here.
Visible: Toggle whether to display the city and country details next to each job title.
Group by: Choose how to categorize your open roles (e.g., grouping by department or office location).
Filter departments: Narrow down your list by selecting only specific departments to display on this particular widget instance.
Display language: Choose the language interface elements appear in. Note that the widget does not dynamically translate text and will display roles in the primary language they were written in.
Terms & Conditions: Add data consent checkboxes to ensure legal compliance when collecting candidate information.
4. Click Save to lock in your configuration options.
Important: Adjusting the Theme colors or general appearance options does not retroactively update the widget already live on your website. If you modify these specific visual parameters in Recruitee, you must copy and paste the newly generated code snippet back into your website's HTML editor.
Note: Unlike styling choices, modifying your Terms & Conditions or privacy agreements in Recruitee will update your live website widget automatically without forcing you to swap out the code snippet.
Preview and export your embed code
Once your settings are finalized, verify the layout and export the script.
1. Click the Preview tab next to settings to see a live visual render of how your choices will appear to visitors. If you do not have any actively published job offers in Recruitee, a “No Jobs found” message will display.
2. Navigate to either the Code (sync) or Code (async) tabs to view your ready-to-use JavaScript snippets.
3. Click Copy to clipboard in the upper-right corner of your chosen code block.
Tip: Choosing between synchronous and asynchronous integration impacts how your website loads. Code (sync) loads chronologically with your webpage, meaning if a content delivery network (CDN) issue occurs, it could delay your site's loading time. Code (async) loads independently, preventing any widget latency from blocking your main website elements. Consult your technical or IT team to determine which script is best for your environment.
Embed the widget on your website
To go live, open your website’s content management system (CMS) or raw source files. Paste the copied JavaScript snippet directly into the HTML body at the exact location where you want your job list to render on the page.
Source tracking and analytics
By default, when a candidate applies for a role through an embedded widget, Recruitee automatically tracks and records their application source as the specific domain name where your widget is hosted. This keeps your talent acquisition data accurate without requiring custom tracking tags.
Tip: If your engineering team requires deep design overhauls, you can inject custom CSS directly into your webpage stylesheets to overwrite the widget's default layout. If you require advanced customization beyond what CSS can achieve, consider leveraging our developer API integrations instead.