How to Set up the Advanced Jobs Widget

Setting Up
Customizing
Troubleshooting

The Advanced Widget is one of JazzHR's career page integration methods.  It is a piece of code that is embedded on your website and generates a real time listing of jobs and application forms.  The Advanced Widget is compatible with WordPress and any websites which allow JavaScript.

The advanced widget allows for a search function, cleaner look, and the ability to add some customization to the layout.  You can install the widget by following the detailed steps below. 


Note: Only one helper file is needed. The advanced widget can only be used in one domain but can be placed in as many pages within the domain as needed.

  1. Download The Resumator Helper ZIP file from Jazz
  2. Unzip and Upload The Resumator Helper .HTML file to your website
  3. Update the Settings page
  4. Paste the Advanced Jobs Widget into any page on your website
  5. Test your Careers Page

Step 1:  Download The Resumator Helper ZIP file from Jazz
First, download the Helper ZIP file. You can find this file on the SETTINGS tab at the top of your screen in JazzHR. Once there, navigate to the Job Board tab. You will find a section with a click-to-download Helper File, which will download a zip file to your computer. You must open the zip file to get the file inside. The file is named the_resumator_helper.html. Extract and save the file in a convenient location.

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

Now that you have the Helper ZIP file you must upload it to your website. You may require the assistance of your website administrator to get this uploaded to your website. The file must be placed on the web server as long as it meets the requirement listed below.

Helper File Requirements

  1. The file must be accessible through a URL that is on the same domain and subdomain as the widget code.
  2. 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.
  3. 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.


You can test the code to make sure it is working by going to the URL in which the file is saved on your website. Try entering http://www.mycompany.com/files/theresumator_helper.html into your web browser. This should open up a blank webpage. If you 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 Job Board page

Next, you need to update the Job Board Page so Jazz knows where the helper file can be found. Just above the click-to-download link for the helper file, you will see a text box. Place the full URL here and Save the changes at the bottom.
eg: http://www.mycompany.com/theresumator_helper.html

Step 4: Copy and paste the advanced widget code into a page on your website

Now that you have the Helper HTML file on your website, you can insert the advanced widget. You can copy the advanced widget code from Jazz and insert it into your website coding. You can find the widget code on the Settings > Job Board Page. 

Step 5: Test your Careers Page

Finally, visit your Careers Page and make sure that the job postings are showing. If they are not, contact support for further assistance.

Note:  When the advanced widget code is rendered on your website, it displays the jobs in an iframe (table) format.


Customizing

 

Editing Jobs Widget Styles

Using CSS, you can also edit the basic look and feel of any unique elements contained in the Basic Widget.

  1. Log into JazzHR.
  2. Click Settings. Note: Only Super and Recruiting administrators and account owners will have access to Settings.
  3. Click Job Board.
  4. Scroll to Customize Jobs Widget section.
  5. Click Edit Job Widget Styles.
  6. Scroll to the bottom of the editor to make CSS changes to the widget.
  7. Click Save Layout.

 

How to Filter my Widget by Department or City

The widget will allow you to filter job postings by department or city. To do so, you will need to have the widget filter the job postings by department or city.

What you need to do:

  • 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 in 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

Page Jumping

Sometimes, when clicking anything in the Advanced Widget, the page continuously jumps back to the top.  When this begins to occur, follow these instructions to stop that from happening.

  1. Locate the helper file that you uploaded to your corporate website.
  2. Rename the helper file from theresumator_helper.html to theresumator_helper.html?nojump=1
  3. Log in to Jazz and update the URL of the helper file as well.

NOTE:  You need to actually rename the file itself by appending ?nojump=1 to it

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk