Skip to main content

Job Widget

Included in:
  • SmartStart
  • SmartRecruit


Companies who want to embed an up-to-date list of jobs on their corporate site can customize a Job Widget and just drop the widget's JavaScript snippet into the site.


Job Widgets are customizable JavaScript snippets that you can drop into your company's website. Each widget displays a list of jobs, and candidates can click on one to see the job's ad and apply to the job. Once you've configured the widget, SmartRecruiters will generate the code for you. Just copy this code and add to your company's site.

Admins can:

  • set up multiple Job Widgets and customize their color. 
  • create specific widgets for departments or locations.
  • give each widget a specific source so that you can track candidates who apply to jobs using that widget. 

Edit Job Widget

To customize your Job Widget:

  1. Navigate to Settings / Admin.
  2. Click Job Widget in the Career Page Setup list.
  3. Then, customize the widget's design, select its columns, choose which jobs to filter (if any), and set the widget's source.

You can click Grab Code at any time to get the JavaScript snippet with your current settings. However, the widget configuration page will not save your settings, so make sure you've grabbed this code before leaving this page.

Add styling

Brand your widget by selecting colors for the rows, header, text, and background. Click any of them to select a color using a color picker or by RGB or Hex values.

Screen Shot 2017-01-28 at 10.20.31 AM.png

Display all active jobs actually displays up to 100 jobs at a time.

Customize columns

By default, the widget will display all active (published) job ads and automatically fill the entirety of the HTML element where you insert it. Change these values if you'd like. The widget can display up to 5 columns. Add or remove columns as you like. For a cleaner presentation when embedding the widget into your site, click Remove Column Headers.


To let candidates filter the list of jobs on their own, click Display ability to filter jobs.

The Job Widget Column Headers will translate to all our supported languages when creating the widget in the SmartRecruiters Job Widget page under Settings / Admin. Once embedded on a site, the widget will auto-detect and translate into the browser’s default language for each user. 

Filter jobs

If you're creating a widget for specific location or departments, choose them from the Filter Jobs tab. If you just want to display all your active jobs, skip this tab.Screen Shot 2017-10-25 at 12.39.29 PM.png

Internal Job Widget

If you have the SmartMobility add-on, you can also filter jobs by their visibility and create a Job Widget that displays your Internal job ads.

  • SmartRecruit
  • +
  • SmartMobility

Screen Shot 2017-10-25 at 12.41.31 PM.png

  • Leave Public job ads only  selected if the Job Widget should display only Public ads.
  • Select Public job ads and internal job ads if you're creating a Job Widget that should display both Public and Internal ads.
  • Select Internal job ads if you're creating a Job Widget that should display only Internal ads.

Selecting either of the latter two options will generate a security token, which will be added to the widget's code to allow Internal ads to show in the widget's list of jobs. Screen Shot 2017-04-24 at 10.29.34 AM.png

Set source

By default, any candidate who applies to a job they found through your widget will have a source of Job Widget.

  • If you only plan to use one widget, you can keep this source's name, or edit it.
  • If you're creating multiple widgets and would like to track candidates from each widget separately, give each widget a different source name.

Screen Shot 2017-01-28 at 10.20.46 AM.png

Get Widget code

While you're on the Job Widget page, click Get Code at any time, on any tab, to get the code for the currently displayed settings in small JavaScript snippet like this one:

<script type='text/javascript' src=''></script>
<script type='text/javascript' class='job_widget'> 
    "company_code": "AcmeHoldings", 
    "bg_color_widget": "#ffffff", 
    "bg_color_headers": "#969696", 
    "bg_color_links": "#55dd88", 
    "txt_color_headers": "#292929", 
    "txt_color_job": "#3d3d3d",
    "bg_color_even_row": "#e0e0e0", 
    "bg_color_odd_row": "#f7f7f7", 
    "auto_width": "auto",
    "auto_height": "auto",
    "number": "on",
    "job_title": "true",
    "location": "true",
    "add_search": "true",
    "trid": "",
    "api_url": "",
    "custom_css_url": ""

 Paste this snippet into your site to produce the widget as displayed in the Live Preview.

Screen Shot 2017-02-14 at 4.21.41 PM.png

Javascript of the Job Widget can be updated with new versions.  To update your job widgets code, generate a new code from the job widget page under Settings/Admin.