Skip to main content
SmartRecruiters

Job Widget

Plans:
  • Personal
  • Team
  • Corporate
Plans:
  • Personal
  • Corporate
  • Enterprise
  • Global

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.

Introduction

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.

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 6 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.

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.

You can also filter jobs by their visibility.

  • 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. Selecting this option 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. 
  • Select Internal job ads if you're creating a Job Widget that should display only Internal ads. Selecting this option 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. 

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.

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='https://static.smartrecruiters.com/job-widget/1.1.1/script/smart_widget.js'></script>
<script type='text/javascript' class='job_widget'> 
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": "https://www.smartrecruiters.com",
    "custom_css_url": "https://static.smartrecruiters.com/job-widget/1.1.1/css/smart_widget.css"
});

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