Submit a ticket

The Job Board Editor & iFrame

Updated on Follow
0 out of 0 found this helpful

There are several ways that your posted jobs can be displayed on a website.  This article will cover the most basic of them all – the Avionte IFrame.

Basic Understanding

The Avionte IFrame is used to display the jobs that you posted in Avionte inside of a window (the “frame” of the word IFrame) on your existing careers page.  To accomplish this, you will want to provide the URL of your current careers page to your Account Manager.

Many websites use a CSS file to define the styling of the pages within the site.  If your website uses a CSS file, you can give the location of it to your Account Manager and they will apply it to the COMPAS IFrame so that the styling (fonts, colors, sizes, etc.) matches the rest of your website.

It just doesn’t get any easier than that!

The Job Board Editor

Users who have access to the Job Board Editor can get there by clicking on your picture (Account & Settings) > Utilities > Job Board Editor.

On the left-hand side, you’ll see each of the Job Boards you have with Avionte. On the right, you’ll see the various items that you can customize in the IFrame of the selected Job Board. Below are the descriptions for the fields that aren’t obvious.

  • Job Board Social Name:  This section allows you to edit your company name which will appear on your jobs for external job boards.
  • Job Board Location: This is where the URL of your careers page is entered by the Account Manager (additional URLs can be added, the first URL is the default).  *Note: if you should ever change the location URL of your Careers Page, you will need to update this field to reflect the new URL. Your Account Manager or Customer Support team can help you with that if needed.
  • Job Board Language: Select from a pre-defined set of languages or custom-defined the fields for any language, not on the list
  • Job Board Requirements: This is where you can define which data points are required when applicants apply online.
  • Job Board Layout: Classic will list all of your jobs together with the most recently posted jobs at the top.  Grouped will allow you to segregate the jobs and define what the group separator looks like if used (location, category, OR title).
  • EEO: Enables and disables the EEO form option for your web applicants.
  • Style Location: If a CSS file is used, this is where the file location is entered.  The Avionte IFrame requires that it’s a site-wide CSS declaration. For maximum browser compatibility, we highly recommend that the file location use HTTPS.
  • Allow General Applications: Allows candidates to apply (submit their resume, contact info, etc.) even if they don’t see a particular job that suits them.
  • Include search capabilities: Ability for job seekers to search by Job title, Location, Department, AND/OR Position Category.
  • Applicant Referral: Allows a web applicant to indicate whether they were referred to this job by someone and if so, by whom.
  • Include Social Share Widget: Displays a widget that allows viewers of the jobs on your careers page to share the job on various social networks.

Once your IFrame is set-up, unless you change your Careers Page, you shouldn’t have a need to ever use the Job Board Editor again.

mceclip0.png

The Technical Bits and Code Examples

The remainder of this article might get a bit technical for some.  It includes information that a web developer should be able to use to help with getting the IFrame into your Careers Page. There are essentially three steps that need to take place to get the IFrame loaded and working:

1. Add in the IFrame wherever you want the content to go on your careers page:

<iframe id="compframe" name="compframe" height="1500" width="95%" frameborder="0" allowTransparency="true" style="overflow:auto" onload="window.parent.parent.scrollTo(0,0)" > </iframe>

   To enable automatic IFrame resizing based on content height:

<script type="text/javascript">
if (window.addEventListener) {
    window.addEventListener('message', receiveMessage, false);
} else if (window.attachEvent) { //IE
    window.attachEvent('onmessage', receiveMessage);
}
function receiveMessage(evt) {
    //alert("iframe content: "+evt.data);
    var iframe = document.getElementById('compframe');
    iframe.style.height = evt.data + 'px';
}
</script>

2. In the header, add the pointer to the JScript file:

 <script type="text/javascript"   src="http://COMPANYBUILDNAME.mycompas.com/staff/consol_careers/dyniframe2.js"></script>

3.  Add an onload directly after the body tag:

<body onload="getreq()">

–OR–

<script type="text/javascript"> window.onload=function(){getreq()}; </script>

Feel free to reach out to your dedicated Customer Success Manager for any further questions.  They can provide you with all the necessary information your web developer will need to get this up and running.


Have more questions? Submit a request

0 Comments


This space is for article feedback only. To make a request of the Avionté Support Team, please submit a ticket to https://support.avionte.com.