Embed the Advanced Jobs Widget on Your Website

Embed JazzHR's Advanced Jobs Widget on your website to generate a real-time list of your JazzHR jobs and application forms. Use this integration option if you have 20 or more jobs and want a cleaner, more customizable look with the ability to filter and search.

For more basic functionality, embed the Basic Jobs Widget.

The Advanced Jobs Widget, which is a small piece of code, requires one helper file and is compatible with any webpage that accepts JavaScript. It can only be used on one domain but can be placed on as many pages as needed. This article covers:


Setting up the Advanced Jobs Widget

Step 1: Download and unzip The Resumator Helper ZIP file from JazzHR:

  • Click Settings.
  • Click Career Page.
  • Scroll to the "Jobs Widget", and click Download Helper File.
  • This will download a .zip file to your computer.
  • Open the .zip file, and retrieve the "the_resumator_helper.html".
  • Extract and save this file in a convenient location.

Step 2: Upload The Resumator Helper.HTML file to your website:

This step requires you to access the backend of your website. Please reach out to your website administrator if you need assistance. Note that the file must be placed on the web server as long as it meets the following helper file requirements:

  • The file must be accessible through a URL that is on the same domain and subdomain as the widget code.
  • For example, if your job page has the widget code at http://www.mycompany.com/careers, then the HTML Helper file must be on http://www.mycompany.com/the_resumator_helper.html.
  • Be careful since www.mycompany.com and http://mycompany.com are two different URLs. The helper file must be on the same domain as the widget.

Test the code to make sure it's working by going to the URL where you saved the file on your website. Enter http://www.mycompany.com/files/theresumator_helper.html into your web browser. This should open up a blank webpage. Right-click on the page, and select “View Source”. You should see a page full of code. If you can, it is successfully on your website.

Step 3: Update the Settings > Career Page page to let JazzHR know where to find the helper file:

Step 4: Paste the Advanced Jobs Widget onto any page on your website:

WithThe Resumator Helper.HTML file already uploaded, access the backend of your website once more to insert the Advanced Jobs Widget:

  • Click Settings.
  • Click Career Page.
  • Copy the code from the "Option 2: Use the Advanced Jobs Widget" field.
  • Insert this into your website coding.

Step 5: Test your careers page:

Visit your website's careers page, and make sure that the job postings are showing. If they are not, contact support@jazzhr.com for further assistance. Note that when the Advanced Jobs Widget code is rendered on your website, it displays your JazzHR jobs in an iFrame (table) format.


Editing the Advanced Jobs Widget

Use CSS to edit the basic look and feel of certain elements contained in the Advanced Jobs Widget.

  1. Click Settings.
  2. Click Career Page.
  3. Scroll to the "Jobs Widget" section.
  4. Click Edit Widget Styles.
  5. Scroll to the bottom of the editor to enter CSS.
  6. Click Save Layout.

2018-05-31_14.19.05.gif 


Filtering the Advanced Jobs Widget by Department or City

The Advanced Jobs Widget allows you to filter job postings by department or city. Here's how:

  • Create separate pages or sections within your webpage.
  • Use multiple instances of the advanced widget code to pull down specific jobs.
  • Set the code to pull specific cities or departments by adding a filter.

Below are examples of a modified Advanced Widget code:

By Department

<iframe name="resumator-job-frame" id="resumator-job-frame" class="resumator-advanced-widget" src="//jazzwebinars.applytojob.com/apply/jobs/?department=sales" width="100%" scrolling="yes" frameborder="0" allowTransparency="true" height="650"></iframe><script>function resizeResumatorIframe(height,nojump){if(nojump== 0){window.scrollTo(0,0);}document.getElementById("resumator-job-frame").height = parseInt(height)+20;}</script>

By City

<iframe name="resumator-job-frame" id="resumator-job-frame" class="resumator-advanced-widget" src="//jazzwebinars.applytojob.com/apply/jobs/?city=pittsburgh" width="100%" scrolling="yes" frameborder="0" allowTransparency="true" height="650"></iframe><script>function resizeResumatorIframe(height,nojump){if(nojump== 0){window.scrollTo(0,0);}document.getElementById("resumator-job-frame").height = parseInt(height)+20;}</script>

Notice the ?department=sales and ?city=pittsburgh portion of the code. This was added to advanced widget code to filter the jobs to only show the ones in the Sales department or City of Pittsburgh. You can update this to filter by whichever department or city you need. 

  • For this to work, the department or city needs to be set within the job posting record.
  • You can also replace department with city and have the widget filter by city instead.

Troubleshooting

If clicking anything in the Advanced Jobs Widget causes the page to continuously jump back to the top, follow these instructions to resolve:

  1. Navigate to the 'Jobs Helper File URL' location on our Career Page settings.
  2. Append ?nojump=1 to the full URL of the helper file.
  3. Save changes.

Please note: Due to the nature of the certain GUI's (Graphical User Interface's) the JazzHR Advanced Jobs Widget might have difficulty loading on web hosting sites like WordPress and WIX. If you have specific questions regarding this, please reach out to support@jazzhr.com.


Frequently Asked Questions

Where do I place the helper file?

Place the helper file on a URL with the same domain and subdomain as the widget code.

How do I enable a scroll functionality?

Change "scrolling=no" to "scrolling=yes" within the code of the Advanced Jobs Widget itself to enable users to scroll through job descriptions and applications. This is highlighted below:

<iframe name="resumator-job-frame" id="resumator-job-frame" class="resumator-advanced-widget" src="//perkinsmotors.applytojob.com/apply/jobs/" width="100%" scrolling="no" frameborder="0" allowTransparency="true"></iframe><script>function resizeResumatorIframe(height,nojump){if(nojump== 0){window.scrollTo(0,0);}document.getElementById("resumator-job-frame").height = parseInt(height)+20;}</script
 
Our Advanced Jobs Widget is filtered by department(s), but certain jobs are showing under multiple departments. Why is this?

The JazzHR Advanced Jobs Widget filters department names using a “contains” logic (not an “exact match” logic). Because of this, department names that contain one or more of the same words will result in job(s) with those departments populating under both.
 
For example: If your widget was filtered on the departments of "West Pittsburgh" and "Pittsburgh", any jobs whose department was "Pittsburgh" would show up under both filters.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.